Grid options
Products per row (desktop / mobile) and the in-page grid changer.
Updated 2026-05-09
Listing block settings → grid controls.
| Setting | Notes |
|---|---|
| Products per row (desktop) | 2 / 3 / 4 |
| Products per row (mobile) | 1 / 2 |
| Show frontend grid changer | Adds buttons at top of the listing so customers can switch density |
| Products per page | 8 / 12 / 16 / 24 / 32 / 60 |
Grid changer
When Show frontend grid changer is on, three buttons appear in the listing toolbar (desktop):
- 2 columns
- 3 columns
- 4 columns
And on mobile:
- 1 column
- 2 columns
Customer's choice is per-session (not persisted to localStorage by design — your configured default stays authoritative on first load). The changer adds/removes the collection-grid--{N} and collection-grid--m-{N} classes.
Mobile grid default
Setting Products per row (mobile) controls the initial grid density on mobile — 1-column gives big editorial cards, 2-column shows more variety. Your choice is honored on page load; the customer can override via the changer.
Tips
- 4-column desktop is the editorial sweet spot for fashion. 3-column for premium / luxury.
- Mobile: 2-column for browsing-heavy catalogs, 1-column for hero-image-driven brands.
Need a hand? Contact support.