Adding filters

You can create filters for your online store that let customers refine which products appear on collection pages and in search results. For example, a store that sells watches could create filters for brand name, price, dial size, and water resistance.

Requirements

Filters are available for any Online Store 2.0 theme, and custom storefronts that use either the filter Liquid API or Storefront API for their online store. Learn how to display filters in your Online Store 2.0 theme.

If your theme doesn't support filters, then you can still create filters from the Shopify Search & Discovery app, but they won't be displayed to customers.

You can determine if your store's theme supports filtering by going to Online Store > Navigation in your Shopify admin. If your theme doesn't support filtering, then a message is displayed in the Collection and search filters section.

Filter types

You can select up to 25 filters for your store. All stores can display the same standard filters and merchants can create custom filters unique to their product catalog.

Standard filters

Filters for product availability, price, vendor, product type, and tags, are available to all stores.

Note

The price filter is only displayed for customers shopping your store in the same currency as your store's primary currency.

Custom filters

Custom filters can be created using your product variant options, or with metafields. For example, if you sell clothing with different variants for size, then you can add a product option "Size" filter.

Metafield filters are useful for creating filters unique to your product catalog. For example, if you sell children's toys, then you can create a custom "Age" product metafield filter. Learn more about adding custom filters with metafields.

Edit filters

You can edit the filters used in your online store from the app.

Steps:

1. In the Shopify Search & Discovery app, go to Filters and then click Add filter.
2. Select a filter source that you want to make available to your customers.
3. Optional: Rename the filter Label that will be shown to customers. Learn more about renaming filters.
4. Optional: Select filter values to group together as a single value shown to customers. Learn more about grouping filter values.
5. Click Save.

Filters can also be reordered from the Filters screen. Click and drag individual filters into the order that you want them to display to customers.

Rename filters

You can change the customer-facing label of any exisiting filter in your store. Click on a filter from the Filters screen and change the filter Label field.

Changing the filter label won't change information about the filter's source. For example, renaming the label of filter based on a product option won't change that option's name displayed on the individual product pages.

Grouping filter values

You can group multiple filter values shown as a single filter value to customers. For example, a product option of "Color" might have values "onyx", "ebony", and "midnight" that can be displayed to customers simply as "Black".

Steps:

1. In the Shopify Search & Discovery app, go to Filters and then click Add filter or click on an existing filter setting in the table.
2. Select a filter source that you want to make available to your customers.
3. In the Values table, select the values that you want to group as a single filter value. You can use the search bar or click Show more to find filter values.
4. Click Create group.
5. Enter a name for the group. This is the single filter value displayed to customers.
6. Click Done.
7. Click Save to change the filter setting.

There are a maximum number of filter values shown in Values table, so you might not find the values you're looking for. You can add more filter values by clicking the icon, then clicking Add another value, and typing in the desired value.

Note

A filter group has a maximum 50 unique filter values, and a store has a maximum of 1,000 filter groups.

Add a custom filter with metafields

Using metafields, you can create custom filters for the following value types:

• Single line text
• Single line text (List)
• Decimal
• Integer
• True or false

The metafields must have a metafield definition to be used as a filter. Learn how to add a metafield definition.

After your metafields are set up, you can select them as options when editing your filters.

Tip

The Bulk Editor is a helpful tool to quickly update metafields and other attributes across all your products.

Filter behavior

Filters that don't apply to any products on a collection page or search result aren't shown to customers.

Products are filtered from a collection or search results page in the following way:

• Choosing filter values from the same filter is an or statement that can increase the number of results. For example, choosing "Red or green colored products" from a Color filter returns both red products and green products.
• Choosing filter values from the different fitlers is an and statement that can decrease the number of results. For example, choosing "Red and size 8" from Color and Size filters returns products that are red and size 8.

The number of filtered products displayed on screen also depends on whether the filters are product-level or variant-level filters. For example, a customer might choose multiple Color values from a product option filter, but see just one product on screen because all the colors belong to that one product's variants.

Filter values

Only filter values that apply to products of a collection or search result are shown to customers. There are different sorting orders applied to filter values, and you can use metafield filters for more control over sorting and displayed values.

Sorting filter values

Filter values are displayed in ascending order by default, both alphabetically and numerically. For example, a product option filter of "Shoes sizes" will display values smallest to largest.

Filter values that start with a number and end with a word, such as "60 watts", will be displayed next to filter values that end with the same word. For example, a product option filter of "Ages" with the filter values "2 years", "6 months", "3 years" and "2 months" will be sorted to:

• 2 months
• 6 months
• 2 years
• 3 years

Custom sort orders are applied for filter values in product options named "Size". This creates the correct sort order for common sizing terms. For example, "XS" (extra small) comes before "S" (small).

Customizing sort order

To set your own custom sort order for filter values, create a Single line text metafield with preset choices. The choice order in the admin will be the filter value sort order on storefront.

In the example below, the values of a "Skill level" metafield can be manually sorted to "Novice", "Intermediate", and "Professional".

Excluding filter values

If you need more control over the values shown to customers, then use a metafield filter with only values you want shown to customers on storefront.

For example, stores might use product tags for other purposes than storefront filters, like automated collections conditions or admin product list filtering. A metafield type of single line text, or list type can be used instead of the product tag filter type. Use the Bulk Editor to quickly update information across all your products.

Filter translations

Filter labels, values, and groups can be translated into your store's other supported languages. You can translate content with translations apps like Shopify's Translate & Adapt app.

When there isn't translated content for filters, the store's default language is used.

Note

Product type and tag filters are only shown to customers shopping in the store's default language. Vendor filter values are always based on the store's default language.

Filter values are based on the translated content for your products and product variants.

It's possible to have a different number of values for a filter between languages. For example, a store in English has the value "Brown" for a Color filter. A translation app could provide 2 different translations for "Brown" across the store's products, naming some as "Brun" and others as "Marron". Customers viewing the store in French will have both "Brun" and "Marron" displayed in the filter, and customers shopping in English will only have "Brown" displayed. To keep only one translation for each filter value, you need to edit the product's translated content with a translation app.

Market languages

Filter value translations don't support additional instances of a language setup for specific markets. For example, an online store can have product translations for French and two additional French translations for the Canada and France markets. In this case, all the filter values are based on the general French language, even when customers are shopping in French for those specific markets.

Filter labels and filter groups support language translations for specific markets.

Limitations

Collections that contain over 5,000 products don't display filters. A workaround for collections with more than 5,000 products, is to present a large collection as a group of smaller automated collections and link to them in drop-down navigation menus. For example, instead of just one link to a large "Women" fashion collection, have your store give navigation links to smaller sub-collections of "Tops", "Jeans", and "Boots".

A search that produces more than 100,000 results doesn't display filters.

A filter can display a maximum of 100 filter values on your storefront. If your store has more than 100 possible values, then some values won't be displayed to customers. You can reduce the number of possible filter values by grouping similar values.

A filter group has a maximum 50 unique filter values, and a store can have a maximum of 1,000 filter groups across all selected filter settings.

Translations aren't supported for product type, vendor, and tag filter values. Product type and tag filters aren't displayed to customers shopping in the store's non-default language. Vendor filter values are always based on the store's default language.

Filter value translations are based on the languages published for your online store, and won't display translations for markets setup with Shopify Markets.

The price filter isn't displayed for currencies other than the shop's default currency.