Collection Filters
Storefront filtering built on Shopify's native filter system — three desktop layouts, instant apply, active-filter pills, colour swatches and a price range, all styled from your theme palette with nothing extra to install.
Where filters come from
Peregrine renders the filters you configure in Shopify's free Search & Discovery app — the theme itself never defines a filter. That's deliberate: your filters live in one place, work the same across theme updates, and automatically pick up whatever filter types Shopify adds in future.
- In Shopify admin, open Apps → Shopify Search & Discovery (install it free from the App Store if it isn't there).
- Go to the Filters tab and click Add filter — availability, price, product type, vendor, variant options like colour and size, tags and metafields are all available, up to 25 per store.
- For colour filters, click into the filter to assign a swatch (a colour or an image) to each value, and merge duplicate values — "Navy" and "navy blue" can become one option.
- Save. The storefront picks the changes up straight away.
Until you configure filters, Peregrine shows none — no empty panel, no placeholder. A fresh install looks intentional, and the collection page is simply the full-width grid. In the theme editor (never the storefront) you'll see a one-line reminder pointing you to Search & Discovery.
The three desktop layouts
Pick one in Theme settings → Filtering. Switching layout rearranges your filters, not the design — the groups, options, swatches and behaviour are identical in all three, so you can change your mind at any time without re-learning anything.
| Layout | What you get | Best for |
|---|---|---|
| Sidebar (default) | A column of collapsible filter groups beside the grid, left or right, optionally following the scroll. The grid gives up one column so cards stay a sensible size. | Most stores — filters stay visible, which is why shoppers use them. |
| Horizontal bar | A row of filter buttons on the toolbar, each opening a dropdown. The grid keeps its full width. If you configure more filters than fit on one row, the extras collapse into a "More filters" button — the bar never wraps to a second line. | Stores that want a full-width grid but visible filtering. |
| Drawer | A single Filter button opening a slide-in panel — the same one mobile uses. The widest possible grid. | Strong visual catalogues with only a filter or two. Be honest with yourself here: filters behind a button get used less. For a large catalogue with many options, pick a visible layout. |
Mobile always uses the drawer, whatever you choose for desktop — a sidebar or a button row simply doesn't fit a phone. The drawer's footer shows a live "Show N results" count as the shopper ticks options, so they always know what they'll get before closing it.
How filtering behaves
- Instant apply. Ticking an option updates the grid immediately — no Apply button. The product count, the option counts and the available filters all update together.
- Active-filter pills. Every applied filter appears as a removable pill above the grid, with a quiet Clear all beside them.
- Real links underneath. Filtered views are real URLs — shoppers can share them, bookmark them, and use the back button naturally. Filtering works even with JavaScript unavailable.
- Collapsible groups. Choose whether groups start all open, all closed, or first-group-only. A group containing an active filter always opens — an applied filter is never hidden from the shopper, and if they collapse the group by hand a count stays visible in its header.
- Long lists fold. Options beyond your chosen threshold (default 8) sit behind a "Show more" toggle. Active options are never hidden behind the fold.
- Unavailable options dim, they don't vanish. An option with no matches in the current combination shows greyed-out with a zero count, so the list never reshuffles underfoot.
- Sold-out aware, palette aware. Everything is drawn from your theme's colours and typography — there are deliberately no filter-specific colour settings to drift out of step with your palette.
The price filter and currencies — read this if you sell in more than one country
The price filter appears only when the store is being viewed in your store's default currency. A shopper browsing in any other currency — for example a Canadian visitor seeing CAD prices on a USD store — gets every other filter, but not price.
This is how Shopify itself works, not a theme behaviour: converted prices are calculated at live exchange rates when the page renders, and Shopify's filtering system only indexes prices in your store's default currency. It doesn't just hide the filter — it ignores price filtering entirely in other currencies, which is why no theme and no setting can bring it back. Every Shopify theme behaves this way.
Practical consequences:
- If you sell in a single market, this never affects you — the price filter is always there.
- If you sell in multiple markets, know that the filter set genuinely differs by market, and that's expected. Previewing your store with admin's "View as" set to another country reproduces exactly what that market's shoppers see — including the missing price filter. If your price filter "disappears" while testing, check which country you're viewing as before anything else.
- If multi-currency price filtering is essential to your business, it needs a search-and-filter app that maintains its own product index — see the handover switch below.
Filtering and the loading modes
The collection section's Grid loading setting — pagination, Load more or infinite scroll — works with all three filter layouts, and changing a filter always restarts from the first page of the new results. The modes themselves are covered in Collection Page.
Using a filter app instead?
Turn off Enable theme filtering at the top of Theme settings → Filtering and the theme outputs no filter markup, styles or scripts at all — a completely clean surface for the app to take over, with app blocks slotting into the collection page's app area. This is the same clean-handover switch the theme's SEO output and product badges have. Third-party search-and-filter apps run their own product index, which is also the route to capabilities the platform doesn't offer natively — multi-currency price filtering being the main one.
A note on testing in the theme editor
The editor draws its blue section-selection outline on top of the page preview — including over an open filter drawer, where it can make a filter group look missing. Press Escape to deselect before opening the drawer, or check on the storefront preview. The storefront is always the truth.