Layered Navigation is the catalog navigation feature of Magento 2 that is based on price, category, color or other product attributes and allows customers to find products faster by filtering the results.
Your main goal is to provide customers with the best shopping conditions to improve their experience on your Magento 2 store. There are a few things that can contribute to that and Magento 2 layered navigation is one of them.
What are the chances customers will continue their purchasing journey if they can't find what they are looking for in your store?
Let's not guess. No one likes that. However, Magento took care of that to help you provide the best on-site experience for your customers.
So, in this article, you will learn how to configure layered navigation in Magento 2, how to display it on the category page, and how to add filterable attributes to layered navigation.
Post Contents [hide]
Layered navigation is already set up on your store by default. It appears on the left side of the product listing on certain categories.
How to Configure Layered Navigation in Magento 2?
The main purpose of Magento 2 layered navigation is to let your customers search for their preferred product by filtering the available options. It allows them to find products with the suitable price, colors, material and other product attributes.
Configure Price Filter in Layered Navigation
Magento 2 general setting provides you with the option to configure layered navigation based on price navigation. In order to configure it, you need to go to Stores > Configuration > Catalog > Catalog > Layered Navigation.
There are 2 fields you have to set in the layered navigation setting which are:
- Display Product Count that defines whether the number of products corresponding to product attributes, price or category will be displayed near the layered navigation options.
- Price Navigation Step Calculation that determines the method used in the price navigation step.
There are 3 different methods of price navigation step calculations in Magento 2. They are:
1. Automatic (equalize price ranges)
According to it, price navigation steps are calculated automatically based on the price range of products in the group.
2. Automatic ( equalize product count)
According to it, price navigation steps are calculated automatically based on the number of products in the group. Once you choose this option, there will appear new fields:
- Display Price Interval as One Price that you need to enable in case all prices in the specific price interval are equal.
- Interval Division Limit or the number of products, that will not be divided into subintervals.
3. Manual
According to this method, customers will have to set prices for layered navigation manually.
The following options will be available for you to configure, once you decide to use the Manual price step calculation:
- Default Price Navigation Step that determines the number of products included in each step.
- Maximum Number of Price Intervals defines the maximum price step available in the Magento 2 layered navigation.
Configure Layered Navigation with Filterable Attributes
Magento doesn't include product attributes in the layered navigation by default. So, in case you want customers to be able to filter products by attributes, you have to configure this manually.
Note: not every product attribute can be included in the layered navigation. The following attributes can be included: dropdown, multiple select
, or price input types.
If there is no product attribute you'd like to include in the layered navigation, create it and assign it to the attribute set.
Follow these steps to add products attributes to Magento 2 layered navigation:
1. Navigate to Stores > Attributes > Products and choose the attribute you want to include in the layered navigation.
Note: you can see that Use in Layered Navigation section has already been already added to the product attribute options.
2. Go to the Storefront Properties section of the Attribute Information.
3. Select Filterable (with results) from the Use in Layered Navigation select box to show the number of the products in the category associated with this attribute. Or select the Filterable (no results) option not to display the number of products.
4. Choose Yes in the Use in Search Results Layered Navigation in order for this attribute to be shown on the search results pages.
5. Don't forget to Save Attribute.
How to display Layered Navigation on Magento 2 Category Page?
In order to add the layered navigation menu to the Magento 2 category page:
- Navigate to Calatog > Categories.
- Select the Category you want layered navigation to be displayed on and enable the Anchor option in the category Display Settings.
Layered navigation menu will be displayed on every Magento 2 category this option is enabled on, which is great for navigation, especially if you have multiple categories on your website.
Besides, you can change the place of the layered navigation on the page by configuring the Magento 2 category design.
To perform this scroll to the Design section of category configurations and change the Layout to one of the available options.
Having multiple attributes added to your layered navigation enables your customers to find products of their interest faster using different parameters. That's why layered navigation helps you to provide an outstanding customer experience on your Magento 2 store and improved engagement.
It not only simplifies your customer navigation through the product catalog but creates a shopping environment they want to come back to.
Do you know how else you can personalize their experience except for providing the layered navigation?
Once customers browse your catalog, they view some products but don't go further than that.
So, it is also a good practice to display products your customers recently viewed or allow them to compare products to increase the chances of them making a purchase.
And you don't even need an extension for that.
Magento provides you with the default recently viewed and compared products feature. Check it out to make your store more attractive to your future customers.
