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.

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

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.

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 edit icon, then clicking Add another value, and typing in the desired value.

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

Metafield editor showing sorted Skill level options of 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 like colors and patterns. When the filter is a metaobject, you can use Display type settings to choose the colors and images to display, or even keep the display as text-only.

Prerequisites for swatch

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

  • 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. The color field can be a list.
  • A metaobject reference that links the metaobject to either products or variants.
  • The metaobject and metaobject reference 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. For the Display type, select the type to apply to the filter:
    • For the Text option, set the Label field for filter values by selecting a metafield.
    • For the Swatch option, select a metafield for each of the following:
      • The Label for the display text for filter values.
      • The Swatch field for the colors or image for filter values' visual display.
      • The Swatch override field to be used instead of swatch, when available.

Filter behavior

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

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

  • By default, 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. Optionally, you can customize this behavior to an and statement in the search & discovery app. For example, choosing "Red and green colored products" returns products that are red and green.
  • Choosing filter values from the different filters 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.

Customizing filter behavior

Some filter types allow customization of the statement used between its values. Tags, metafield lists and metaobject reference lists can change from the default or statement to an and statement from the Search & Discovery app. When making this change, validate that the applied theme properly updates the display counts beside each filter value.

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.

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.

Ready to start selling with Shopify?Try it free