Shopping cart

How to Configure Layered Navigation with Filterable Attributes in Magento 2

Configure Layered Navigation with Filterable Attributes

Configure Layered Navigation Magento 2 from Magento 2 default is designed as a convenient sitemap on your Magento 2 store. The Layered Navigation is usually placed on the left of the category page with list of categories and price range. Thus, instead of going around your store, the customers only need to describe their demands through the criterias filter, and they will get the desired items very quickly. However, if you want to give more criterias for the searching as well as enhance customer’s experience on your site, you can refer to Magento 2 Layered Navigation extension, an advanced filter from Mageplaza.


With the default Layered Navigation, the customers can filter by product attributes or price, meanwhile the configuration of product count is mentioned in this topic.

What is Layered Navigation with Filterable Attributes?

Layered Navigation with Filterable Attributes allows your customers to filter product by category or by attribute. For example, when a visitor goes shopping on your clothes store, the first step can be selecting a category he needs such as women, men, or sandals. At this time, all products classified into these groups will appear on the result page. Next, he can filter product attributes to narrow the suggestions by styles, colors, price range and so on. These attributes are called filterable attributes and they are hidden in each criteria section.


Keep your eyes on the following guides to configure the layered navigation with filterable attributes

Configure Layered Navigation with Filterable Attributes

Step 1: Create the Attribute Properties

  • On the Admin Panel, Stores > Attributes > Product
  • Under Attributes column, enter the attribure name in the search box or find it manually, and then go to the Edit mode.


  • On the left panel, select Storefront Properties and set Filterable (with results) or Filterable (no result) for Use in Layered Navigation.
  • Enable to search results in layered navigation by choosing Yes in the Use in Search Results Layered Navigation field.
  • Repeat the above steps if you want to include any other attributes in layered navigation.


Step 2: Make the Category an Anchor

  • On the Admin Panel, Products > Inventory > Categories.
  • From the categories tree, choose the category as you need to apply layered navigation.
  • Tap the Display Settings tab, choose Yes in theIs Anchor field.
  • Save Category to complete.


Step 3: Test the results

Just go to your store and hover over the category in the top navigation. Immediately, the selection of filterable attributes is displayed in the layered navigation section of the category page.

Ref: Magento 2 User Guide

Recommend solutions:

Better solutions for your Layered Navigation

If you are still confused with the effectiveness of the above manual configuration, please consider about equipping your store with Mageplaza Layered Navigation extension. Let’s see what this module is able to help you out.

Mageplaza Layered Navigation - A brief description

Magento 2 Layered Navigation by Mageplaza is a must-have extension which plays a role as a filter engine working on your site to aid shoppers in searching for their wanted products.

This extension is especially necessary for e-stores which feature and sell a large number of products which contain various attributes or come from different brand names. Since an digital store offers a great diversity of product choices, online buyers may be overwhelmed; in addition to this, the real struggle to find appropriate stuff cause a customer to leave your site with an empty shopping cart. Hence, having Mageplaza Layered Navigation extension for Magento 2 gives customers no excuses but to check out with a cart full of their favourable products.

Do you really need a better Layered Navigation?

If you’ve just started your online store and have sold not many items, it may not be urgent to equip Mageplaza Layered Navigation extension at the moment. However, when it exceeds to over 5 varieties of each product and the number of products being sold on your Magento 2 store is not under 5, you should consider to have a better filter system. Let’s look at an example below:

Better solutions for your Layered Navigation

Priceline is a well-known online store which sells a wide variety of products. The number of items they sell on their website may reach to thousands and without an efficient layered navigation, their customers could no way find what they want to look for.

If you find either your current store or your future one in Priceline, it’s high time to install Mageplaza Layered Navigation.

What solutions Mageplaza Layered Navigation offer?

Better searching with multi-filters

While in default Magento 2, only single filtering is allowed which means customers have to select different product attributes multiple times until they find what they want. Having this happen again and again causes frustration for customers while time is wasted, yet the results may end up with less precision.

Mageplaza Layered Navigation allows shoppers to filter as many product attributes as they want and all these chosen filters are enabled to help customers find the best results for their wanted products. Let’s look at the screen gif below:

Better solutions for your Layered Navigation

Flexible price selections with price slider

Customers can be very price conscious. Restricting their shopping budget may be the first thing when they come visit your e-store, so just equip a price slider and let your shoppers play with it. Customers can pull the slider up and down to adjust the price to perfectly fit their budget. See the gif below:

Better solutions for your Layered Navigation

More precise searching results with extra filters

Mageplaza Layered Navigation allows shoppers to filter products which are New, In-stock, On-sale or filter by Product ratings and filter by Product status. This feature helps customers remove unsuitable products from the result product page in order to save more shopping time.

Better solutions for your Layered Navigation

Shop by brands more easily

To many, some certain brand names are always on their Wishlist. To help customers save time surfing around to find their favorite brands, Mageplaza Layered Navigation allows them to pick one or some names and all filtered products will only come from these selected brands. This special feature goes with Layered Navigation Ultimate version.

