Support storefront filtering
Storefront filtering allows merchants to easily create filters for filtering collection and search results pages. Filters are based on existing product data, like availability, price, variant options, and more.
In this tutorial, you'll learn how to support storefront filtering in your theme.
To implement storefront filtering, you'll use the following:
- The
filterobject - One of the following, depending on the page you're working with:
- The
collectionobject - The
searchobject
- The
Implementing storefront filtering
Anchor link to section titled "Implementing storefront filtering"To support storefront filtering, you need to implement a filter display for customers to interact with.
Applied filters are reflected through URL parameters, so you should also familiarize yourself with the structure of filter URL parameters.
The filter display
Anchor link to section titled "The filter display"The following sections outline a basic collection and search results filter implementation. Each implementation uses a form to host the filter inputs with "submit" buttons to apply the associated filters. However, you can use JavaScript to automatically submit the form based on input changes. When the form is submitted, the page is refreshed with the filters applied.
For a more in-depth solution, refer to Dawn's implementation.
Collection filter display
Anchor link to section titled "Collection filter display"The collection filter display should be included in the collection template, or a section that's included as part of the collection template.
The following example implementation contains two main components:
- A list of filter groups and values.
- A list of active filters, if there are any.
Each of these components are output through the filters attribute of the collection object, and the associated filter objects.
Search results filter display
Anchor link to section titled "Search results filter display"The search results filter display should be included in the search template, or in a section that's included as part of the search template.
The following example implementation contains two main components:
- A list of filter groups and values.
- A list of active filters, if there are any.
Each of these components are output through the filters attribute of the search object, and the associated filter objects.
If you apply filters on the search results page, then all non-product results are filtered out.