How to custom layered navigation in Magento 2

Jennie avatar
Jennie November 01, 2019

Share:

How to custom layered navigation in Magento 2

As you may or may not know, Layered Navigation, created by Mageplaza, is one of the essential extensions for any eCommerce store. If you have a list of endless products and afraid that your customers can feel tired of scrolling to find their desired items, you can upgrade your system with this handy extension.

Well then, wait no more, and let’s learn about how you can apply Layered Navigation extension to improve your store shopping journey!

Table of contents

What is Layered Navigation in Magento 2?

Magento 2 Layered Navigation is designed to enhance filter functionality based on the categories and attributes. For instance, when a customer visits your store intending to find specific products, he/ she can use the Magento 2 filter function to find the desired product in a matter of seconds. Suitable categories to buy shirts, trousers, sandals, or backpack will be available on the filter bar for visitors to select. After that, they can further choose their favorite sub-attributes to reduce the number of suggested products. In detail, these sub-attributes are called filterable attributes which are hidden in the criteria section.

Why should you obtain Custom Mageplaza Layered Navigation?

User-friendly filter

It is typical for a business to provide a wide range of products/services. However, it wastes customers too much time to find their concerned items. Just imagine, they have to spend time scrolling through the forest of product and end up not adding anything to their cart.

It is when the Custom Layered Navigation feature comes in handy to benefits both you and your shoppers. The flexibly customize abilities will help to clarify your customer requirements to make the searching process happen smoothly.

Flexible customization

The module gives you accessibility to customize filter options, layout selections to help you design the filtering ability as much as possible to suit with store intentions. From full customize ability, the experience with the friendly searching process will satisfy the client to encourage them to experience and discover store sites. The more time customers spend on-site, the more likely they will add more items to their cart and proceed with the checkout.

What’s new in Layered Navigation features?

Filter products by attribute

Moreover, attributes are the fundamental criteria to help you remove the number of products that suit buyer’s requirements. Magento 2 filter by attribute will customize the default function to bring smooth experience, even to the most challenging customers, with the help of the AJAX loading page and multi-filters. The reason that makes the innovative loading page ability so unique is no additional navigation required between each filter. In another way, the results will show matching results instantly after filtering rather than downloading the whole page.

Filter products by attribute

Also, do not forget that multiple options of each category can be selected and filter easily with the help of a multi-filter function. When you utilize default Magento 2, only single filtering is allowed. Customers will have to choose different options in one attribute multiple times until they find what they want. Having the searching load repetitively will make customers feel frustrated. As a result, customer shopping time is wasted, yet the search results may end up with less precision.

With Mageplaza multi-filter by attributes, your customers can save their time choosing many options in each attributes to view more of their preferred products in one filter.

Filter products by attribute

Add custom filter layered navigation

Magento 2 custom filter layered navigation is the most basic function of this plugin. When you want to create attributes that can be filtered, access the backend and create new attributes, you can add it in the attribute properties.

