Text or Call 303.473.4400
Select Page

Layered navigation provides a way to filter products on your Magento 2 store by certain attributes. The layered navigation is typically found on category pages, on the left side of the page. Some other names people may use for it are filters or the left sidebar – but in Magento 2 it is most commonly referred to as the Layered Navigation.


Example of layered navigation in the default Magento Luma theme on the front end


Layered navigation is a great tool for customers to narrow down the product listings based on specific attribute parameters within the category page. Customers may want to filter by price, color, or many other attributes using the layered navigation.

In this blog, we will go over how to enable and configure the layered navigation in Magento 2.


Layered Navigation – The Basics

Products Available for Layered Navigation

Any product attributes that are dropdown, multiple select, or price input types can be used in your Layered Navigation. Other input types can’t be used by default and would require custom development.

You can see the product’s input type in your attribute settings by navigating to Stores > Attributes > Product. From here select your attribute from the list to see the attribute properties.


Magento backend menu that leads to the product attributes page

Color Swatches in Layered Navigation

If you are using the attribute “Color” with Magento 2 you can set up visual swatches for your color labels and they can be applied to the Layered Navigation. You will see the input type as “visual swatch”. Here you can see color swatches to show the different colors you can filter by on a category page:


Example of what color swatches look like in Magento 2 layered navigation

A layered navigation value will only display the values or attributes that pertain to that category page and the product collection displayed.


General Layered Navigation Settings

When setting up layered navigation on your Magento 2 store you must first review the Layered Navigation general settings.

To set up your general layered navigation settings, from your Magento 2 backend dashboard navigate to: Stores > Configuration > Catalog section > Catalog > scroll down to the “Layered Navigation” section.

First, you will see the option to set your layered navigation to either show product count or not.

To make this dropdown editable uncheck “use system value”. In this example, the option to show product count is set to “yes”.


The Magento 2 layered navigation settings screen


Setting this option to “yes” means that on the category pages with layered navigation enabled, the attribute results will show a number in parentheses next to the option which represents the number of products that match that label. If you choose to set this option to “no” then this product count will not appear on your Magento 2 store.


Front-end example:


What using system value looks like on the layered navigation


If you will be using “price” as one of the filters in your layered navigation you will set this up at this time from the “Price Navigation Step Calculation” drop-down menu. You can auto-create price increments or set them manually.


Price calculation drop down menu


Setting Layered Navigation Attributes

Next, you will set your attributes – these are the options that you want to show up in the Layered Navigation.

If you do not already have product attributes set up and assigned you will need to do this first. To learn more about setting up product attributes in Magento 2 check out our guide.

Once your attributes are set up, from your backend dashboard you will navigate to: Stores > Attributes > Product


Magento 2 backend menu leading to product attributes


Search for your attribute, by typing into the blank fields – or just look for it in your list, then click on the row of the attribute to “Edit”


Magento 2 Product Attributes Page


Under “Storefront Properties” Select the drop-down next to “Use in Layered Navigation”


Setting layered navigation on your storefronts


This drop-down menu has two options:


Layered navigation options drop down menu


  • Filterable with results – will only show available options – options that have products matching those options on that category page.
  • Filterable no results – will list out all options you have for that attribute, not just the ones that have product matches on that category page.


Filterable (no results): Front End Example

See in this attribute “Style,” it is listing out all options – insulated, jacket, vest, but a lot of them have 0 results – the number next to it in parentheses.


Filterable (no results) front end example


Filterable (results): Front End Example

Only showing the options with results for the attribute associated. You’ll notice many of the options listed in the previous example are no longer displaying in the layered navigation. That is because there are no products associated with that attribute (i.e. ‘Insulated’).

For example if you are filtering by “Style”, the “Sweatshirt” option says (5) next to it – meaning there are 5 products that are the “Sweatshirt” style.


Example of layered navigation menus with filterable results on the front end


When you have made you selection click “Save Attribute”. Once you click save, a pop up will display telling you to clear cache.


Clear the cache popup


To learn more about clearing you cache in Magento 2 check out our guide.

If you also want this attribute to show up on your search results pages as a filter, select “Use in Search Results Layered Navigation” set to “Yes”


Dropdown to set Use in Search Results Layered Navigation


Click “Save Attribute”

You will repeat this set up for each attribute you want to show up in the Layered Navigation


Setting Anchor Categories

To set up layered navigation on a specific category page, you will want to make that category an anchor. When a category is set to an anchor, it allows for the layered navigation to show up.

To set a category as an anchor, from your Magento backend dashboard, navigate to: Products > Categories


Magento backend menu to lead you to products


On the categories page, the left side is your category tree – if you don’t see your category in this top-level view, click on the blue + symbol or the category name to expand that category, and see its subcategories. Keep expanding categories until you have navigated to the category you are setting up Layered Navigation for.


Magento 2 backend category tree


Quick Tip: If you want to quickly expand the category tree to see all categories and subcategories, click “Expand All” at the top of your Category tree.

When you have selected your category, click on “Display Settings” to expand this section.

From here you will toggle “Is Anchor” to “on”. This is what allows your layered navigation menu to appear on that category page on your Magento store’s front end.

When you have made your selection be sure to hit “Save.”

In this example I have made Women’s Hoodies & Sweatshirts an anchor category.


Womens hoodies and sweatshirts anchor category example


Here is what the category page “Hoodies & Sweatshirts” looks like on the store front end before you set it as an anchor category.


Hoodies and sweatshirts on the front end before setting it as an anchor


Here is what it looks like with Layered Navigation set up, and the Hoodies & Sweatshirts after you have set the category to an anchor.


Final product on the front end category page with layered navigation


Closing Thoughts

Layered Navigation can be a great asset to your Magento 2 site. It can improve your customer’s shopping experience by facilitating easy navigation through your site. With only a little bit of set up, you can provide your customers with more capabilities to find what they are looking for by the parameters they need.

Need help configuring layered navigation on your Magento 2 store? Want to create a layered navigation with custom options? Connect with a member of our strategy team today and start reaching your eCommerce goals.

About Leah

Leah is a Project Manager at Customer Paradigm. Leah's passion lies in email marketing, WordPress and building strong client relationships with her clients to ensure success on every project. 


Pin It on Pinterest

Share This