Your guide to Magento 2 layered navigation

January 17, 2017 by Leah Na'aman

Running an eCommerce store requires a lot of intricate formatting to achieve features that customers take for granted but expect. One of those features is the ability to filter product choices by certain factors. This is also known as ‘layered navigation’ and the Magento 2 layered navigation system has the power to seriously boost your online store.

This offers your customers a rounded shopping experience and improves usability, as well as the overall customer experience. Retailers should always make it easy for customers to buy and layered navigation helps you do that.

Wondering how to set this up on your Magento 2 store? Keep reading…

What Is Layered Navigation?

When shopping, many customers have particular requirements or a certain idea in mind. If shopping for clothes, for example, the obvious difference would be Men’s or Women’s clothing, and from there, Shirts, Skirts, Trousers, etc.

Within those categories, they may have attribute preferences, like colour or style. They may also have a particular price range and each person will, of course, have their size requirements.

‘Layered navigation’ is a form of catalog navigation that allows customers to find the products they want based on categories or attributes. Once they click into a category, they will be directed to a page containing all products within that category (eg: Dresses). From there, they can filter the results to find something that suits their personal needs or preferences (red, bodycon, Size 10).

These filters or ‘attributes’ are typically accessed in the sidebar. Here, customers can select the available filter options that have been programmed to correspond to the relevant products.

Detailed attribute navigation probably isn’t necessary if you have a small number of products on your site. In this case, category filtering is more than adequate. However, for bigger online stores, it’s a necessity. Customers aren’t likely to stick around to find the perfect choice when they have to manually view hundreds of products.

This makes an efficient layered navigation system essential if you want to maximize conversion chances.

How to Configure Your Magento 2 Layered Navigation System

Set Attribute Properties

  • Select Stores in the Admin sidebar, and under Attributes, click on Product.
  • Find the attribute you need on the list and open it in Edit mode.
  • In the left-hand panel, select Storefront Properties. Navigate to the Use In Layered Navigation drop-down menu and choose one of the following:
    • Filterable (with results): Includes filters that have matching products. Attribute values that apply to all products in the category will not appear as a filter option. Attribute values with no product matches at that time are excluded from the list of available filters.
    • Filterable (no results): Includes filters for all available attribute values, including attributes with no product matches.
  • In the Use In Search Results Layered Navigation section, set the choice to Yes.
  • Repeat the above steps for each individual attribute you want to include in your layered navigation customization.

Set Category as an Anchor

  • Back in the Admin sidebar, click Products and in the Inventory section, select Categories.
  • From the left-hand section, select the category in which you want to apply your layered navigation settings.
  • Click Display Settings and set Anchor to Yes.
  • Hit Save.

Once you have completed the above steps, visit your store and select your edited category from the main menu. If your selection of filterable attributes is visible on your category page, you have completed the steps successfully.

Advanced Layered Navigation: Price Navigation

Allowing your customers to filter products through pre-set price ranges is another layered navigation option. There are three ways to do this:

  • Automatic (Equalize Price Ranges)
  • Automatic (Equalize Product Counts)
  • Manual (allows you to specify a division limit for price intervals)

Here’s how to apply these filters to your product categories:

  • Select Stores in the Admin sidebar, navigate to Settings and select Configuration.
  • In the left-hand panel, select the Catolog option under Catalog
  • Open Layered Navigation and beside the Display Product Count section, untick the Use System Value
  • Now you’ll need to set the Price Navigation Steps Calculation section to one of the following options:
    • Automatic (Equalize Price Ranges): Standard algorithm calculates price navigation steps automatically. No action needed as this is the default option. Leave the Use System Value box checked.
    • Automatic (Equalize Product Counts): Once selected, two new drop-down boxes will appear.
      • If you have multiple products with the same price and you want to display this single price, set Display Price Interval as One Price to Yes.
      • Next, enter the threshold amount for the number of products within a specific price range into the Interval Division Limit
      • Clear all Use System Value checkboxes in this section if changing the default setting.
    • Manual: Uncheck the Use System Value box and select Manual. Enter your chosen value in the Default Price Navigation Step section and do the same again in the Maximum Number of Price Intervals (max 100).
  • Once done, click Save Config.

For more information on Price Navigation, view Magento’s docs on the subject.

Available Extensions for Advanced Layered Navigation

While Magento 2’s out-of-the-box features are a huge improvement on the Magento 1 platform, there are still a few features that could use a boost. One extension that’s enjoyed success in the Magento community is Amasty’s Improved Layered Navigation extension for Magento 2. It’s an impressive addition that offers a lot of benefits, such as:

  • Improved usability for customers with multiple filters, as well as useful price sliders and widgets.
  • Generating SEO-friendly URLs.
  • Custom brand pages.
  • Built-in Shop by Brand filters.
  • Improved product filtering speeds (which we obviously love here at Shoppimon).
  • Images and labels for improved visual browsing.
  • In Stock filters.

Of course, you don’t need an extension to provide your online store with an effective filtering system. The Magento 2 layered navigation features you get out of the box still give you quite a bit of scope. Furthermore, it allows you to build your store in a way that improves the customer experience with greater ease than with Magento 1.

So there you have it. For more tips, guides and insights on eCommerce and Magento, keep up to date with the blog and follow us on Twitter.



You may Also Like