How to Filter Custom Attributes Per Category in Magento 2?

It takes an effort of few poorly designed websites to dampen the interest of customers from the online purchase. You have less time to impress your customers.  As soon as a customer enters your store, the hourglass of patience starts unwinding. You will have to make way for your customers and make them land where they wish to go before the hourglass rushes out. Website navigation accounts for all the success within the mentioned time frame.

What Is E-commerce Navigation?

 Layman’s Term

When eCommerce store helps shoppers to discover the products quickly and easily, then it is known to have good navigating properties.

Detailed Explanation

Your homepage is the central hub for your eCommerce navigation. It should have the means to send visitors wherever they want to go, whether a specific product, browsing options, or customer service. Aside from that, it also has the power to influence and inform them. It’s the perfect place to advertise your best sellers, current & upcoming promotions, and general advantageous store policies like free shipping over a certain amount, giveaways, and schemes. Good navigation improves the online shopping experience and helps merchants increase sales and profits.

 What Is Custom Attributes?

 You can create attributes and use them as assets for your website. The process is known as customizing the attributes and the generated attributes are termed as custom attributes. Generally, eCommerce merchants use custom attributes to make swift and seamless navigation procedure and reduce product filtering time.

Why Do We Need Custom Attributes Per Category?

One of the major attributes is “category” which is usually reflected on all the pages of the eCommerce. Treating categories as custom attributes definitely reduce the enormous content to a more narrowly focused display. Category search classifies the products and helps the customers to unveil the necessary product in the pool of the myriad of options.

Ajax Layered Navigation For Magento 2- A Perfect Recipe For Product Filtering

What is Ajax layered navigation module? The name itself suggests that it is related to navigation through the website. Of course, we don’t use modules to make the website some long-drawn-place but a quick and agile one. Ajax layered navigation works as a tourist guide which guides the travelers to perambulate the length and breadth of the website without getting lost in the labyrinth of web-design.

DO NOT MISS:   Codelobster PHP IDE – How to create a Blog on WordPress?

AJAX layered navigation makes the product accessibility and filtering procedures a piece of cake. The method of product discoverability is evolving on daily basis. You can’t claim the perfect way by which you can minimize the discoverability time. All you can do is follow the latest trend leaving aside the trite. Though Custom attributes per category is an old technique to let your customers narrow the search funnel, you can’t ignore its effectivity to date.

Configuration and Settings of Mconnect Ajax Layered Navigation for Magento® 2

  1. The first step before using the extension is to install the extension. Check out this video to install the extension for your store.
  2. The second step is to configure the extension. Since these extensions are simple to configure, you don’t need a big management team to look after it. Here is how you can start configuration:
    1. Go to Store > Click Settings > Click Configuration > Expand M-Connect Media > Tap Advanced Layered Navigation in your Magento® Admin Panel.
    2. A setting window will open. This window will have four setting options.


There are 7 configuring components in this setting tab.

      1. Enable component: Click on yes to enable this extension on your storefront.
      2. Enable Ajax: Select yes to empower Ajax technique for flooring better search results.
      3. Filter Type: You can make your filter type manual or automatic, depending on your needs.
      4. Enable Price Slider: Choose Yes to enable the effect of Slider for price selection filter, on the storefront.
      5. Filter Location: Allows to place the filter at the Sidebar or Toolbar, solely based on your choice.
      6. Loader Image: Choose an image which will appear while the page is Ajax loading. If no image selected then the default loader image will appear on the frontend.
      7. Price Out of Range Error Message: Enter whatever message you want to display.


Drag and drop have made this list a simple filtering tab. In this tab, all you have to do is select an attribute of your choice from All fields and drag and drop it to the selected field. All the selected fields will be reflected on the frontend of your store.


There are 2 configuring components in this setting tab.

  1. Enable rating: Enable or disable this component to put the rating filter on the category page and let users narrow down the search based on product ratings.
  2. Rating Label: Label any name to your rating filter.
DO NOT MISS:   How To Delete Your Snapchat Account Permanently?


There are 2 configuring components in this setting tab.

  1. Enable: This component helps in drilling down those products which are no more in the stocks. Select yes/no to reflect the stock filter on the frontend.
  2. Stock Label: You can label any name to your stock filter using this component.

In order to display the out of stock products in stock filters, you need to select yes in the option by going to Stores > Settings > Configuration > Catalog > Inventory.

Tap on inventory, select stock options, and put Yes in the drop-down menu for ‘Displaying the out of Stock products’. You can also enable several components like “decreasing the stock count” or “display out of stock products” just by nodding a permission to the drop-down menu.

    1. Finish and save the configuration procedure by clicking on ‘Save Config’.

Manage Product Attributes for Layered Navigation in Easy 5 Steps

 Go to Stores > Attributes > Products.

  1. The Product attribute window will open up. Select the attribute which you wish to edit for navigation.
  2. On the attribute details page, click on Storefront properties tab under Attribute information menu.
  3. Make the changes in Use in Layered Navigation, Use in Search results Layered Navigation and Position.
  4. After you edit all the required fields, click on Save Config to apply the changes on the storefront.

The Final Call

Earlier, eCommerce management was very difficult. You either had to work for storefront UX and compromise with the configuring end or vice-versa. Advanced Layered Navigation lets you manage both the ends without compromising any of the other. This extension gives you a passage of performing an excellent role on front and the back end with ease.