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?
- Why you should obtain Custom Mageplaza Layered Navigation?
- What’s new in Layered Navigation features?
- How to custom Layered Navigation
- Custom Layered Navigation on the frontend
- Final words
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?
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.
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.
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 Layerd Navigation 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.
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, 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.
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:
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.
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.
- 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:
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.
- 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:
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.
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:
- 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.
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.
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.
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.
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.
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:
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.
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.
- 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.
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:
- Flat UI:
- Nice White:
- Simple Dark:
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.