How to Optimize Layered Navigation in eCommerce

Home / Magento / How to Optimize Layered Navigation in eCommerce


Main ImageNowadays it’s hard to imagine a successful eCommerce store without advanced onsite navigation. Intuitive menus, smart internal linking,
sophisticated onsite search — all that contributes to better customer shopping experience and, as a result, better conversion rate.

Layered (aka filtered) navigation is also one of the most important site navigation components.


What is Layered/ Filtered Navigation?

Imagine a large number of similar products with little differences in details. Manual browsing through store categories would be far too time-consuming and frustrating, which is unlikely to result in a purchase.

To ease the pain of such a search, customers need a tool to surface the needed item only. And such a tool is layered navigation.

Basically, layered or filtered navigation is usually located next to the main block of content and presented by multiple configurable filters. Defining their values, customer can significantly shorten the time needed to find a certain product.

As any other part of your store navigation, layered/ filtered navigation can be customized to fit into your eCommerce strategy.

In this article, we’ve tried to collect the most useful advice to help you get most out of this navigation tool.


  1. Create a Sufficient Number of Layered Navigation Attributes

Usually, each product in the store is characterized by a combination of parameters that make it unique. When customers are searching for a product, your task is to provide them with a filter that will sort out products with specified characteristics. It may be crucial when you have a lot of similar products.

Say, you sell t-shirts that come in different sizes, colors, styles and prices. In this case, all four attributes should be included into your layered navigation for this product category.It means that actually you’ll need specific filters for each product characteristic.

Providing a full list of features is especially important for large eCommerce stores that have thousands of products.

For instance, here are attributes to filter bags and backpacks in ASOS:


  1. Add Counters for Product Options

The next piece of advise will let you optimize your site layered navigation AND significantly enhance user experience.

You can ease the life of your customers by adding a productcounter next to each options. The counter will display how many products are available for the chosen configuration.

Also, you can automatically disable products with the specified characteristics, if they are currently out-of-stock.

And remember, your layered navigation should be dynamic. Say, when you apply a particular layered navigation filter, the other filtered product options should display the actual quantity, adjusted to the newly specified conditions.

6PM.Com shows a number of available products for each filter almost everywhere:


  1. Allow Multi-Select and Manual Data Input

A multiple selection feature is a must-have addition to any filtered navigation.

It’s totally wrong to leave customers with a limited number of options to choose from or with no choice at all. The sufficient amount of options should be provided wherever possible.

Also, customers should also have the ability to manually configure product characteristics. E.g., each customer can manually set the price range or enter some other product features.

This little, yet very important layered navigation enhancements will let you save valuable space for other filtered navigation elements.

For example, Macy’s allows customers to select multiple elements where possible and fill in extra products characters where needed:



  1. Organize Filters for Better Usability

As said above, you should provide customers with as many layered navigation filters, as possible. However, at the same time, the number of filters should be reasonable and shouldn’t make customers lost in their choice.

A very long layered navigation section harmfully affects usability.

To get rid of this problem and provide a reasonable amount of filters and options you can add scrollbars or buttons to expand each section. This trick allows you to dramatically save space in your filtered navigation block and don’t reduct the list of product options.

Ted Baker is using a very minimalistic but still functional filtered navigation:


Moreover, you can promote some filters by placing them on top of the layered navigation.

It will be even better if you carry a little research to figure out what filters are more popular with your shoppers. Well-organized blocks of filters allow customers to reach the desired products easier.

  1. Use Layered Navigation as SEO Opportunity

Like any other part of your eCommerce store, layered navigation needs some SEO optimization. If this aspect is ignored, there’s a big risk of getting lower rankings for your category pages.

You should decide whether to include or exclude filters from indexation,enable or disable extended meta title and description on category layered navigation pages and add attributes to the filtered navigation title and meta description tag.

In addition, you may use extended meta title and description on category filtered navigation pages.

To simplify the process of optimizing layered navigation, you may use this Magento 2 SEO extension.


  1. Provide Functional Mobile Version

Nowadays, it’s very naive to think that most of the customers come to your store using a computer.

Conversely, more and more shoppers are using mobile devices to make purchases. hence, your store should have a convenient mobile version and all available filters should be optimized to apply them on a mobile device.

It’s not only the question of the overall availability but also the presence of convenient touch-friendly buttons and dropdown menus.



  1. Keep Filters Configuration

Pretty often customers visit your store 2 or 3 times to make a purchase.

Usually, each time when a customer uses layered navigation to find a product, it is necessary to configure the filters from the beginning.

You can save time for your customers if you allow them to save layered navigation preferences or reflect their selection in the link of the page at least.

Such little tweaks significantly improve your customer experience and result in a bigger amount of purchases.



All-in-all, filtered or layered navigation is one of the best practices to improve the onsite navigation.

It allows customers to find products easier, stop waiting time on manual browsing and entering search requests. A good, well-organized block of filters is the key for conversion rate and overall success.

Also, it should be mentioned that many eCommerce platforms include this functionality by default. For example, both Magento versions enables you to provide filters right out of the box. However, even if you are using different platform, the development of a quality filtered navigation should be on top priority for your store.


Author: Vitaly Gonkov is a Chief Marketing Officer at MageWorx.Com. He has been actively involved with online marketing since 2010. Vitaly has a broad range of expertise that spans many different types of eCommerce strategies and techniques. Passionate about blogging, social networking and enjoys the challenges presented by the dynamic industry.

Related Posts

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *