Guides
Collection filters
Set up filters with Search & Discovery and choose how they're displayed.
On this page
Filters let shoppers narrow down a collection or search by price, availability, color, size, material, and more. Maison displays the filters; Shopify defines them, in the free Search & Discovery app.
1. Create the filters
Install Search & Discovery
From the Shopify App Store, install the Search & Discovery app (free, made by Shopify).
Add filters
In the app, open Filters, then Add filter. You can filter by availability, price, product type, vendor, tag, product option (Color, Size, and so on), category metafield, or custom metafield.
Put them in order
Drag the filters into the order you want: the theme displays them in that order. You can also group values (for example, "Navy blue" and "Navy" into "Blue").
2. Turn on filters in the theme
In the theme editor, open the Collections template (or Search), and in the main section:
- check Enable filtering (and Enable sorting if needed)
- choose a Filter layout: Drawer, Toolbar, or Sidebar.
How each layout behaves is described in Collection page > Filters and sorting.
Which layout should you choose?
| Your catalog | Recommended layout |
|---|---|
| Few products, few filters | Drawer: the grid stays uncluttered, and filters are one click away. |
| Three or four key filters (size, color, price) | Toolbar: filters stay visible above the grid. |
| Many filters, larger catalog | Sidebar: all filters stay visible next to the grid. |
On mobile, all three layouts use the drawer.
Shopify limits
- Shopify shows a maximum of 25 filters per collection or search.
- Filters don't show on a collection that contains more than 5,000 products.
- A filter value only appears if at least one product in the collection has it.
A filter doesn't appear
- Check that it's published in Search & Discovery.
- Check that products in this collection have a value for this filter.
- Check that Enable filtering is checked in the section.
- A filter or value name in the wrong language comes from your data (option name, metafield value): translate it in the Translate & Adapt app. The theme displays the name exactly as Shopify provides it.
Maison 1.0.0