The user experience on many Shopify stores has been made simpler and more effective through the introduction of the filtering feature, which allows users to quickly narrow down the products that they want to view on a page.

But recently, there have been even more advancements in filtering, allowing for an even more streamlined process. Stay tuned as we talk about Shopify’s latest storefront filtering feature and how it works.

How does filtering in Shopify work?

Traditionally, filtering in Shopify stores has been achieved through the application of special tags that identify a product’s particular attributes like: size, color, price etc. The theme code then detects the tags and applies the necessary logic to filter the products accordingly.

While this tag-based system is a reasonable solution, there’s one major limitation: it can only use data that is provided inside the tags. Furthermore, it requires merchants to manually add the tags to products, which can become a very laborious task when a store contains thousands of products.

Filtering in Online Store 2.0 

With the release of Online Store 2.0 though, Shopify has provided a much better way of adding filtering to collection pages. This new way of filtering is called storefront filtering, and it has replaced the older, tag-based approach as the recommended way to add filtering to your collections. 

In storefront filtering, the following product data points are available: 

• Availability
• Price
• Tags
• Type
• Vendor
• Variant options
• Metafields

Storefront filtering allows merchants to use ‘AND logic’, (which lets the user choose multiple filter values, to show only products that match those values), as well as ‘OR logic’ (which lets the user show products that match any of the selected filter values).

Storefront Filtering on the front end

Let’s take a look at the default Dawn theme to see a working example of storefront filtering. Here’s what it looks like on the front end:

As you can see, in this particular example, we’re utilizing the availability, price and color filters. By using this new system, we avoid having to add additional data. These filters come from the source product data, saving us a lot of time and labor.

Storefront Filtering at code level

Next, let’s take a look at what storefront filtering looks like at code level, by examining how the Dawn theme does it. The relevant file that we’re using below can be found here: /snippets/facets.liquid and looks like this:

 The key data source used here is results.filters. As you can see, the snippet file iterates through this object and simply renders each filter that is contained within:

There is also some related javascript inside the file /assets/facets.js that handles the filter change event, updating the products displayed on the page to the appropriate products matching the filter selection(s):

Note that the FacetFiltersForm.renderPage() function is called with a URL. This is because each time we change a filter, the page URL updates to a unique URL. For example, if you selected a red color your page URL would look something like:
https://www.yourstoreurl.com/collections/shoulder-bags?filter.v.price.gte=&filter.v.price.lte=&filter.v.option.color=Red&sort_by=best-selling
This can be a useful feature if you want to link directly to collections with specific filters already applied when the page loads.

What if I’m not using the Dawn theme?

If you’re not using the Dawn theme as the starting point for your Shopify store, you’ll need to build your own storefront filtering implementation from scratch. In this case you can refer to the Shopify documentation for the full breakdown of how to add the functionality from the bottom up to your own theme. 

Can I add custom criteria to filtering? 

We’ve already seen filtering in action for standard criteria like: availability, price and color. But what if we want to add some extra custom criteria? Shopify provides an app called Shopify Search & Discovery that allows us to add custom metafields to be included in our theme’s filters object. (Meaning that no extra code changes are needed to add your own additional filter, this is all done with configuration alone.)

Let's go through this customization process with an example:

Say we want to add a new filter called material to our collection. The first thing we need to do is add a new metafield, and then add some material values to our products so that there is data for the filter to use:

Next, we’ll need to go to the Shopify Search & Discovery app, which can be found under the navigation page. It also shows you a list of all active filters:

Then, from the Shopify Search & Discovery app we’ll enable our new metafield in the filter settings:

With all of that completed, the new filter should now successfully appear on the collection:

It’s that simple - no code required! Merchants are free to manage their filters with no development knowledge required.

Conclusion

Overall, we think the new filtering system is a huge upgrade that adds power and flexibility to Shopify storefronts. It also helps customers to locate and purchase the products that they’re interested in a lot faster. A total win-win! Check back weekly for more digital marketing tips!