Layered Navigation in Magento 2

When dealing with onsite navigation in order to enhance user experience, the Magento 2 layered navigation feature can be of great help. Basically, providing filters for category, price, brand, or any other available attribute allows customers to browse the store catalog quicker and more efficiently.

There are two ways to add layered navigation functionality in Magento 2.

First, you can add the layered navigation block on the anchor category. Second, it’s possible to add layered navigation on quick search pages.

Note, that attributes configuration should be made at the very beginning because it will be difficult to implement it after the attribute setup.

Set up filter counting

All filters that are used for layered navigation are dynamic and depend on products that are included in a certain category. Options that have no associated products are not displayed. That is because every option of the filter is correlated with the product. Thus, when the filter includes options that are not active at the moment they will be hidden. To cut a long story short: no product – no option, no options – no filter.

Let’s walk through the example. Say, you have 3 storage options for smartphones. Given, you have only a smartphone with a single storage option available. In this case, the other 2 variants won’t be shown under the ‘Storage’ filter.

However, if you have no smartphones on sale in-store, all the ‘Storage’ filters will be hidden.

Attribute types

Note, that you won’t be able to change the type of the attribute after the setup. Moreover, not all attribute types can be used in layered navigation.

For most of the cases it will be enough to use 3 attribute types:

• price
• dropdown
• multiple select

The most convenient is to use the dropdown attribute type for all filters unless you need to assign more than one required option to a product. Alternatively, you can use the multiple select attribute type.

The price attribute type will be used for all numeric filters.

In general, it will be better not to duplicate attributes and have as little of them as possible. For example, you don’t need multiple attributes for color to apply them to different products. The same color attributes can be applied to all the products. At the same time, customers will only see the options that are associated with a certain product. So, that’s totally fine to use the same color attribute for different types of products.

Anchor and non anchor categories.

Non-anchor category can contain only products directly assigned to it. In addition, only the block of categories are displayed and the products included in it cannot be filtered with layered navigation.

Like the non-anchor category, the anchor category contains all the assigned products and all subcategories.

Basically, there are two types of store configuration.

In the first case, all categories are anchors. Thus, categories can be filtered with layered navigation. In the second case, one or two levels of the category tree are non-anchor, but the deeper categories are anchor ones. Usually, top categories don’t display products. They lead to deeper subcategories that display layered navigation and products.

How to configure layered navigation

In the admin panel hit the Stores tab and select the Configuration option. Then, hit the Catalog button from the Catalog section.

You need to modify two options here. Enable the Display Product Count option and switch the Price Navigation Step Calculation to automatic. Don’t forget to hit the Save Config button!

Next, hit the Stores tab and select the Product option under the Attributes section. Then, open one of the existing attributes to edit it.

Choose the Storefront Properties option from the left menu. When done, configure the Use In Layered Navigation setting by selecting the Filterable (with results) or Filterable (no results) option. Next, set the Use In Search Results Layered Navigation option to Yes.

Then, you’ll need to repeat this operation for each of the existing attributes that you want include in layered navigation.

When done, you need to make the category anchor. Hit the Products tab and select the Categories option. Then, select the category from the tree in the left where you want to enable layered navigation. Choose the Display Settings tab and select Yes for the Is Anchor option. Click on the Save Category button to complete.

Now you can test the result in your store. Simply select the category and the layered navigation with filterable attributes should appear

If you plan to use layered navigation in your store, you should tacking care of SEO. There is 3d party solutions that allows organizing Layered Navigation for Magento 2 store.