Looking for B2B E-Commerce Leads? The E-Commerce Times Offers a 100% Satisfaction Guarantee Request Info

Posted By:  IToris Inc on 05/10/2018 in Ecommerce

Best Practices for Using Layered Navigation for Product Filtering

Best Practices for Using Layered Navigation for Product Filtering

From the total number of daily visitors your site has, only a few will likely to be looking for a product with specific characteristics. But no matter how big or small their number is, you probably would not risk losing them as one of your potential clients. This is one of the reasons why modern e-commerce stores often implement on-site product search and various product filtering systems.

But as mentioned in this research article from 2015, only 16% of modern online stores employ product filters which are reasonably good. Introducing those elements on your site will help customers to conduct a specific search for the products they are looking for and hence make the process of browsing your site as convenient as possible.

The article lists our best practices for implementing product filters on a typical e-commerce site. 

Filter products based on categories

Even though product category filtering seems to be an essential component of successful customer satisfaction, only 58% of e-commerce stores had this option back in 2015.

Why was this the case? Using category filters makes sense for the products that can be assigned to a specific category. In other words, filtering cannot be applied to products you cannot make a category for.

One example of a website successfully using the product category filtering is amazon.com When searching for a laptop, users have an option to filter the results based on brand name, activity type, condition and many other factors:


When implementing new product filters on your site, consider using specific product attributes as an available e-commerce category filter. They will show customers the kind of attributes that are considered to be important on your site. 

Filter products based on product theme

The possibility of choosing a product based on the particular theme is one of the central requirements your customer might have. If the customer is unable to find an uncategorized product, he or she might think that the requested product is simply not available. This will likely to give a client more than enough reasons to go to your competitor by simply typing the respective web address.

Filter products based on multiple categories

One additional point you should take into account is that the users should also have an option to select multiple product filters. 

Filters which are limited to a single option are likely to have a negative effect on the website’s usability and customer satisfaction.

A good example of an e-commerce site which gives its users a possibility of filtering based on multiple criteria is the online store of the Bayern Munich football club. They can filter the results based on the different product sizes, from 140 to 176:

Display your filters both vertically and horizontally

To avoid any user errors and misunderstandings, as well as to remind visitors about the filters they’ve just applied, it will also be helpful to display your product filtering options, both vertically on the left side of the screen and horizontally, right above the actual search results.  

When working on vertical and horizontal product filters, make sure that they:

  1. Display the applied filters; 
  2. Highlight the options that have been selected;
  3. Can be removed at any time;

Hide filters that have 10 or more options

To make sure your website has the best possible usability; it is a good idea to truncate those filters that have at least 10 options. This strategy will help customers get a complete overview of the most important options without switching attention to some less important information.

Things to remember while truncating filter options:

  1. Do not truncate popular product filters options. When deciding on the options to hide, go for the ones which are less popular among your typical consumers.
  2. Make sure the “See more results” link is clearly differentiable and easy to use. This may include using your website’s style, + and - symbols, arrows or special phrases like “Show/View more”.    

The example below demonstrates a truncated filter used by the Snapdeal online store:

Avoid using filters for products you might not have in store

In the situation when your customers use too many filters to narrow down the search results, they may not see any products at all. This will likely leave your clients disappointed and forced to go to competing websites. The kind of situation you really don’t want them to experience.

To avoid such results you might organize your filters in a way as to display the number of items you currently have. That way, the customers will only be able to select the products that are currently in stock.

Use heat maps and web analytical tools to see how filtering impacts the UX 

Apart from putting an effort into optimizing the product filtering on your site, you should spend some time analyzing how they are being used by the real customers.

To get the first impression of how well your site is performing in terms of numbers, take advantage of Google Analytics. Similarly, to evaluate how good your site’s usability is, consider using heatmap tools which are currently present on the Internet:  Crazy Egg, Lucky Orange or Click Tale.

Finally, get your real customers’ feedback on how happy they are with using your store by asking for their opinion and conducting on-site surveys. Segregate the results based on whether the customer has made a purchase or not and find out their opinion on the product filters that are currently present on your site.

Constantly monitoring your customers’ on-site behavior will give you information about the elements that are already bringing conversions to your site as well as the things you should still be working on.

Introduce additional product filtering options

Our last tip is about extending the functionality of the default filters in Magento 2.  If your customers are looking for a very specific product, make their searching process easier with the help of Magento 2 Layered Navigation extension.

If your customers have high price sensitivity, present them with a Price Slider so that they can select the price range they are most comfortable with. If the product color is one of the most important factors in their purchasing decision process, think about adding image swatches so that they will be able to see the base product image according to the chosen color. Last but not least, consider implementing filters with multiple attribute values so that the client can use multiple criteria at the same time.


Having product filters on your site will not only improve the customer experience but also play a positive role in the number of regular conversions your business will get.

Below we summarize 8 tips of using product filters on your site:

  1. Filter products based on categories;
  2. Filter the products based on product theme;
  3. Filter the products based on multiple categories;
  4. Display your filters both vertically and horizontally;
  5. Hide filters that have 10 or more options;
  6. Avoid using filters for products you might not have in store;
  7. Use heat maps and web analytical tools to see how filtering impacts the UX;
  8. Introduce additional product filtering options;

The very last thing you need to remember is to conduct regular A/B tests to get a clear idea about the type of filters that bring the best shopping experience to your customers.

Posted By: 

IToris Inc

View Profile

Member since 12/04/2017

Contact IToris Inc

Search Blog Articles

Get the ALL EC Newsletter