Storefront filtering is an essential component to the customer experience as it helps them find what they're looking for faster, which can help increase conversions for merchants.
The following outlines some key considerations related the filtering experience.
To learn how to implement a basic version of storefront filtering, refer to [Support storefront filtering](/docs/storefronts/themes/navigation-search/filtering/storefront-filtering/support-storefront-filtering).
## Provide the right interface for each filter type
There are two filter types:
- [List](#list)
- [Price range](#price-range)
### List
It's recommended to use a set of checkbox inputs for filters of type `list` to make it obvious that multiple values can be selected at once.
For example:
### Price range
It's recommended to use a dual-handled slider for filters of type `price_range`, however you should also include number input fields for the "start" and "end" values of the range to account for accessibility. You should ensure that the fields number fields have labels, such as "From" and "To", even if they're visually hidden.
For example:
## Provide a choice of filter layout
There are two standard layouts for filtering on larger screens:
- A [horizontal toolbar](#horizontal-toolbar-filters) above the product list
- A [vertical sidebar](#vertical-sidebar-filters) to the left of the product list
In order to provide flexibility for varying merchant needs, you should consider providing both layouts as an option behind a theme setting.
### Horizontal toolbar filters
A horizontal toolbar above the product list can provide a compact entry point to both filtering and sorting, but works best for smaller stores that need less than five filters at a time.
For example:
### Vertical sidebar filters
A vertical sidebar to the left of the product list works best for stores with more than five filters.
For example:
## Provide a clear visual hierarchy
You should style filters to make relationships clear. For example, the name of each filter group should stand out from its values, and there should be a clear separation between filter groups.
For example:
## Avoid dead ends
Customers shouldn't end up with zero results. As such, you should always show the count of results with each filter value, and disable any values that have zero results.
For example:
## Show applied filters
If a customer lands on a page with filters already applied, they need to be able to see which filters have been applied. Similarly, if a customer adds a filter, they need feedback that it applied.
In both of the above scenarios, customers should have an easy way to remove an individual filter, or clear all filters.
For example:
Often, filter values are clear enough that applied filter labels can just display the value, such as "Shoe" or "In stock". However, sometimes it may not be clear which filter a value applies to, such as having filters for both "Width" and "Height".
To account for this possiblity, you should add a theme setting to allow merchants to include the filter group name with the filter value.
For example:
## Manage filter groups
In vertical sidebars, you should consider collapsing filter groups after the first five. This makes it easier to scan for the desired filter group with minimal scrolling.
For example:
## Manage filter values
Filter groups can display up to 100 values, so you should truncate the list to 10 values with the option to show more. The first 10 values likely aren't the most relevant, so if possible, you should show the 10 most relevant values.
For example:
## Optimize for mobile
In general, the filter interface on mobile should be moved into a drawer or modal. With that, there are two standard options for surfacing that interface:
- [A single button](#filter-button)
- [A horizontally scrolling filter group list](#horizontal-filter-group-list)
### Filter button
With the main filtering interface inside a drawer or modal, you can include a "filter" button to show it:
### Horizontal filter group list
With the main filtering interface inside a drawer or modal, you can provide quick access to filter groups with a horizontally scrolling list of filter groups, where each group will open the associated filters in a modal. You should also consider having a "filter" button like the previous example as a fallback:
## Use progressive enhancement
In order to build lean, fast themes, you should implement as much as you can without JavaScript. For filters, this means using links, or forms with manual submit buttons, to apply selected filters.
JavaScript can be layered onto the basic implementation to enhance the experience, such as live-updating the product grid.
