Collection Grid

The workhorse of every collection page. It loops through the collection’s products and renders them in a responsive grid with standard product cards. An Alpine.js layer handles loading states and coordinates with the Collection Filters section for AJAX sorting and filtering — the grid dims with a spinner while new results load, then swaps in without a full page refresh.

The section also supports editorial cards — lifestyle or promotional cards pulled from a collection_editorial_set metaobject and inserted at specific positions in the grid. Editorial cards auto-hide the moment any filter, sort, or tag is active, so they never collide with filtered results.

On curated templates like the gift guide, this section can sit dormant — hidden by default, only appearing when a filter is applied. See Curated Collections for how this works.

Settings

Setting	What it does
Section ID	Optional anchor for jump links.
Hide when no filters active	When on, the grid is hidden by default and only appears when a filter or sort is applied. This is how the grid works on curated templates — Collection Row sections show the hand-picked layout, and this grid takes over only when filtering.
Image aspect ratio	Portrait or Square for product card images.
Products per page	How many products per page, 6 to 28 in steps of 2. Default 18. A collection metafield (nama.products_per_page) overrides this when set.
Columns on mobile	1 to 3, default 2. Hidden when editorial cards are configured (locked to 1).
Columns on tablet	2 to 4, default 3. Hidden when editorial cards are configured (locked to 3).
Columns on desktop	2 to 6, default 3. Hidden when editorial cards are configured (locked to 3).
Show description	Toggles product description text on cards.
Show reviews	Toggles star ratings on cards.
Show pricing	Toggles price display on cards.
Show variant swatches	Toggles colour/size swatches on cards.
Enable card swap on swatch click	Updates the card image when a swatch is clicked. Only visible when swatches are on.
Show quick add	Toggles the quick-add button and renders the quick-add modal.
Editorial cards	A collection_editorial_set metaobject picker. Falls back to the collection’s nama.collection_editorials metafield when empty.
Padding top / bottom	Default 0px across all breakpoints.

Column settings lock when editorial cards are active

Editorial card positioning depends on a consistent grid. When a collection_editorial_set is connected (either via the picker or the collection metafield), columns lock to 1 on mobile and 3 on tablet/desktop, and the column range sliders hide from the editor.

Blocks

This section has no blocks. Product cards are generated automatically from the collection’s product loop, and editorial cards come from the metaobject.

Variant card expansion

Products with the nama.variant_cards and nama.variant_card_group_option metafields expand into multiple cards in the grid — one per unique value of the grouping option. For example, a product with Style options “Traditional” and “Easy Clean” renders as two separate cards, each titled “Product Name - Traditional” and “Product Name - Easy Clean”, with color swatches filtered to that style group.

This happens automatically — no section settings to configure. Just set the metafields on the product and add the variant references. See Variant Cards for the full setup.

Dormant mode (hide_when_unfiltered)

When Hide when no filters active is enabled:

• The section renders with a hidden class and a data-collection-filtered attribute.
• On page load with no filters, it is invisible — the curated Collection Row sections are what the visitor sees.
• When a filter is applied, JavaScript fades out the Collection Row sections, shows a loading spinner, fetches the filtered grid via AJAX, and fades it in.
• The server re-renders the section with the filtered products (Shopify’s Section Rendering API respects URL filter params), so the HTML that gets swapped in already has the correct products and no hidden class.
• Clearing all filters reverses the process — grid fades out, rows fade back in.

Where it’s used

• collection.json — standard mode
• collection.parts.json — standard mode
• collection.gift-guide.json — dormant mode (hide_when_unfiltered: true)

Tips

• Pair with Collection Filters. This section handles the grid; filtering, sorting, and pills live in the separate Collection Filters section above it. They communicate via Alpine.js events and URL params.
• Use editorial cards for storytelling. A collection_editorial_set metaobject lets you drop lifestyle cards at exact grid positions. They disappear automatically when the visitor filters, so they never produce weird gaps.
• Products per page can be set per collection. The nama.products_per_page metafield on a collection overrides the section setting.
• The empty state is built in. When a collection has zero products the section renders a “No products found” message with a link to browse all products.