> For the complete documentation index, see [llms.txt](https://docs-shpf.bsscommerce.com/bss-b2b-lock-login-password-hide-price/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-shpf.bsscommerce.com/bss-b2b-lock-login-password-hide-price/integration-with-other-b2b-apps/best-practices-and-ux-patterns/handling-blank-product-cards-in-collections.md).

# 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).

***

#### 2. Recommended configuration patterns

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.

***

#### 3. Homepage & featured sections

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:

* [ ] Collection pages on desktop
* [ ] Collection pages on mobile
* [ ] Search results pages
* [ ] Homepage featured collections / sliders
* [ ] Any custom sections that show product grids

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.