Curated Collection Templates

A curated collection template — like the gift guide — lets the content team compose a page from stacked sections with hand-picked products, editorial cards, and lifestyle content, instead of relying on the standard auto-filled product grid. When a visitor applies a filter, the composed layout fades out and a standard filtered grid takes over. Clearing the filter brings the composed layout back.

This page explains how to build one from scratch.

Template structure

A curated collection template uses these sections in order:

1. Collection Hero — the page header (title, description)
2. Collection Filters — the filter/sort toolbar
3. Collection Grid — hidden by default, appears only when filtering
4. Collection Row (repeated) — one per curated product group
5. Any other non-product sections (editorial, lifestyle, etc.)

The Collection Grid must be placed before the Collection Row sections in the template order, so it appears in the right DOM position when it takes over.

Step-by-step setup

1. Create the template

In the Shopify admin, create a new collection template (e.g. collection.gift-guide). Add sections in this order:

• Collection Hero
• Collection Filters
• Collection Grid
• Collection Row (as many as you need)

2. Configure Collection Filters

Setting	Value
Pill bar mode	Navigation (for anchor-link pills) or Filter with Hide sort by checked
Hide sort by	On (sorting rearranges the grid, which doesn’t exist until filtering)

If using Navigation mode, add Nav Pill blocks — one per Collection Row. Set each pill’s Target section ID to match the corresponding row’s Section ID.

3. Configure Collection Grid (dormant mode)

Setting	Value
Hide when no filters active	On
Card settings	Match your Collection Row card settings for consistency

This section is invisible until a filter is applied. The data-collection-filtered attribute tells the JavaScript to fade it in when filters are active.

4. Configure Collection Rows

Each row is its own section. For each one:

• Set a Section ID (e.g. juicers, accessories) if using Nav Pill navigation
• Add Product Card and Editorial Card blocks
• Optionally fill in the static Title block for a row heading
• Set padding — typically padding_top: 0 for the first row so it sits tight against the filter bar

The data-collection-composed attribute on each row tells the JavaScript to hide it when filters are active.

5. Add products to the collection

Even though products are hand-picked in the rows, they must also be added to the collection itself. Shopify’s filtering only works against products that belong to the collection — the filter set has nothing to query otherwise.

How the toggle works

Server-side (page load / hard refresh)

Both sections check for active filters using the same Liquid pattern:

assign has_filters_active = false
for filter in collection.filters
  if filter.active_values.size > 0
    assign has_filters_active = true
    break
  endif
endfor
if current_tags != blank
  assign has_filters_active = true
endif
if request.params.sort_by != blank
  assign has_filters_active = true
endif

• Collection Row adds hidden when filters are active
• Collection Grid adds hidden when hide_when_unfiltered is on and filters are NOT active

This ensures the correct state on first render — no flash of wrong content.

Client-side (AJAX filtering)

JavaScript in collection-filters.js handles the transitions:

1. Filter applied — collectionFiltersChanged event fires. [data-collection-composed] sections fade out (150ms opacity transition). A loading spinner appears after the fade.
2. Grid fetches — collectionGrid AJAX-fetches the section HTML with filter params. Shopify’s Section Rendering API re-evaluates all Liquid, so the returned HTML has the correct filtered products and no hidden class.
3. Grid appears — the new element is inserted with hidden (to prevent flash), then collectionResultsUpdated fires, and the grid fades in (200ms).
4. Filter cleared — the reverse: grid fades out, composed sections fade back in.

Data attributes

Attribute	Applied to	Purpose
data-collection-composed	Collection Row <section>	JS hides these when filters are active
data-collection-filtered	Collection Grid <section> (when hide_when_unfiltered is on)	JS shows this when filters are active
data-collection-loader	Dynamically created spinner	Visible between composed fade-out and grid fade-in

Non-product sections

Sections that aren’t Collection Rows (hero, editorial, lifestyle sections) are not affected by the toggle. They stay visible whether or not filters are active. Only [data-collection-composed] elements are hidden — and only Collection Row sections carry that attribute.

Checklist

• Collection Grid has Hide when no filters active checked
• Collection Grid is ordered before Collection Row sections in the template
• Each Collection Row has a Section ID set (if using Nav Pills)
• Nav Pill target IDs match the Collection Row Section IDs
• All hand-picked products are also added to the collection
• Card display settings (aspect ratio, descriptions, reviews, etc.) are consistent between Collection Grid and Collection Row sections