Better solutions for your Layered Navigation

Save shopping time with quick lookup

It’s really common when a product comes with so many attributes. Take colors or styles as examples, in these cases, you should allow your customers to quickly manually type in a product attribute in the quick lookup box. Mageplaza Layered Navigation not only enables this feature but also auto-suggests the attribute after one or two characters are entered. Watch the gif below:

Better solutions for your Layered Navigation

Boost your CX with Ajax loading and Infinite scrolling

Ajax loading seems to be a must-have feature. This loading method enhances UX for your site yet cuts down site loading time. While customers don’t have to wait long for all filtered products to be shown, the visual effect it brings is really fascinating.

Provide SEO-friendly URLs and prevent duplicate content

Mageplaza Layered Navigation for Magento 2 displays SEO-friendly URLs which are not only healthier in search engines but also human-readable. For example, the following link is for a product which is filtered by its style being “jacket” and “windbreaker” and its color being red or yellow:

Better solutions for your Layered Navigation

Extra features which help enhance shopping experience

Scrolling to top after each filter

After each filter is applied, the current page will be automatically scrolled to top so customer do not have to do it manually.

Product count

The number of products available for each filter will be noticed by a number displayed in parentheses.

All-product page

All products which are filtered will be featured on one page only so customers do not have to jump from page to page to see all available items. The infinite scrolling feature will automatically load more products when the shopper goes to the end of page.

Apply-filter option

The Apply filter button can be enabled so customers can click on to search all possible products after multiple filter selections.

Full feature list

All features of 3 versions of Mageplaza Layered Navigation are presented below:

Better solutions for your Layered Navigation

How to install Mageplaza Layered Navigation

To install Mageplaza Layered Navigation, please follow our standard installation guide. According to this instruction, there are three possible ways to get your module installed on your site and if you have any problems in installation, please contact Mageplaza support to get the service as soon as possible.

How to configure Mageplaza Layered Navigation

To configure every single feature of Mageplaza Layered Navigation extension, you can check out our User guide here. To help you have a close-up on some outstanding features’ configuration beforehand, it’s provided below some notes of Mageplaza Layered Navigation user guide

Turn on the module

To access the configuration panel of Mageplaza Layered Navigation in all three versions, from your admin panel, go Stores > Settings > Configuration, right on the left sidebar, find Mageplaza > Layered Navigation. In General configuration > Module Enable, select Yes to start the module.

Better solutions for your Layered Navigation

Ultimately, Mageplaza Layered navigation extension is integrated with these following themes:

  • Yourstore
  • Porto
  • Fastor

Standard version

In the standard version of Layered Navigation, you don’t have to do the configuration as all are set up by default including the following features:

  • Filter multiple product attributes
  • Feature the price slider
  • The feature “Shop by” will be enabled

Professional version

Beyond basic features in the Standard version, the Pro version of Layered Navigation supports the extra following features:

  • Turn on/off the Multi-filter feature
  • Scroll to top
  • Quick look-up box
  • Options to display “Out-of-stock” products
  • Product count
  • Expand product attributes by default
  • Apply Filter button
  • Filter by product status
  • Filter by product rating
  • Filter by decimal attributes

Better solutions for your Layered Navigation

To configure for these above features, all you need to do is selecting ‘Yes’ or ‘No’ and remember to click Save Config after setting.

To configure additional filters, please look at the screenshot below:

Better solutions for your Layered Navigation

To allow customers filter products by their statuses, you should go to Stores > Settings > Configuration > Mageplaza > Layered Navigation > Additional Filters > Product State Filter. First, name the filter in the field ‘Group Label’. In the below screenshot, it’s named “Product status”.

If you want the filter section to be expanded as default, select Yes at the field ‘Expand by default’. If No, the section will drop down when it’s clicked.

Better solutions for your Layered Navigation

Allow filtering by new products: Select Yes at Enable Product New Filter; feel free to name the filter in the next Product New label field.

Better solutions for your Layered Navigation

Allow filtering by products which are on sales: Select Yes at Enable On Sales Filter and you are able to rename the filter in the under box.

Better solutions for your Layered Navigation

Allow filtering by products which are out-of-stock: Select Yes at Enable Stock Filter and name the filter in the Stock label field. Remember that you have to enable Display out of stock product beforehand.

Better solutions for your Layered Navigation

If you want your customers to filter by product ratings, in the Rating filter section, you can turn on this feature by selecting Yes at Enable Rating Filter. Similarly, you can name the filter and expand it as default with some simple clicks as in the screenshot below:

Better solutions for your Layered Navigation

Ultimate version

Apart from available features in the standard and professional versions, the Ultimate one has some outstanding features as below:

  • Design slider/configuration tab
  • Ability to customize product page
  • Ability to customize product attributes
  • Shop by brand

Design configuration tab

You are able to choose one among five available slider types including Flat UI, HTML5, Modern, Nice white and Simple dark. Moreover, custom Css is also available to deploy when necessary. It’s important to be noticed that you should enable Slider in the Display type at Attribute Configuration > Color first to enable Design Configuration to work.

