How to Create Shopify Collection Page Filters
For ecommerce stores with around 15+ products, you’ll definitely want to make use of filters on the collection page. Filters help customers sift through products to narrow down what they’re looking for and find the right product for them.
On all Shopify theme collection pages, you’ll find the option to add two features: Filter by and Sort by. Using “filter by” will display a different set of products depending on the filters applied, while “sort by” (shown below) will show all the products but in a different order.
This article concerns itself with “filter by”. Collection page filters can look different on every theme. On Dawn (Shopify’s free theme) the filters look quite basic, shown below:
While many premium themes offer a layout option to show filters on a sidebar, or as something that pops out from the side of the page, much like a pop-out cart. This is ideal when filtering is extensive. And this is a feature we look for when choosing which Shopify theme to use for a particular project. See how the Palo Alto theme displays filters below:
In order to create these filters, you'll need to install a free Shopify app: Shopify Search & Discovery. This is a must-have app for any store as it has a ton of features that help customers discover the right products for them. More on that here.
Within the Search and Discovery app, go to Filters. Here is where you can set up filters based on product...
- Type
- Tags
- Category
- Vendor/Brand
- Variant Options (most commonly color)
- Product Metafields
- Variant Metafields
- Availability
- Price
Being able to create filters with product metafields creates limitless options for categorizing products. We recently worked on a store with 1000 products so product filtering was crucial. We made good use of filtering with metafields to create different ways to filter. However, it did take quite a bit of work to populate these values for each of the products as well. The filters only work if the product details are correct of course.
When setting up product metafields for filtering options, I always create the definition so that it’s set to “List of values” and “Limit to preset choices”. I choose “List of values” because I want the client to have the flexibility to put products into multiple categories. I choose “Limit to preset choices” because I do not want spelling errors or lack of consistency to cause the filter to look disorganized. I explain to the client how to add more options if they need to.
One thing I like is that the filter options are dynamic so that filter options will change depending on the collection page you’re on. If no products contain a certain filter description, then that filter option won’t show because it’s not relevant. This makes it easy to create filters that work across all collections. So if you’ve created the filters and are not seeing all the options displayed, it’s because you haven’t created these product options in your store, or they aren’t part of the collection you’re looking at.
When you add the filters you want, the app will ask you what type of logic you want to use:
- OR condition (Includes products that match at least one buyer selection)
- AND condition (Includes products that match all buyer selections)
I recommend choosing OR so that customers can see all of the options that suit their interests, rather than excluding products with the aim to narrow it down to just one.
Let’s take a look at the filters on Three Ships website to see which filters they’ve set up:
My guess would be that they have it set up with the following filter types:
- Availability (Standard)
- Price (Standard)
- Benefit (Metafield)
- Skin Type (Metafield)
- Skin Concern (Metafield)
- Product Type (Standard)
When you see the above “Benefit” for example, you can understand that some products would have more than one benefit, which is why I’ve said above that the product metafields should be set up using “List of values” rather than a single value.
Shopify Filtering by Available Size
What if you want to create more complex filters? I recently worked with one client, the owner of a clothing brand, who had bi-weekly drops. During these drops, products sold out pretty quickly, so their customers asked for a way to shop by available sizes. This isn’t possible with the Search and Discovery app. Sure, you could add a Size filter based on the variant names, but it’s not going to work the way you think — it will filter for products with that variant, not for products with that variant in stock.
The solution was to use an advanced filtering app. In this case, we used the Boost AI Search & Filter app. With this filtering app, we created “Shop by Size” and “Shop by Style” filters for the collection page so that customers would find it easy to filter through the available products offered. I’m sure the app can do so much more as well.
I hope that has answered some of your questions on product filtering! If you have further questions, DM us on Instagram.
Hana Drdla