Also, there are extra filters available such as price filter, rating filter, sales filter, [product status filter](https://www.mageplaza.com/magento-2-layered-navigation-extension/product-state-filter.html0, in-stock items filter available to help you to display on your site’s interface. These unique filter will make your layered navigation bar looks eye-catching and professional. Regarding the customer’s benefits, the filter function will save more shopping time by removing unsuitable products in a blink of an eye.

Add custom filter layered navigation

Noticeably, customers can recognize the rating filter will bring more value to the price-conscious customer. This group of customers tends to plan their shopping budget and follow it strictly when they come and visits your e-stores. The rating filter will be appropriate to let your shoppers filter store items easily. The slider can be pulled up and down to adjust suitably to fit the buyers budget:

rating filter

How to custom Layered Navigation

Remember that after you purchase this extension, you need to proceed to integrate the extension and then customize it as your requirements. The Mageplaza Layered Navigation can be integrated easily via step by step guidance, which is similar to most Mageplaza’s extensions.

General configuration

When the module is integrated successfully, you can proceed with the general configuration. To access the Layered Navigation configuration, admins should access the back panel and click Stores > Settings > Configuration.

General configuration

  • Choose Yes to enable and No to disable the extension via Module Enable field.
  • For multi-filters, you can activate the Multi-filter by choosing Yes or No, if you want to deactivate it.
  • For Scroll to Top, choose Yes so that the site can automatically scroll to top of the page after applying a filter or click on the Apply Filter button. Otherwise, you can keep the visitor at their current position by choosing No.
  • For quick lookup options, choose Yes to enable filter options, if you want each group of an attribute attached with a search box to filter options inside specific attributes. If your selections of each attribute are only a few than select No to disable it.
  • For display out-of-stock options, select Yes to display all the attributes and options including out-of-stock items. And, set No option to disable out-of-stock items.
  • For product count, the filter will be displayed each filter options how many products are available. For example, the filter will display with product count like this: Cotton(2) which means there are 2 items that match with filter Cotton. To set Yes/ No in Display Product Count to enable/ disable this function.
  • For automatic expand, the function helps the attribute group to expand right after the customer loads the Categories page. If you choose Yes, the attribute group will display as a drop-down automatically. However, to make the layout look neat, you can choose No so that the attribute group only appears when customers click on it.
  • For show type, you can choose 3 ways to display the filter attribute group:
    • Normal:

    Normal

    • Hidden

Hidden

  • Scroll

Scroll

For the filter button, you can set Yes in the Apply Filter button field to help the customer to filter a set a filter instead of waiting for the filter to reload repetitively. But you want the reverse effect then choose No.

filter button

  • For the infinite scroll, the endless list of the product will appear when customer scroll to the bottom to find items rather than clicking or reloading.
  • For display ability of navigation, there are 3 options prepare to display on your frontend which are:

    • Vertical

Vertical

  • Horizontal

Horizontal

  • Both

Both

Customize a new filter

The filter is created via a process that consists of 3 stages:

  • Step 1: Form navigation properties
  • Step 2: Switched on the Anchor in the Category
  • Step 3: Check the results

Step 1: Form navigation properties

On the admin panel, access Admin Panel > Stores > Attributes: Product. You need to find an attribute that has already existed by scrolling down or enter the search box in the attribute code. Find it manually and go to Edit mode.

Form navigation properties

After you have entered the adjustment grid, the product can be a set of specific products in the filter section in Products Page Navigation properties. To set the product to appear properly on the filter you need to configure these following values:

adjustment grid

  • Set Filterable (with results) in the Use in Search Results ProductsPage Navigation value to help customers filter and find it via Layered Navigation.
  • Set the position with the numeric order which means the bigger the number In the Position field, the lower it will be placed. 0 to set it in default as Magento 2’s principle.
  • Set Yes to filter this attribute by multiple options in this group of attribute. For Instance, when a customer chooses 2 options in the Color attribute rather than only 1 filter.
  • Set the style for the group attribute in the Display Style field. The design for each style is mentioned in the next section.
  • Set to enable/ disable the Quick Lookup in the attribute group via the Enable Option Search field.
  • Set to automatically expand the attribute group in the collection page via Expand by default field.

Step 2: Switched on the Anchor in the Category

You should access another section which is Products > Inventory > Categories. From the categories tree, select the category you want the Layered Navigation to appear.

Switched on the Anchor in the Category

Step 3: Check the results

To check and see how it works, you can check on the frontend. The selection of filterable attributes will appear on layered navigation on the category page.

Add price slider filter

There are 5 selections available provided by this plugin including Flat UI, HTML5, Modern, Nice white and Simple dark. When necessary, custom CSS is also available to deploy. To select this slider to appear on the frontend, you can access Attribute Configuration > Color and then enable Design Configuration.

Add price slider filter

Customize unique filters

To add a filter by product status into the filter taskbar, you need to firstly access the admin backend, choose Stores > Settings > Configuration > Mageplaza > Layered Navigation > Adđitional Filters > Product State Filter. In this grid, name the product in “Group Label” field. As you can see above the sample field named “Product status”.

The filters have two methods to display which are Expand by default or Dropdown. Stores can set Yes to display as Expand by default or No to drop down when it is clicked.

Expand by default

To filter new products, choose creating a new filter at Enable Product New Filte. The title will display at the frontend correctly according to what you fill in the Product New Label field.

filter new products

To filter promotional products, you select Yes in On Sales Filter and also rename this product under the value below.

To filter Out-of-stock items, you should activate Enable On Sales Filter field by selecting the Yes option. Also, adjustment for its name is possible in the following fields. Make sure that you already enable Display out of stock product beforehand.

filter Out-of-stock items

To filter based on product ratings, selecting Yes to Enable Rating Filter value to help the system activate filter based on product ratings. In the filter selection, you want your customers to filter by product ratings. Similarly, you can name the filter and expand it as default with two values in the screenshot below:

Imgur

Custom Layered Navigation on the frontend

Filter products by attributes

The interface will help your visitors to find the suitable category based on their requirements regarding the item categories and attributes. After selecting the available attributes, the AJAX Loading function will display directly on the current page with no further redirection. The whole process will help customers add their favorite items to cart quickly.

Filter products by attributes

As you can see in the image below, 2 filters in one attribute are selected all at once to help customers find the best results for their wanted products. The effective searching process will help customers search for many types of products to find their favorite items faster.

2 filters in one attribute

  • New filters including Ratings, New, Sales or Instock products

These unique types of filters will help your store categorize items better. Moreover, the categories not only influenced by the stores but also by the evaluation of purchased clients via the product rating filter. Also, the new, sales, and in-stock fields will be the best filter to notify product status instead of having to access its direct product page.

New filters including Ratings, New, Sales or Instock products

  • Price slider Besides, the price slider provided by Mageplaza is also designed to look more lively and colorful. 6 ready-to-use templates for price slider is provided to help you choose the appropriate color to suit the store theme:

    • Default slider:

    Default slider

    • Flat UI:

Flat UI

  • HTML5:

HTML5

  • Modern:

Modern

  • Nice White:

Nice White

  • Simple Dark:

Simple Dark

Final words

In summary, if you can apply Layered Navigation the right way, positive experience on your sites will be the reason to encourage customers to purchase store items. That’s why, aside from these functions as mentioned earlier, you should learn more and take advantage by using other modules that come along with Layered Navigation developed for Magento 2 (Ultimate version), which are Shop By Brand and Advanced AJAX Search.

LAYERED NAVIGATION MODULE FOR MAGENTO 2



Jennie
Jennie
Jennie is a content expert at Mageplaza where she writes about all the things regarding e-Commerce: marketing, design, entrepreneurs, development, strategy, new trends and technologies. When not working, she fonds of discovering new locations to see new things or just simply indulging her mind with influential books.

Comments for How to custom layered navigation in Magento 2



Subscribe

Stay in the know

Get special offers on the latest news from Mageplaza.

Earn $10 in reward now!

Earn $10 in reward now!

comment
iphone
go up