Collection Row

A hand-picked row of product and editorial cards laid out in a responsive grid. Unlike the main Collection Grid which auto-fills from a collection’s product loop, this section is fully manual — you add individual Product Card and Editorial Card blocks and arrange them in the order you want. It is the building block of curated collection templates like the gift guide, where each row is its own section with its own heading.

When a visitor applies a filter or sort, every Collection Row on the page fades out and a Collection Grid section takes over with the filtered results. This happens via AJAX with a loading spinner — no page reload. Clearing the filter reverses the transition. See Curated Collections for how to set this up.

Settings

Setting	What it does
Section ID	Optional anchor for jump links. Set this when using Nav Pill blocks to scroll to specific rows.
Columns on mobile	Grid columns on small screens. 1 to 3, default 2.
Columns on tablet	Grid columns on medium screens. 2 to 4, default 3.
Columns on desktop	Grid columns on large screens. 2 to 4, default 3.
Image aspect ratio	Portrait or Square for product card images.
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 on product cards.
Padding top / bottom	Default 40/60/80px (mobile/tablet/desktop).

Blocks

Static blocks (opt-in — hidden when empty):

• Title — section heading rendered above the grid. The wrapper is only output when the title has actual content, so an empty title block takes no space in the layout.
• Rich text — optional description below the title. Same empty-detection logic.

Repeatable:

• Product Card — a hand-picked product. Each block picks one product and renders it through the standard product card snippet, with all display settings (aspect ratio, description, reviews, etc.) inherited from the section.
• Editorial Card — a lifestyle or editorial card with its own image/video and title, interspersed among product cards in the grid.

Filter-aware hiding

This section marks itself with data-collection-composed. When any collection filter, sort, or tag is active:

• Server-side (page load): Liquid detects active filters and adds a hidden class so the section never flashes on a filtered URL.
• Client-side (AJAX): JavaScript in collection-filters.js listens for filter changes and fades the section out, shows a loading spinner, then fades in the Collection Grid with filtered results.

All products in the curated rows must also be added to the collection itself, so Shopify’s filtering has products to work against.

Where it’s used

collection.gift-guide.json

Tips

• One row per section. The gift guide stacks multiple Collection Row sections on the page, each with its own title and mix of products. This keeps each row independently editable.
• Match column count to card count. A 3-column row with 4 cards means one card wraps to a second line. Plan card counts in multiples of your column setting.
• Editorial cards break up the grid. Drop one between product cards to add lifestyle imagery or a callout without leaving the grid layout.
• Set a Section ID for Nav Pill targeting. If the Collection Filters section uses Navigation mode with Nav Pill blocks, each row needs a Section ID so the pills have something to scroll to.