Use Shopify Product Metafield Data for Filters in Theme
In a recent Shopify project, I set up custom Product Metafields to store additional product information, and then exposed them in the theme so that customers could filter results by those metafield values.
It wasn’t as straight-forward as I expected, so I’m writting up this tutorial to show the steps to achieve this.
Set Up Product Metafields
Create your Product Metafield in whatever configuration you need to store your data. Then, check off the “Use as a filter” option at the bottom of the Metafield definition form:
Once you have your Metafield set up, go into your products and update them to add values into this field.
The Shopify Product Bulk Update feature is really handy for this, just remember to expose the metafield by clicking the “Columns” button at the top right so you can see the field!
Install Search & Discovery App
If you don’t already have it installed in your shop, install the free Shopify Search & Discovery App. Then open the App and click on Filters:
Click “Add filter” at the top to open the form to create a new filter, then click “Select source”, which will open up a new modal:
Each row in this modal is a piece of structured data in your store that can be used for filtering. Find your Metafield in this list and select it.
For this example, I am using the “Country of Origin” field, which is a single-line text field with a pre-defined list of 3 options to choose from. Once you select the Metafield you want to use, the form will update showing the existing values of that field:
Once you click Save, this new filter will be displayed in your list of filters:
That’s it, You Now Have a Metafield Filter!
After saving your filter, when you go to your website and view a collection whose products have values in this new Metafield, you’ll now see a new filter in the filters area:
The above screenshot is using the Horizon theme without any customization.
And here’s a screenshot of the same data displayed in the Dawn theme without any customizations.