Better solutions for your Layered Navigation

Let’s see how the slider can be displayed on the frontend below:

  • Default slider:

Better solutions for your Layered Navigation

  • Flat UI:

Better solutions for your Layered Navigation

  • HTML5:

Better solutions for your Layered Navigation

  • Modern:

Better solutions for your Layered Navigation

  • Nice White:

Better solutions for your Layered Navigation

  • Simple Dark:

Better solutions for your Layered Navigation

Customize all-product page feature

This is the area for the settings of the All-product page feature. Once this is enabled, all filtered items will be displayed on one single page only so customers do not have to move from page to page to view all products. When a shopper surfs to the end of the All-product page, more items will be automatically shown.

To configure this feature, go Admin Panel > Mageplaza > Layered Navigation: Custom Products Pages. Choose a product page to edit.

Better solutions for your Layered Navigation

After choosing/creating a specific Product page, choose Page Information and scroll down to see some essential information:

Better solutions for your Layered Navigation

Fill all required information for the page then go the Default Attributes

Better solutions for your Layered Navigation

In Default attributes, you are able to select default attributes for the all-product page. When a customer performs a filter and get a bunch of result products, items with default attributes will be displayed first.

Customize product attributes

Go to Admin Panel > Stores > Attributes: Product, then choose an attribute and go to Layered Navigation Properties tab.

Example of a specific attribution and its configuration in details

Better solutions for your Layered Navigation

  • In Use in ProductsPage Navigation: Choose the possibility of being displayed on Layered Navigation.
  • In Use in Search Results ProductsPage Navigation: Choose the possibility of being filtered by Layered Navigation.
  • In Position: The attribute has a bigger position will be placed lower. 0 to set it in default as Magento 2’s principle.
  • In Allow Multiple Filter: If Yes, shoppers are able to filter by multi-options in this group attribute. For example: You can allow the shoppers to choose more than 1 filter in Color group attribute but can choose only 1 filter in Style group attribute.
  • In Display Style: Choose the display style of the group attribute. The specific design for each style is mentioned in the next section.
  • In Enable search option: Choose to enable/ disable the Quick Lookup Option in this attribute group.
  • In Expand by default: Choose to automatically expand this attribute group or not when the shoppers go to the collection page.

Shop by brand

A full module of Shop By Brand is integrated inside Mageplaza Layered Navigation Ultimate version. By utilizing this extension, shoppers are able to take advantage of the full features of Shop by Brand. See below:

For Store Admin
  • Easy to filter or search the brand
  • Add the brand detail: name, logo, banner, URL key, short description and detailed description
  • Add brands to Top menu, sidebar
  • Support WYSIWYG Editor to edit short and detailed description of the brand
  • Best SEO practices
  • Customizable the style
  • Display brand logo in the product page
  • Configure the meta tags for brand pages
  • Configure the brand page URLs
  • Limit the number of brands in sidebar
  • Insert featured brand block to any page and position with embedded code
  • Support product types: simple,downloadable,configurable,virtual, bundle
  • Bulk import Brands from CSV file
  • Opt to group brands by name or display in a continuous list
  • Support in customizing characters for the Alphabet filter
  • Supports in styling the Brand Mega Menu: in column and in row
  • Supports in styling the Brand List: listing and alphabet and allows displaying in 3 formats: Logo only, Label only, or Logo and Label
  • Supports popup quick view brand and related product list with ajax pagination page loading
  • Allows displaying Featured Brand, Brand List Thumbnail and Category Brand in the sidebar
  • Add noindex to pagination pages, meta title, meta keywords, meta robot for Category and Brand
  • Styles Featured Brand in the Brand page as a slider or as a list
  • Allows ajax filter brands by category
  • Allows showing brand names in the Product listing page
  • Displays product quantity with every brand in the Brand list page
  • Suggests related products with the same brand in the product page
  • Insert Widget: allows 3 widgets according to category, option ID (BrandID) or featured brand
  • Full responsive design which is perfectly compatible with each device
For Customers
  • Get all brands of all products
  • Get the featured brands
  • Ajax Loading for instant searching the brands
  • Get the brand details: name, logo, banner, description, featured products.
  • View all brands of all products listed in alphabetical order
  • View brands by category
  • View featured brand list
  • View brand list by name or logo
  • Access brand list from top link or main menu

To get the full instruction of how to configure Shop by Brand in the Ultimate version. Please go here

PDF Invoice samples for Magento 2

mageplaza pdf invoice

Want to apply these above Invoice templates for your store?

See how

Please leave comments if you have any questions, feedbacks.

Comments for How to Configure Layered Navigation with Filterable Attributes in Magento 2

You also may like these Magento 2 Extensions

One Step Checkout

88 reviews

Layered Navigation

51 reviews


32 reviews

Gift Card

5 reviews

Reward Points

4 reviews


12 reviews

People also searched for:

  • Configure Layered Navigation Magento 2
  • layered navigation
  • magento 2 layered navigation
  • magento 2 configure layered navigation
  • configure layered navigation magento 2 block module
  • layered navigation magento 2 configure