Support storefront filtering

To implement storefront filtering, you'll use the following:

• The filter object
• One of the following, depending on the page you're working with:
  • The collection object
  • The search object

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 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.

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.

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.