Handling Blank Product Cards in Collections

When you use B2B Lock to hide products inside a collection, your theme still needs to render a nice-looking grid. If it’s not configured well, you can sometimes see:

  • “Gaps” where products used to be

  • Uneven rows or strange spacing

  • Sliders with fewer items than expected

This page explains why this happens and how to design your B2B setup to avoid ugly grids.


1. Why blank product cards happen

Most Shopify themes work like this:

  1. Shopify sends a list of products for a collection.

  2. The theme loops through them and renders one product card per item.

  3. B2B Lock hides or replaces some of those products based on your rules.

If the theme expects a fixed number of items, or if it doesn’t handle “hidden” products gracefully, you may see:

  • Empty spaces or columns

  • Rows that look cut off or misaligned

  • Sliders with fewer items than expected

This is not a bug in B2B Lock itself – it’s the combination of:

  • How the theme renders product grids, and

  • Which target you chose (hide products vs hide collections).


To minimize blank cards and keep things visually clean, use these patterns:

Pattern A – Prefer collection-level locks for clean separation

If an entire collection is B2B-only:

  • Use Hide collections as your target, not Hide products inside a mixed collection.

  • Keep retail and B2B products in separate collections, e.g.:

    • Retail Collection

    • Wholesale Collection

Then:

  • Lock the Wholesale Collection for tagged/logged-in B2B customers.

  • Keep the Retail Collection public.

Result:

  • No missing cards inside retail grids – the whole B2B collection is simply invisible to non-B2B visitors.

Pattern B – Use “Hide products” only for small exceptions

If most of a collection is public and only a few items are restricted:

  • It’s acceptable to use Hide products for those few SKUs.

  • Test the grid:

    • If the layout still looks good when a few items are hidden, you’re safe.

    • If it looks broken, consider splitting the collection.


Themes often show featured collections on the homepage (sliders, carousels, etc.). When you hide products in those:

  • The slider may show fewer items or have empty “slots”.

  • This can look especially obvious on desktop.

Best practice:

  • Use featured collections that are fully public for the homepage, or

  • Use B2B-only featured sections that only show for logged-in/tagged customers (via theme conditions or custom sections), and lock the entire collection behind B2B Lock.


4. Testing & QA checklist

Whenever you create or change a lock that hides products/collections:

Check at least:

In each view, test:

  • As a guest

  • As a typical retail customer

  • As an approved B2B customer

If you see strange gaps:

  • Try moving restricted products into a dedicated B2B-only collection and change the lock target to Hide collections instead.

  • If issues persist, contact support with theme name + screenshots so they can advise on theme-specific tweaks.


5. Summary

To avoid blank product cards and broken grids:

  • Prefer collection-level locks for B2B catalogs.

  • Use product-level hides sparingly and always test.

  • Keep homepage featured sections mostly public or clearly separated for B2B users.

Design your catalog structure and locks with the theme’s grid behavior in mind, and you’ll get a clean B2B UX with no visual glitches.

Last updated

Was this helpful?