User guide: Layered Navigation Ultimate

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 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.

Features List

  • Ajax Loading (HOT)
  • Price Slider (HOT)
  • SEO Friendly URL (HOT)
  • Multi-Filters.
  • Quick Lookup option.
  • Product State Filter (NEW)
  • Rating Filter (NEW)
  • Apply Filter Option.
  • Expand by Default.
  • Scroll to Top after filtering. (NEW)
  • Product Count.
  • All Products page. (HOT)
  • Infinite Scroll (HOT)
  • Horizontal & Vertical Navigation.

Overview

After enabling the module, the Layered Navigation will be displayed on the left sidebar on Categories pages.

LN frontend

Layered Navigation Configuration

The Configuration is available under Admin Panel > Mageplaza > Layered Navigation > Configuration.

ultimate config

In the configuration, there are 4 tabs:

  • General configuration
  • Filter configuration
  • Design configuration
  • All Products page

Here are the details for the settings of each tab.

1. General Configuration tab

general tab

1.1. Module Enable

You can choose to use the Module Layered Navigation or not. Leave as Yes to enable and No to disable.

1.2. Multi-Filters

By enabling this feature, the shoppers are allowed to choose more than 1 filter to find the desired items.

For example: The shopper can choose to filter by Color with Black, White and Size with Small, Large at the same time.

Backend

To config this feature, go to Enable Multi-filter field, set Yes/ No to Enable/ Disable.

Frontend

multi video

1.3. Scroll to Top

This feature allows the shoppers, after filtering, can automatically back to the top of the products list and start to find the desired items.

Backend

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.

Frontend

scroll video

1.4. Quick Lookup Options

By enabling the Quick Lookup Options 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.

Backend

Go to Enable Filter options field to Enable/ Disable this feature by setting Yes/ No.

Frontend

lookup video

1.5. Display Out-of-stock option

In 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.

1.6. Product Count

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.

Backend

In Display Product Count field:

  • Set Yes to display the number to the left of the filter name.
  • Set No to hide this number.

Frontend

product count

1.7. Expand by default

In 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.

1.8. Show type

In this session, you can choose the way to display the filter attribute group. There are 3 options:

  • Normal
  • Hidden
  • Scroll

Backend

Choose the Type in the Show Type field.

show type

Frontend

Normal

normal

Hidden

hidden

Scroll

scroll1

1.9. Apply Filter button

The Apply Filter 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.

Backend

In Add Apply Filter button field, set Yes to show the button and leave No to disable.

Frontend

Here is how the Apply Filter button works:

apply filter

1.10. Infinite Scroll

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.

Backend

In the field Infinite scroll, set Yes to enable the feature and No to disable.

Frontend

Here is the screencast which shows how the Infinite scroll works:

infinite

1.11. Show Navigation

By default, the Vertical & Horizontal Navigation feature has 3 display styles so Mageplaza Layered Navigation can match to any store design with different purposes.

  • Vertical
  • Horizontal
  • Vertical and Horizontal

Backend

In the Show Navigation field, choose 1 of 3 options below :

  • Vertical
  • Horizontal
  • Both

Frontend

Vertical

vertical

Horizontal

horizontal

Vertical and Horizontal

both

2. Filter Configuration tab

2.1. Product State Filter

The Product State Filterfeature allows the shoppers to filter the items by the New, Sale, and Stock status.

Backend

Here is how the Product State Filter configuration will be displayed:

state config

  • Group label : The name of the group attribute
  • 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 & up, the received result will display the items which have the 4-star and 5-star rating.

Backend

The Rating Filter configuration is available under the Filter Configuration tab.

rating config

In the field Enable Rating Filter, 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:

  • Group Label : Adding the text as the group attribute’s name.
  • Expand by default : Choose Yes to automatically expand the group attribute Rating when shoppers go to the collection page.

rating config

Frontend

Here is how the Rating Filter works on the Frontend:

rating video

3. Design Configuration tab

design config

The Slider type field allows you to choose the type of the Price Slider. There are 5 options to choose:

  • Flat UI

flat ui

  • HTML5

html5

  • Modern

modern

  • Nice White

white

  • Simple dark

dark

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.

4. All Products Page tab

By enabling All 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.

Backend

The All products page configuration is available under Admin Panel > Mageplaza > Layered Navigation > Configuration > All Products page.

config

The configration includes 2 sections:

  • Attribute Config
  • SEO config

Attribute Config

The Attribute Config 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 Black of the attribute Color as the Default Attribute, the items which have Black color will be displayed first when the shoppers go to the All products page.

config

  • Default attribute: Insert the keywords to have a suggest attribute list.
  • Default option: Depend on the attribute was selected above, the Default option will appear and allow you to choose from the existing list.

SEO

SEO config

In this section, you can config the SEO attribute for the all products page to have the best SEO performance. There are 4 fields:

  • Page URL

    For example: If you insert ‘products’, the All products page URL will be: yourstore.com/products

  • Meta title
  • Meta keywords
  • Meta description

Frontend

all products page

5. Attribute Configuration

Go to Admin Panel > Stores > Products > Attribute, then choose an attribute and go to Layered Navigation Properties tab.

Generally, after installing Mageplaza Layered Navigation, this tab will show 4 mores options:

attribute config

  • Allow Multiple Filter : 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.

  • Display Style : Choose the display style of the group attribute.

    The specific design for each style is mentioned in the next section.

  • Enable search option : Choose to enable/ disable the Quick Lookup Option in this attribute group.

  • Expand by default : Choose to automatically expand this attribute group or not when the shoppers go to the collection page.

4. Display Styles

4.1 List

(General)

list

4.2. Dropdown

(General)

dropdown

4.3. Swatch

( for Color filter, Size filter)

color swatch

size

4.4. Swatch and text

( for Color filter, Size filter)

swatch text

4.5. Slider

( for Price filter)

price slider

4.6. Range

( for Price filter)

range

4.7. Slider and Range

( for Price filter)

slide range