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 options, metafields, or metaobjects.

Product option filters are based on your product variants. 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. Metaobjects can show visual filters to help customers quickly understand your filters.

Add a custom filter with metafields or metaobjects

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

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

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.

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: Change the behavior that will be applied between filter values. Learn more about filter behavior.
5. Optional: Select filter values to group together as a single value displayed to customers. Learn more about grouping filter values.
6. 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 existing 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 a filter based on a product option won't change that option's name displayed on the individual product pages.

Filter values

Only filter values that apply to products of a collection or search result are shown to customers on your storefront. A maximum of 100 filter values are shown for each filter. To reduce the total number of filters that might be shown, group similiar filter values together as one filter.

Note

In the Search & Discovery app, a filter displays a maximum of 1,000 filter values. Filter values might not be shown in the app, but still displayed on your storefront to customers.

There are different sorting rules applied to filter values, and you can use metafield filters for more control over sorting and displayed values.

Group 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 displayed in the Values table, so you might not find the values that 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.

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 filters named "Size" so common sizing terms are displayed in the correct order. 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".

Customize empty filter values

To help customers find available products, you can handle empty filter values by either moving them to the bottom of the list or hiding them entirely. This allows customers to focus on values with matching results. For example, suppose you're selling t-shirts in different colors and sizes, and only the "Red" t-shirt is available when a customer chooses the "Large" size. If you move empty values to the bottom, then "Red" will be first in the "Color" filter. If you hide empty values, then only the "Red" option will be displayed.

Steps:

1. In the Shopify Search & Discovery app, go to Settings.
2. In the Filters section, select one of the following options:

• To hide empty filter values, select Hide. A filter is hidden entirely if all filter values are empty.
• To move empty filter values to the bottom of the value list, select Show at the end.
• To keep empty filter values sorted by the default sorting logic, select Show in default order.

1. Click Save.

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.

Visual filters

Filter values can include a small visual to display attributes such as colors and patterns. When the filter is a metaobject, you can use Display options to choose the colors and images to display, or even keep the display as just text.

Requirements for swatch

For filter swatches, you need to complete a list of requirements:

• A metaobject that fulfills the following criteria:
  • At least 1 text field. The text field can be any of the following types: single line text, decimal, integer, or true or false.
  • At least 1 color field or 1 file field with images. Fields that are lists of values aren't supported.
• A metafield on the product or variant that references the metaobject.
• The metaobject and metafield referencing it need to be activated for storefront access.

The metaobject tutorial provides more detail to help you set up metaobjects.

Steps:

1. In the Shopify Search & Discovery app, go to Filters.
2. Click Add filter or click on an existing filter.
3. Select a filter with a metaobject reference.
4. Click Display options.
5. Set the Label field for filter values by selecting a metafield.
   • If Show swatch is checked, then the visual display can be configured by selecting:
     • A color field for the Swatch color.
     • An image field for the Swatch pattern.
   • If Show swatch is unchecked, then only the label will be displayed for filter values.

Tip

Themes will often prioritize displaying a swatch's image over its color. If you have selected fields for both Swatch pattern and Swatch color, then the color is typically only displayed when there isn't an available pattern image for the filter value.

Filter behavior

Only filters that can apply to the products on a collection page or search result are displayed.

Choosing filter values from different filters is an and condition that can decrease the number of products displayed. For example, choosing "Red" from a Color filter and "8" from a Size filter returns products that are both red and size 8.

By default, choosing filter values from the same filter is an or condition that can increase the number of results. For example, choosing "Red" and "Green" values from a Color filter returns all the products that are red or green. Certain filter types can use an and condition for their filter values instead. Learn how to customize filter behavior with the Search & Discovery app.

The number of 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 only one product is displayed. This is because product options are variant-level filters and all the colors belonged to that single product's variants.

Customizing filter behavior

For product tag, metafield list and metaobject reference list filters, you can choose the filter condition between values to be either the default or condition or the and condition. For example, with and filtering, choosing "New" and "Sale" from a product tag filter only returns products that have both those tags.

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. Choose the behavior to apply to the filter values inside the Logic section.
4. Click Save.

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

The product tag filter is only shown to customers shopping in the store's default language. The product 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.

In the Search & Discovery app, a filter can display a maximum of 1,000 filter values. Metafield filters might show fewer than 1,000 values because there is a limit to how many metafields in the store are checked for unique values. Filter values not shown in the app can still be displayed on your storefront to customers, provided the filter is showing fewer than 100 filter 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 vendor and tag filter values. The product tag filter is only displayed to customers shopping in the store's 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.