Collection Filters

The toolbar that sits between a collection header and its product grid. It renders a row of tag-based filter pills on desktop, a live product count, a “Sort By” dropdown, and a button that opens a slide-out filter drawer. All filtering and sorting is handled with Alpine.js and AJAX — the page updates without a full reload.

The section has two modes. Filter mode reads tag-based pills from a metaobject filter set and drives real product filtering. Navigation mode renders manual Nav Pill blocks as anchor links that scroll to sections on the page — for curated templates like the gift guide where “filtering” means jumping to a category row, not querying Shopify’s product filters.

Filter configuration comes from the nama.collection_filter_set metaobject on the collection. When no filter set is assigned the section still renders, but without pills or a drawer — just the sort dropdown and product count.

The section hides entirely when a collection has zero products.

Settings

Setting	What it does
Section ID	Optional anchor for jump links.
Pill bar mode	Filter (default) reads tag-based pills from the collection’s filter set metaobject. Navigation renders manual Nav Pill blocks as anchor links instead, and hides the product count, filter button, drawer, and sort dropdown.
Results text	The noun shown after the count (e.g. “products”). Only visible in Filter mode.
Hide sort by	Removes the sort dropdown entirely. Off by default. Only visible in Filter mode.

There are no padding settings — the section uses a fixed py-6 with top and bottom borders.

Blocks

Repeatable:

• Nav Pill — a manual anchor-link pill, only rendered when pill bar mode is set to Navigation. Each pill has a label and a target section ID. Clicking it scrolls to the matching #section-id on the page.

Navigation mode hides all filter UI

When set to Navigation, the product count, filter button, filter drawer, and sort dropdown are all removed. The section becomes a pure in-page navigation bar. The filter-related settings also hide from the customizer sidebar via visible_if.

Where it’s used

• collection.json — Filter mode
• collection.parts.json — Filter mode
• collection.gift-guide.json — either mode depending on the page’s needs

Tips

• The filter set metaobject controls everything in Filter mode. Pills, drawer groups, and excluded values are all configured on the collection_filter_set metaobject, not in the section settings. Assigning the right filter set per collection is the main setup step.
• Use Navigation mode for curated pages. The gift guide template uses Nav Pill blocks to jump between hand-curated rows. Set each Collection Row’s Section ID to match the pill’s target.
• Sort is hidden on mobile when drawer filters exist. The sort options move inside the filter drawer on small screens so they don’t crowd the toolbar.
• Pills auto-generate labels from tags. A tag like product_type_cold-press becomes “Cold Press” — hyphens become spaces, underscores become spaces, and each word is capitalised. Double hyphens (--) are preserved as a single hyphen.
• Use “Hide sort by” on curated pages that use Filter mode but don’t want sorting — sorting rearranges the product grid, which doesn’t make sense when the grid is hidden behind curated rows.