Storefront filtering UX guidelines

There are two filter types:

• List
• Price range

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:

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:

There are two standard layouts for filtering on larger screens:

• A horizontal toolbar above the product list
• A vertical sidebar 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.

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:

A vertical sidebar to the left of the product list works best for stores with more than five filters.

For example:

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:

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:

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:

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:

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:

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
• A horizontally scrolling filter group list

With the main filtering interface inside a drawer or modal, you can include a "filter" button to show it:

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:

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.