In order to advance the Magento 2 store layered navigation as well as to bring the best shopping experience to the visitors, Mageplaza developed the Layered Navigation Ultimate extension. This Ultimate version is the advanced version of the Pro version with many powerful and extra features will surely adapt any user's expectation and plays an important role to build a successful store.
This Layered Navigation Ultimate extension is a smart map for your Magento 2 store. It's the shortest way for the shoppers to find what they want, especially when you have a bunch of items with various prices, attributes or brands.
Overview
After enabling the module, the Layered Navigation will be displayed on the left sidebar on Categories pages.
https://i.imgur.com/A0Cq43m.jpg" alt=""/>
Layered Navigation Configuration
The Configuration is available under Admin Panel > Mageplaza > Layered Navigation > Configuration.
https://i.imgur.com/28dBmmi.gif" alt=""/>
General configuration
Filter configuration
Design configuration
Custom Products pages
Here are the details for the settings of each tab.
1. General Configuration tab
https://cdn.mageplaza.com/media/general/UIIFzKu.png" alt=""/>
In the Module Enable field: You can choose to use the Module Layered Navigation or not. Leave as Yes to enable and No to disable.
In the Multi-Filters field
By enabling this feature, the shoppers are allowed to choose more than 1 filter to find the desired items. You can also filter by multi-choose from multiple categories at the same time. For example: The shopper can choose to filter by Color with Black, White and Size with Small, Large at the same time. This can be also applied with multiple categories.
To config this feature, go to Enable Multi-filter field, set "Yes/No" to "Enable/ Disable"
https://i.imgur.com/jSaFtmp.gif" alt=""/>
In the Scroll to Top field
This feature allows the shoppers, after filtering, can automatically back to the top of the products list and start to find the desired items.
On the Scroll to Top after Filtering field, you will have 2 options:
YES : After choosing a filter or click on the Apply Filter button, the site will automatically scroll up to the top-page.
NO : After choosing a filter or click on the Apply Filter button, the site still stay at the current position.
In the Quick Lookup Options field
By enabling this feature, in each of the attribute group, there is a search box. The shoppers only need to insert the letters and the filter whose name contains this letter will be displayed.
Go to Enable Filter options field to "Enable/ Disable" this feature by setting "Yes/ No".
https://i.imgur.com/5GUCriq.gif" alt=""/>
In the Display Out-of-stock option field: There are 2 options to choose
Yes: Show all the attributes and options even the product is currently out of stock.
No: Hide all the attributes and options of the product which is currently out of stock.
In the Product Count field: With this feature, there will have a number which is displayed next to the filter. This number allows the shoppers to know how many items which is matched the filter. For example: If the filter is displayed: Cotton(2), that means there are 2 items which are matched the filter Cotton.
https://i.imgur.com/ZfTnGp2.jpg" alt=""/>
In the Display Product Count field
Set Yes to display the number to the left of the filter name.
Set No to hide this number.
In the Expand by default field
Yes : The attribute group will already be expanded when the shoppers go to the Categories page.
No : The shoppers need to click on the attribute group name to expand the filters.
In the Show type field: In this session, you can choose the way to display the filter attribute group. There are 3 options:
Normal
https://i.imgur.com/NIYrzeP.jpg" alt=""/>
Hidden
https://i.imgur.com/I4ACV3J.jpg" alt=""/>
Scroll
https://i.imgur.com/dLFymFF.gif
In the Apply Filter button field
The <span class="csh-markdown csh-markdown-code csh-markdown-code-inline csh-font-code-regular">Apply Filter</span> button allows the shoppers to choose when to apply the chosen filters. With this button, the shoppers don't need to wait for the page to reload again and again each time they choose a filter.
In Add Apply Filter button field, set "Yes" to show the button and leave "No" to disable.
Here is how the <span class="csh-markdown csh-markdown-code csh-markdown-code-inline csh-font-code-regular">Apply Filter</span> button works, you can choose lots of attribute before applying it. Also, SEO friendly URL is compatible with `Apply Filter`'s search result. As you can the this example chose Insulated* and Cold, and name of those attributes appears on the URL as well.
![]( https://imgur.com/Ve8nGAA.gif
In the Infinite Scroll field
Continue with the next session. Infinite Scroll, or also called the Lazy-scrolling on a website, this feature will help to automatically load the new products in the list when the shoppers scroll to the bottom, without clicking or reloading.
In the field Infinite scroll, set "Yes" to enable the feature and "No" to disable.
In the Show Navigation field
By default, the Vertical & Horizontal Navigation feature has 3 display styles so `Mageplaza Layered Navigation`_(" alt=""/> can match to any store design with different purposes.
In the Show Navigation field, choose 1 of 3 options below :
Vertical
https://i.imgur.com/wczXjJG.jpg" alt=""/>
Horizontal
https://i.imgur.com/Q0gXzKp.jpg" alt=""/>
Both
https://i.imgur.com/KemUMvJ.jpg" alt=""/>
2. Additional Filter
2.1. Product State Filter
The Product State Filter feature allows the shoppers to filter the items by the New, Sale, and Stock status. Here is how the Product State Filter configuration will be displayed:
https://i.imgur.com/qRlObXn.png" alt=""/>
Group label: The name of the group attribute
Position: Admin set the displaying priority for Product State Filter. The smaller number entered, the higher priority to show first.
Expand by default: Choose Yes to automatically expand the group attribute Rating when shoppers go to the collection page.
Enable New Filter, Enable On Sales filter, Enable Stock filter: Choose Yes to enable the filter and leave No to disable.
New label, On Sales label, Stock label: Add the name for each label filter.
2.2. Rating Filter
This feature allows the shoppers can filter the items by the rating follows 5 levels from 1 star to 5 stars. For example: when you choose the option 4 stars and up, the received result will display the items which have the 4-star and 5-star rating.
The Rating Filter configuration is available under the Filter Configuration tab.
https://i.imgur.com/pog5sWu.jpg" alt=""/>
In the Enable Rating Filter field: Choose "Yes" to enable and display the group attribute Rating on the Layered Navigation and leave "No" to disable this feature. When you choose "Yes", there are 2 more options for the modification:
In the Group Label : Adding the text as the group attribute's name.
In the Expand by default : Choose "Yes" to automatically expand the group attribute Rating when shoppers go to the collection page.
In the Position field: Admin can allow Rating Filter to show at different positions such as Top Sidebar, Bottom Sidebar, Below Category Filter.
In the Show as Slider field
Choose "Yes" if you want to display Vertical Slider
https://imgur.com/csS25Fl.jpg" alt=""/>
Choose "No" if you wish to keep the default Horizontal Rating filter.
https://imgur.com/HwUho1t.jpg" alt=""/>
3. SubCategory Slider
https://i.imgur.com/BuAwUtK.png" alt=""/>
- Enable SubCategory Slider: Slelect Yes to allow showing subcategories as slider on corresponding categories.
Display Type: Choose displaying type for slider
Label: Slider only shows subcategory name included in its category.
Image and Label: Slider shows subcategory name and image included in its category.
- Apply for Category: Admin choose category to be shown in slider.
- Auto Play: Select Yes to allow slider to be auto activated
- Items per Slider: Enter the number of item subcategory allowing to be shown on each slider.
https://i.imgur.com/oXnrwz9.png" alt=""/>
4. Design Configuration
https://i.imgur.com/Ma1rtJG.jpg" alt=""/>
The Slider type field allows you to choose the type of the Price Slider. There are 5 options to choose:
Default
https://i.imgur.com/fLEsxUz.jpg
Flat UI
![]( https://i.imgur.com/vp0iUQW.jpg
HTML5
![]( https://i.imgur.com/3KUpVjB.jpg
Modern
![]( https://i.imgur.com/uTAN15Z.jpg
Nice White
![]( https://i.imgur.com/uMaVTT7.jpg
Simple dark
![]( https://i.imgur.com/cfxqds6.jpg" alt=""/>
Note: To make the config on Design Configuration tab works, please make sure you have set the Display type on the Attribute Configuration > Color to be Slider.
5. Custom Products Pages
By enabling Custom products page feature, all of your items will be displayed in only 1 pages with the advanced filtering. That allows the shoppers don't need to find the exact categories page to filter the desired items.
Besides, Mageplaza also provides the SEO config to improve the page's ranking on the search engine result pages.
The Custom products page configuration is available under Admin Panel > Mageplaza > Layered Navigation: Custom Products Pages. Choose a product page to edit.
https://i.imgur.com/42MohHC.jpg" alt=""/>
5.1 Page Information
After choosing/creating a specific Product page, choose Page Information scroll down to see some essential information:
https://i.imgur.com/GXaRwE2.jpg" alt=""/>
In the Name field: Enter the name of the custom page in the backend.
In the Page Title field: Enter the name of the custom page in the frontend.
In the URL key field: Enter the characters you want to display in the URLs. For example*: If you insert '**products**', the All products page's URL will be: yourstore.com/products
In the Store View field: Choose specific store views you want to display
In the Status field: You can enable/disable the custom product page.
In the Link Position field: choose the position of the link.
In addition, you can configure the SEO attribute for the all products page to have the best SEO performance. There are 4 fields:
In the Meta title field: Enter the meta tittle for the custom product page.
In the Meta keywords field: Enter the meta keyword for the custom product page.
In the Meta description field: Enter the meta description for the custom product page.
5.2 Default Attributes
Default Attributes allows you set the default attribute for the all products page. That means when the shoppers open the all products page, you can decide which products will be displayed first.
For example : If you set the option Cool and Cold of the attribute Climate as the Default Attributes, the items which have Cool and Cold will be displayed first when the shoppers go to the Custom Product Pages
https://i.imgur.com/fsv0Qqw.jpg" alt=""/>
6. Attribute Configuration
Go to Admin Panel > Stores > Attributes: Product, then choose an attribute and go to Layered Navigation Properties tab.
6.1 Attribute Properties
Example of a specific attribution and its configuration in detail
https://i.imgur.com/kJYk1Oh.jpg" alt=""/>
In the Use in ProductsPage Navigation field: Choose the possibility of being displayed on Layered Navigation or not
In the Use in Search Results ProductsPage Navigation field: Choose the possibility of being filtered by Layered Navigation or not.
In the Position field: The attribute has bigger position will be placed lower. 0 to set it in default as Magento 2' s principle.
In the Allow Multiple Filter field: By choose Yes, the shoppers are able to filter by multi-option in this group attribute. For example: You can allow the shoppers to choose more than 1 filter in Color group attribute but only can choose 1 filter in Style group attribute.
In the Display Style field: Choose the display style of the group attribute. The specific design for each style is mentioned in the next section*.
In the Enable search option field: Choose to enable/ disable the Quick Lookup Option in this attribute group.
In the Expand by default field: Choose to automatically expand this attribute group or not when the shoppers go to the collection page.
6.2 Filter by decimal attributes
Layered Navigation also allows store owner can set up and visitor can filter decimal attributes.
In the Attribute Information > Properties > Advanced Attribute Properties > Input Validation for Store Owner, choose Decimal Number or Intergal Number to set your optional attribute.
https://imgur.com/Z4txesm.jpg" alt=""/>
Follow Attribute Information > ProductsPage Navigation Properties
In the Use in ProductsPage Navigation field choose Filterable (with results)*
In the Use in Search Results ProductsPage Navigation field choose Yes*
In the Display Style field choose your preferred style as Slider*, Range or Slider and Range
https://imgur.com/XmNmCJR.jpg" alt=""/>
For example with the Weight option for which product has weight as 15 lb. On the frontend, the search result can be filtered like:
https://imgur.com/mHR1l4E.jpg" alt=""/>
6.3 Show Tooltip
New version of Mageplaza Layered Navigation Professional allows store admins to set up tooltip for each attribute. Tooltip only apply for attribute types: Multiple Select, Dropdown, Price, Visual Swatch, Text Swatch.
Follow Attribute Information > ProductsPage Navigation Properties
- In the Use in ProductsPage Navigation field choose Filterable (with results)
https://i.imgur.com/IE4VlxE.png" alt=""/>
- Show Tooltip: Choose Yes to show Tooltip on attribute filter.
- Tooltip Thumbnail: Click Choose File, admin choose icon for tooltip. Leaving it blank, icon will be default value.
Tooltip Content: Enter the content for tooltip.
If tooltip is left blank, it will be assigned with Admin value.
https://i.imgur.com/r2gU1Lw.png" alt=""/>
7. Shop By Brand's configuration
Magento 2 Shop by Brand extension is also one of such great tool. Similar to the navigation, Shop by Brand allows filtering by product attributes, but they are neither color or material or any physical features of the product. The plugin bases on brands (manufacturers) the products are made by.
https://i.imgur.com/KiREkWK.jpg
Provided Shop By Brand's User guide can be found [here](https://docs.mageplaza.com/shop-by-brand-m2/index.html" alt=""/>
This Layered Navigation Ultimate extension is a smart map for your Magento 2 store. It's the shortest way for the shoppers to find what they want, especially when you have a bunch of items with various prices, attributes or brands.
Overview
After enabling the module, the Layered Navigation will be displayed on the left sidebar on Categories pages.
Layered Navigation Configuration
The Configuration is available under Admin Panel > Mageplaza > Layered Navigation > Configuration.
General configuration
Filter configuration
Design configuration
Custom Products pages
Here are the details for the settings of each tab.
1. General Configuration tab
In the Module Enable field: You can choose to use the Module Layered Navigation or not. Leave as Yes to enable and No to disable.
In the Multi-Filters field
By enabling this feature, the shoppers are allowed to choose more than 1 filter to find the desired items. You can also filter by multi-choose from multiple categories at the same time. For example: The shopper can choose to filter by Color with Black, White and Size with Small, Large at the same time. This can be also applied with multiple categories.
To config this feature, go to Enable Multi-filter field, set "Yes/No" to "Enable/ Disable"
In the Scroll to Top field
This feature allows the shoppers, after filtering, can automatically back to the top of the products list and start to find the desired items.
On the Scroll to Top after Filtering field, you will have 2 options:
YES : After choosing a filter or click on the Apply Filter button, the site will automatically scroll up to the top-page.
NO : After choosing a filter or click on the Apply Filter button, the site still stay at the current position.
In the Quick Lookup Options field
By enabling this feature, in each of the attribute group, there is a search box. The shoppers only need to insert the letters and the filter whose name contains this letter will be displayed.
Go to Enable Filter options field to "Enable/ Disable" this feature by setting "Yes/ No".
In the Display Out-of-stock option field: There are 2 options to choose
Yes: Show all the attributes and options even the product is currently out of stock.
No: Hide all the attributes and options of the product which is currently out of stock.
In the Product Count field: With this feature, there will have a number which is displayed next to the filter. This number allows the shoppers to know how many items which is matched the filter. For example: If the filter is displayed: Cotton(2), that means there are 2 items which are matched the filter Cotton.
In the Display Product Count field
Set Yes to display the number to the left of the filter name.
Set No to hide this number.
In the Expand by default field
Yes : The attribute group will already be expanded when the shoppers go to the Categories page.
No : The shoppers need to click on the attribute group name to expand the filters.
In the Show type field: In this session, you can choose the way to display the filter attribute group. There are 3 options:
Normal
Hidden
Scroll
In the Apply Filter button field
The <span class="csh-markdown csh-markdown-code csh-markdown-code-inline csh-font-code-regular">Apply Filter</span> button allows the shoppers to choose when to apply the chosen filters. With this button, the shoppers don't need to wait for the page to reload again and again each time they choose a filter.
In Add Apply Filter button field, set "Yes" to show the button and leave "No" to disable.
Here is how the <span class="csh-markdown csh-markdown-code csh-markdown-code-inline csh-font-code-regular">Apply Filter</span> button works, you can choose lots of attribute before applying it. Also, SEO friendly URL is compatible with `Apply Filter`'s search result. As you can the this example chose Insulated* and Cold, and name of those attributes appears on the URL as well.
![]( https://imgur.com/Ve8nGAA.gif
In the Infinite Scroll field
Continue with the next session. Infinite Scroll, or also called the Lazy-scrolling on a website, this feature will help to automatically load the new products in the list when the shoppers scroll to the bottom, without clicking or reloading.
In the field Infinite scroll, set "Yes" to enable the feature and "No" to disable.
In the Show Navigation field
By default, the Vertical & Horizontal Navigation feature has 3 display styles so `Mageplaza Layered Navigation`_(" alt=""/> can match to any store design with different purposes.
In the Show Navigation field, choose 1 of 3 options below :
Vertical
Horizontal
Both
2. Additional Filter
2.1. Product State Filter
The Product State Filter feature allows the shoppers to filter the items by the New, Sale, and Stock status. Here is how the Product State Filter configuration will be displayed:
Group label: The name of the group attribute
Position: Admin set the displaying priority for Product State Filter. The smaller number entered, the higher priority to show first.
Expand by default: Choose Yes to automatically expand the group attribute Rating when shoppers go to the collection page.
Enable New Filter, Enable On Sales filter, Enable Stock filter: Choose Yes to enable the filter and leave No to disable.
New label, On Sales label, Stock label: Add the name for each label filter.
2.2. Rating Filter
This feature allows the shoppers can filter the items by the rating follows 5 levels from 1 star to 5 stars. For example: when you choose the option 4 stars and up, the received result will display the items which have the 4-star and 5-star rating.
The Rating Filter configuration is available under the Filter Configuration tab.
In the Enable Rating Filter field: Choose "Yes" to enable and display the group attribute Rating on the Layered Navigation and leave "No" to disable this feature. When you choose "Yes", there are 2 more options for the modification:
In the Group Label : Adding the text as the group attribute's name.
In the Expand by default : Choose "Yes" to automatically expand the group attribute Rating when shoppers go to the collection page.
In the Position field: Admin can allow Rating Filter to show at different positions such as Top Sidebar, Bottom Sidebar, Below Category Filter.
In the Show as Slider field
Choose "Yes" if you want to display Vertical Slider
Choose "No" if you wish to keep the default Horizontal Rating filter.
3. SubCategory Slider
- Enable SubCategory Slider: Slelect Yes to allow showing subcategories as slider on corresponding categories.
Display Type: Choose displaying type for slider
Label: Slider only shows subcategory name included in its category.
Image and Label: Slider shows subcategory name and image included in its category.
- Apply for Category: Admin choose category to be shown in slider.
- Auto Play: Select Yes to allow slider to be auto activated
- Items per Slider: Enter the number of item subcategory allowing to be shown on each slider.
4. Design Configuration
The Slider type field allows you to choose the type of the Price Slider. There are 5 options to choose:
Default
Flat UI
![]( https://i.imgur.com/vp0iUQW.jpg
HTML5
![]( https://i.imgur.com/3KUpVjB.jpg
Modern
![]( https://i.imgur.com/uTAN15Z.jpg
Nice White
![]( https://i.imgur.com/uMaVTT7.jpg
Simple dark
![]( https://i.imgur.com/cfxqds6.jpg" alt=""/>
Note: To make the config on Design Configuration tab works, please make sure you have set the Display type on the Attribute Configuration > Color to be Slider.
5. Custom Products Pages
By enabling Custom products page feature, all of your items will be displayed in only 1 pages with the advanced filtering. That allows the shoppers don't need to find the exact categories page to filter the desired items.
Besides, Mageplaza also provides the SEO config to improve the page's ranking on the search engine result pages.
The Custom products page configuration is available under Admin Panel > Mageplaza > Layered Navigation: Custom Products Pages. Choose a product page to edit.
5.1 Page Information
After choosing/creating a specific Product page, choose Page Information scroll down to see some essential information:
In the Name field: Enter the name of the custom page in the backend.
In the Page Title field: Enter the name of the custom page in the frontend.
In the URL key field: Enter the characters you want to display in the URLs. For example*: If you insert '**products**', the All products page's URL will be: yourstore.com/products
In the Store View field: Choose specific store views you want to display
In the Status field: You can enable/disable the custom product page.
In the Link Position field: choose the position of the link.
In addition, you can configure the SEO attribute for the all products page to have the best SEO performance. There are 4 fields:
In the Meta title field: Enter the meta tittle for the custom product page.
In the Meta keywords field: Enter the meta keyword for the custom product page.
In the Meta description field: Enter the meta description for the custom product page.
5.2 Default Attributes
Default Attributes allows you set the default attribute for the all products page. That means when the shoppers open the all products page, you can decide which products will be displayed first.
For example : If you set the option Cool and Cold of the attribute Climate as the Default Attributes, the items which have Cool and Cold will be displayed first when the shoppers go to the Custom Product Pages
6. Attribute Configuration
Go to Admin Panel > Stores > Attributes: Product, then choose an attribute and go to Layered Navigation Properties tab.
6.1 Attribute Properties
Example of a specific attribution and its configuration in detail
In the Use in ProductsPage Navigation field: Choose the possibility of being displayed on Layered Navigation or not
In the Use in Search Results ProductsPage Navigation field: Choose the possibility of being filtered by Layered Navigation or not.
In the Position field: The attribute has bigger position will be placed lower. 0 to set it in default as Magento 2' s principle.
In the Allow Multiple Filter field: By choose Yes, the shoppers are able to filter by multi-option in this group attribute. For example: You can allow the shoppers to choose more than 1 filter in Color group attribute but only can choose 1 filter in Style group attribute.
In the Display Style field: Choose the display style of the group attribute. The specific design for each style is mentioned in the next section*.
In the Enable search option field: Choose to enable/ disable the Quick Lookup Option in this attribute group.
In the Expand by default field: Choose to automatically expand this attribute group or not when the shoppers go to the collection page.
6.2 Filter by decimal attributes
Layered Navigation also allows store owner can set up and visitor can filter decimal attributes.
In the Attribute Information > Properties > Advanced Attribute Properties > Input Validation for Store Owner, choose Decimal Number or Intergal Number to set your optional attribute.
Follow Attribute Information > ProductsPage Navigation Properties
In the Use in ProductsPage Navigation field choose Filterable (with results)*
In the Use in Search Results ProductsPage Navigation field choose Yes*
In the Display Style field choose your preferred style as Slider*, Range or Slider and Range
For example with the Weight option for which product has weight as 15 lb. On the frontend, the search result can be filtered like:
6.3 Show Tooltip
New version of Mageplaza Layered Navigation Professional allows store admins to set up tooltip for each attribute. Tooltip only apply for attribute types: Multiple Select, Dropdown, Price, Visual Swatch, Text Swatch.
Follow Attribute Information > ProductsPage Navigation Properties
- In the Use in ProductsPage Navigation field choose Filterable (with results)
- Show Tooltip: Choose Yes to show Tooltip on attribute filter.
- Tooltip Thumbnail: Click Choose File, admin choose icon for tooltip. Leaving it blank, icon will be default value.
Tooltip Content: Enter the content for tooltip.
If tooltip is left blank, it will be assigned with Admin value.
7. Shop By Brand's configuration
Magento 2 Shop by Brand extension is also one of such great tool. Similar to the navigation, Shop by Brand allows filtering by product attributes, but they are neither color or material or any physical features of the product. The plugin bases on brands (manufacturers) the products are made by.
Provided Shop By Brand's User guide can be found [here](https://docs.mageplaza.com/shop-by-brand-m2/index.html" alt=""/>
Published on: 10 / 15 / 2019