What is Layered Navigation in Magento 2

The Layered Navigation feature in Magento 2 gives customers a comfortable and efficient way to search the store catalog by providing filters for product category, price range, color, brand or any other available attribute

Above is Layered Navigation view on Magento 2 Luma theme in "Hoodies & Sweatshirts" category page.

Magento native Layered Navigation can be displayed on anchor category and on quick search results pages only.

Attribute Setup

It is important to understand how Layered Navigation works in Magento before making attribute setup as some changes are hard (if possible at all) to do and change later.

Understanding Filter Counting

Layered Navigation is not just some simple block with links which allows you to filter. All these filters are dinamic and depend directly on products in current category.

Each filter option is checked and counted against every product in category and options having no products are not shown (there is Filterable (no results) option to show filter options with no products associated to it).

Filters having no visible options are hidden too.

Consider an example. There is attribute Color with options Red, Blue and Green and in current category there is a single product Red dress. In layered navigation Color filter only option Red will be shown (with Filterable (with results) setting).

If there is no product in category with Color attribute assigned, Color filter will not be shown at all (with Filterable (no results) setting it still be be displayed if Color filter is in product template of any product of that category).

Understanding Attribute Types

Second important thing to understand before attribute setup - what attribute types to use.

You cannot change attribute type after creating attributes!

Not all attribute type can be used in Layered Navigation in Magento, only dropdown, multiple select and price types. Considering you are going to use Layered Navigation extension from MANAdev, we recommend using

• price type for any numeric filters like width or carats, especially for slider filters.
• dropdown type and multiple select type for all other filters. Obviously, use dropdown for all attributes unless more than one option is required to be assigned to a product.

How Many Attributes You Need

At last it is important to decide how many attributes to create.

We do recommend having as little attributes as you possibly need, for example have one Color attribute for all product types, not Apparel color, Furniture color etc. Anyway, in category pages you customer will have only options associated to products, not all options. So for size in apparel customer will get sizes like s, m l, xl and in category like shoes it will get shoe sizes like 37, 38, 49 etc.

Having less attributes firstly is better for store performance and also it looks nicer on Quick search pages (you do not get few colors or sizes in Layered Navigation there).

Anchor and non anchor category pages

Categories in Magento 2 can be anchor and non anchor (set to Is Anchor = Yes in category management or not). For layered navigation, based on attributes, to work in Magento it is mandatory to set category and all its subcategories Is Anchor to Yes.

Above: To make category Anchor in Magento 2 admin panel select Products->Categories menu, select some category and open Display settings tab.

Non Anchor Category - contains only products directly assigned to it. By default only block of categories is displayed and products cannot be filtered with Layered Navigation.

Anchor category - differently from non anchor category it contains products assigned to it and to all subcategories. Also Layered Navigation is shown.

Above is typical non anchor Magento 2 category page example

There are 2 typical store setups:

1. All categories are anchor. In this case all categories can be filtered with layered navigation.
2. First level or two of category tree is non-anchor and deeper categories are anchor. In this setup top categories typically do not show products, and instead they show thumbnails for deeper subcategories, and deeper subcategories show both layered navigation and products.

Either way, when some category is anchor, all its subcategories should be anchor too.

Steps to Show Layered Navigation

1. Create attribute and set it to be used in Layered navigation and in quick search (optional). Let’s say it is Gender and has four options Boys, Girls, Mens, Womens.

   

   ---

2. Assign attribute to product template. Let’s say to Default

   

3. Create product based on this product template and fill. Let it be t-shirt. And set value for attribute Gender to Female.

4. Add product to some category in product management or in category management. Let’s say it is category T-Shirts which has subcategories Polo and Funny
5. Make sure your categories/subcategories are set to anchor=yes in category management.
6. You should see Layered Navigation it in frontend T-Shirt category page now
7. If our extension is installed then you should be able to pick few options of the same filter.