Filters let customers narrow a collection or a list of search results to the products they want, such as one size, one color, or a price range. You choose the filters in Shopify's Search & Discovery app, and Checkmate shows them in a Filters panel on collection and search pages.
Filters need Shopify's Search & Discovery app installed in your Shopify admin.
Choose filters in Search & Discovery
The filters, their order, and their names come from the Search & Discovery app, not from the theme editor. Shopify's guide to filters explains how to add them.
Checkmate shows every kind of filter the app creates:
Filter
What customers see
A list of values, such as size, color, vendor or product type
A checkbox for each value, with the number of matching products after it. A value with no matching products is pale and can't be picked.
A yes or no filter
A checkbox, the same as a list value.
Price
Two boxes, From and To, where customers type the lowest and highest price.
Colors and images in a filter
In Search & Discovery, you can show a filter's values as text, as swatches, or as images.
With swatches, each value gets a small colored circle in front of its name. The circle takes the color or the image set in Shopify. A value with neither takes its color from the Swatch colors list in Theme settings, then from its own name if that is a color name such as Black. Show color swatches for variants explains the list.
With images, each value's image shows as a small circle in front of its name. The image is cropped to the circle, so pick images that still read at that size.
Turn on filters for collection pages
The Collection section shows filters when Enable filtering is on, which is the default.
At the top of the editor, select Collections, then Default collection.
In the sidebar, click the Collection section.
Under Content, turn on Enable filtering.
Click Save.
A collection that uses the landing template never shows filters, because filtering is off there. Show a collection without filters explains that template.
The search page has its own Enable filtering setting, also on by default. To check it, select Search at the top of the editor, then click the Search section in the sidebar. On the search page, filters apply to the products in the results, and the Filters button shows only when the search finds products.
What customers see
A Filters button sits above the product grid, and the sort menu sits at the right end of the same row. When customers have picked filters, a small number on the button shows how many. The button shows only when Enable filtering is on and Search & Discovery has at least one filter for that page.
Clicking the button opens the Filters panel. On a computer it slides in from the left side of the screen. On smaller screens it rises from the bottom. When Enable sorting is on, the sort choices come first in the panel. At the bottom, a button such as Show 12 products applies the filters, and Clear all removes them. The panel's title and these buttons stay in view while customers scroll through the filters.
Each picked filter then shows as a small tag between the Filters button and the products, with the filter's name, the value and an x that removes it, and a Clear all link at the end.
Filters let customers narrow a collection or a list of search results to the products they want, such as one size, one color, or a price range. You choose the filters in Shopify's Search & Discovery app, and Checkmate shows them in a Filters panel on collection and search pages.
Filters need Shopify's Search & Discovery app installed in your Shopify admin.
Choose filters in Search & Discovery
The filters, their order, and their names come from the Search & Discovery app, not from the theme editor. Shopify's guide to filters explains how to add them.
Checkmate shows every kind of filter the app creates:
Filter
What customers see
A list of values, such as size, color, vendor or product type
A checkbox for each value, with the number of matching products after it. A value with no matching products is pale and can't be picked.
A yes or no filter
A checkbox, the same as a list value.
Price
Two boxes, From and To, where customers type the lowest and highest price.
Colors and images in a filter
In Search & Discovery, you can show a filter's values as text, as swatches, or as images.
With swatches, each value gets a small colored circle in front of its name. The circle takes the color or the image set in Shopify. A value with neither takes its color from the Swatch colors list in Theme settings, then from its own name if that is a color name such as Black. Show color swatches for variants explains the list.
With images, each value's image shows as a small circle in front of its name. The image is cropped to the circle, so pick images that still read at that size.
Turn on filters for collection pages
The Collection section shows filters when Enable filtering is on, which is the default.
In your Shopify admin, go to Online Store.
Next to Checkmate, click Edit theme.
At the top of the editor, select Collections, then Default collection.
In the sidebar, click the Collection section.
Under Content, turn on Enable filtering.
Click Save.
A collection that uses the landing template never shows filters, because filtering is off there. Show a collection without filters explains that template.
The search page has its own Enable filtering setting, also on by default. To check it, select Search at the top of the editor, then click the Search section in the sidebar. On the search page, filters apply to the products in the results, and the Filters button shows only when the search finds products.
What customers see
A Filters button sits above the product grid, and the sort menu sits at the right end of the same row. When customers have picked filters, a small number on the button shows how many. The button shows only when Enable filtering is on and Search & Discovery has at least one filter for that page.
Clicking the button opens the Filters panel. On a computer it slides in from the left side of the screen. On smaller screens it rises from the bottom. When Enable sorting is on, the sort choices come first in the panel. At the bottom, a button such as Show 12 products applies the filters, and Clear all removes them. The panel's title and these buttons stay in view while customers scroll through the filters.
Each picked filter then shows as a small tag between the Filters button and the products, with the filter's name, the value and an x that removes it, and a Clear all link at the end.
If the Filters button doesn't appear, see Filters don't show on my collection page.