How to Add a Storefront Filter with Metafield in Shopify

At Unite 2021, Shopify introduced Online Store 2. Along with the long-awaited Sections Everywhere, a shiny new Online Store Editor and improved developer tools (including a GitHub integration), store owners can take advantage of updated storefront filtering capabilities. The new offering includes a better way to add filters to collection and search results pages based on the following product and variant attributes:

  • Availability
  • Price
  • Product type
  • Vendor
  • Variant options
  • Metafields 

This approach presents a significant improvement over the old-style filtering which was using product tags. It allows a lot more flexibility. Any page can now display up to 24 filters (of which a maximum of 20 can be custom filters) and these filters adjust dynamically on the page so if any of the filters is not relevant to the current collection page, it automatically won’t be rendered on the page.

While filtering by product type or vendor can be helpful, the opportunity to create a custom filter in the Admin with metafields unlocks a lot of flexibility for site managers.

You can find more details in the video above on how exactly to create a new metafield-based storefront filter in Shopify. Please note in order for it to work, your store would need to use an Online Store 2.0 compatible theme.