Fine-Tuning Filters on Collections to Perfect User Experience (with Real-Life Examples)

First, we should draw a line between filters on collections and categories. They are basically the same thing, and the only difference is that Shopify merchants use the term "collections", while on BigCommerce the same concept is called "categories".

Customers' path to the desired product has to be smooth and clear, otherwise they most likely won't convert.

Filters are vital navigation tools that enable customers to narrow down the product list on the collection page and find what they are looking for easier and faster. Improved UX, in turn, results in improved customer satisfaction and higher conversion rate. Apart from it, filters help customers get better acquainted with your catalog, encouraging them to make additional purchases and boosting the conversion even further.

Filters significantly change not only the navigation on the collection page but also the way the page looks. To demonstrate the difference we're going to compare two collection pages from a demo store.

The collection without filters is nothing but a product list. Customers have no idea what product options are available (sizes, colors):

Meanwhile, on the collection page with filters, customers can see what sizes and colors each product has, as well as narrow down the product list and refine filters if needed:

Now let's take a look at examples of how Shopify and BigCommerce stores use filters on collections (categories) and what we can learn from them.

Condor is first on our list. Filters on the collection page with women's jackets are intuitive and clear:

Customers can apply multiple filters simultaneously, thus narrowing down the product list. If they want to refine their search, the "clear" button allows them to do so. Note how the buttons and selected options are highlighted in green which makes them stand out more:

Another thing to consider when setting up filters is what product options matter most to your customers. Of course, different stores need different filters, depending on the products they sell. For example, on the collection page of Better Patio you'll find both common filters (price, availability, brand) and specific filters such as length and fuel type:

The next essential aspect is mobile optimization. Make sure your filters perform well on mobile devices: the size and spacing should be big enough to make hitting the right option easy:

Also, pay attention to the results quantifier ("Show 56 products"), which displays how many products will be left after choosing certain filters.

If you have many filters on your category page, there are two ways to improve the user experience: firstly, put the most important filters at the top of the list, and secondly, make the filters collapsible like on Monty's website:

Last but not least, make sure the filters fit the style of your store. For example, if you have a minimalistic design, consider adding fewer filters and playing around with the layout, for example, changing it to horizontal, as Flos did:

There are two ways to add filters on collections on Shopify. Firstly, you can set them up through redirects. In this case, Searchanise will redirect your customers from a collection page to the search results page with the same products.

The second way is to add filters by embedding HTML code into a Shopify's theme template. You'll need to modify the theme code to use the Searchanise collection template instead of the default one.

For more detailed instructions on adding filters, refer to our help portal.

To add filters to BigCommerce category pages, you'll need to edit the code of your theme. Here is how you can do it for stores with Stencil themes. And here are the directions for stores using Blueprint themes.

After you've added product filters, you may want to fine-tune them. We've got a whole section on the help portal with set up instructions: how to adjust filters in your store, hide and rename them, create your own filters, set up color families, and more. There are separate sections for Shopify and BigCommerce stores. We hope the ideas we've described above will help you get inspired and create the best possible filtering experience for your store.

• Filters on collection pages help customers to easier navigate your site, while boosting UX, customer satisfaction, and the conversion rate

• When setting up filters, make sure they are mobile-friendly and intuitive, fit the style of your store, and include specific product characteristics that matter to your customers

• If you have a long list of filters, consider moving the most important to the top, and making them collapsible

With Searchanise's help you can easily add filters to your collection or category pages and improve user experience & conversion rate right away!