Appearance

Create product filters using metafields ​

This guide describes how to create product filters by using custom product metafields.

Note

For more information about creating filters, refer to Shopify help: Adding filters with Shopify Search & Discovery.

On Collection pages, Shopify supports Product option filters that allow store visitors to display a range of products by using filtering criteria, like availability and price. Product option filters use the values you specify for each corresponding product option in your Shopify admin. For example, a "Color" product option filter might have values like "Red" and "Blue".

You can also define custom product metafields to specify options to use with product filters.

Important

As an example, this guide describes creating an "Origin" Product metafield filter that allows store visitors to display a range of products from a specific (country of) origin. Creating the "Origin" filter involves:

  • Defining a custom "Origin" product metafield.
  • Adding values to the "Origin" metafield.
  • Installing the Shopify Search & Discovery app.
  • Using the "Origin" metafield to display "Origin" as a product filter option on the Default collection page.

To create different types of product filters using metafields, adapt the steps in this guide to suit your requirements. For more information about different types of product filters that support product metafields, refer to Shopify help: Filter types.

Define your custom product metafield ​

To define your custom product metafield, complete the following steps.

  1. On your store's Shopify admin page, select Settings > Metafields and metaobjects.

  2. Select Products, and then choose Add definition.

    The Product Metafields and metaobjects option in the Shopify admin settings menu.

  3. On the Add product metafield definition page, in the Name text box, enter a name for your custom metafield. For example, enter Origin.

  4. Use the Type drop-down to select a content type appropriate for the data you want to use with your custom metafield. For example, select Single line text.

  5. Optional: Select Add description, and then, in the Description text box, enter a description for your custom metafield. For example, enter Country of origin.

    The Add product metafield definition page in Shopify admin.

  6. Optional: Specify metafield category assignment and validation options as required.

  7. Select Save to save your custom product metafield definition.

Add values to your custom product metafield ​

To add values to your custom product metafield, complete the following steps.

  1. On your store's Shopify admin page, select Products.

  2. Select a product to open in Product editor.

  3. In Product editor, locate the Metafields pane.

  4. Select the text box beside the name of your custom product metafield, and then enter a value. For example, enter Australia.

    A value added to a custom product metafield in Product editor.

  5. Optional: Repeat the previous steps to add a value to your custom product metafield for other products.

  6. Select Save to save the value(s) you added to your custom product metafield.

Install the Shopify Search & Discovery app ​

If you don't have the Shopify Search & Discovery app installed for your store, complete the following steps to install the app.

  1. While you're logged-in to your store's Shopify admin, in your browser, access the Shopify Search & Discovery app page on Shopify's App Store at https://apps.shopify.com/search-and-discovery, select Install, and then accept the installation terms when prompted.

    The Shopify Search and Discovery app page on Shopify's App Store.

  2. On your store's Shopify admin page, select Apps > Search & Discovery > Customize filters.

  3. Select Add filter, choose Select source, and then select the custom product metafield you created previously. For example, select custom.origin.

  4. On the Add filter page, in the Filter label text box, enter a display name for your custom filter option.

    Note

    The text you enter in the Filter label text box is displayed as a label for the filter option on your store's collection page.

  5. On the Add filter page, locate the Values pane, and then toggle on (enable) the checkbox(es) for the value(s) you want to display as product filter options. For example, toggle on the Australia checkbox.

    The Add filter for the page Shopify Search and Discovery app in Shopify admin.

  6. Select Save to save the changes you made to the Shopify Search and Discovery app's filter options.

Use your custom metafield to display a product filter option ​

To use your custom metafield to display a product filter option on a Collection page, complete the following steps.

  1. On your store's Shopify admin page, locate your required theme in Online store > Themes, and then select Customize to open Theme editor.

  2. In Theme editor, use the drop-down at the top of the page to select a collection page that contains the section where you want to display your custom product metafield. For example, select Collections > Default collection.

  3. Optional: In Theme editor's sidebar, select Change, and then choose a collection of products with specified values for your custom product metafield.

  4. Confirm that the Filter options include the values from your custom metafield.

    For example, the following image shows a store's Default collection page with the custom Origin product filter option.

    A Default collection page with the custom Origin product filter option in Theme editor.

  5. Optional: In Theme editor's sidebar, adjust the section's Sorting and filtering settings to suit your requirements.

  6. Select Save to save the changes you made to the section's settings.