User Tools

Site Tools


Sidebar

magento_2:layered_navigation_premium

Learn more about the Layered Navigation Premium for Magento 2 extension.

Guide for Layered Navigation Premium for Magento 2

The Magento 2 Layered Navigation Premium is a feature-rich module that overs all needs of web-store navigation. Grow purchases by letting users browse the products they need in a few clicks. Maximize the usability of the web-store with one easy extension.

The Premium Layered Navigation module is divided into 3 sub-modules. In the user guide below, the most essential settings are described. To find the extended guide on sub-modules configuration, please click on one of the links below:

  • Layered Navigation Settings - Set up a handy vertical and horizontal navigation menu to your website. Filter store catalog by any product attribute, display price sliders and ‘from-to widgets’. Generate custom brand pages and optimize your website for search engines
  • Infinite Scroll Settings - Set up an automatic loading of catalog pages and search results pages.
  • Custom Product Sorting on Brand Pages Settings - Customize product sorting on brand pages. Reorder items using drag-and-drop, place particular products at the top of the listing, adjust sorting options, and many more.

Layered Navigation Settings

See the extended guide on how to configure the Layered Navigation options via the link.

To get access to Magento 2 layered navigation settings, please go to Stores → Configuration → Improved Layered Navigation

Enable AJAX - Enable AJAX to avoid page reloads.

Customers can continue selecting multiple filter options while it's loading with AJAX. This way the whole shopping process becomes seamless and fast.

Add Vertical Scrolling to Filter Block After - Specify maximal filter size (in pixels) that will be displayed without vertical scrolling. In case a filter is higher than the indicated size, the scrolling will appear.

See a Vertical Scroll example

Submit filters on desktop (on mobile) - Select Instantly mode to apply filters one by one, on the fly. With the By button click mode, customers will be able to apply multiple filters in bulk after clicking a Show button.

By button click mode sample

Leave the Single-choice Filter Visible after Selection - Disable the setting to hide the filter when the value is selected.

Number of Unfolded Options in State - Specify the number of unfolded options. To see other options, a customer should click the 'More' button.

Filters Settings

To configure general settings for different filter types go to StoresConfigurationImproved Layered Navigation

Stock Filter

You can let users filter products by stock availability.

This is an example of how the 'Stock' filter would look on the store frontend.


Rating and Category Filters

Configure settings for Rating and Category filters. Choose whether to show them in the left sidebar, in the top menu, or in both positions. Specify the position for a category filter as well.

This is an example of how the 'Rating' and 'Category' filters would look on the store frontend.


New Filter

Configure settings for the 'New' filter. Choose whether to show it in the left sidebar, in the top menu or in both positions.

Note that to set up products for this filter, you should go Catalog → Products, select a product, specify the interval when the product is new. Note that attribute New does not co-relate with a filter work.


On Sale Filter

'On Sale' filter takes into account two parameters: Special Price and Catalog Price Rules. In case a product meets at least one of these parameters it's automatically added to the 'On Sale' filter results.

Configure settings for the 'On Sale' filter. Choose whether to show it in the left sidebar, in the top menu or in both positions.


Tooltips

Enable the tooltip option and upload a tooltip image.

To specify the text for a tooltip of a particular attribute, go to Stores → Attributes → Product, select an attribute, go to Attribute Information → Improved Layered Navigation → Tooltip field. Input text for different store views.


Vertical & Horizontal Navigation

Show in the Block - choose one of three modes to display each particular filter either in vertical or horizontal navigation. Select 'both' option to show the filter in both navigation blocks.

See the example of vertical and horizontal navigation blocks on one category page.


Enable/Disable Filters

To enable/disable a particular filter please go to StoresAttributesProduct and select the attribute you need.

Use in Layered Navigation - If you want an attribute to become filter in the navigation, select one of the options:

1. Filterable (with results) - a filter will be displayed only if there are products with such options in a category.

2. Filterable (no results) - a filter will be displayed even if there are no products with such options in a category.

Use in search results Layered Navigation - Enable this feature if you want the options above to be applied to the search results page.


Filter Display Modes

Display Mode - Use ‘Dropdown’ display mode for multiselect, price, visual swatch input types.


Slider Display Mode

Display Mode - Use ‘Slider’ display mode for price attribute.

Configure custom attribute units (inch, MB, px, etc.) and slider step size for the filter.


Limit Price Slider Range

You can limit the slider price range manually if needed. Specify min and max values in the corresponding fields to let customers filter products strictly withing the set range.


Price Range Display Mode

Display Mode - Use 'Ranges' display mode for prices and other numeric attributes.


'From-To' Widget

Display Mode - You can use the ‘From-to-widget’ filter for numeric attributes either separately or together with other filter display modes. To use it separately, choose the 'From-to only' display mode.

Add From-To Widget - set the option to 'yes' to use the widget together with other display modes.

In this case the widget will be used together with the Ranges display mode.

Filter Display Settings

To fine tune filter display settings please go to StoresAttributesProducts and choose the necessary attribute, then click on the Improved Layered Navigation tab.

Display Mode - Specify how to display filters - as Labels, Dropdowns, Images, Images & Labels, Text Swatches.

Show in the Block - Specify whether to show the filter in a vertical or horizontal navigation. It's also possible to show filters in both blocks.

Sort Options By - Specify which way you would like to sort the options: by name or by position.

Number of Unfolded Options - Specify the number of unfolded filter values that will be shown to customers when they click on a specific filter.

Expand - The option allows to expand filter automatically right after a page is loaded. Set 'Expand for desktop only' to keep filter minimized on mobile. Keep 'Auto' to work based on the custom theme functionality.

As soon as we’ve specified 3 unfolded values for display, other values will be shown after a customer clicks the More button.

Tooltip - Specify the tooltip text that will be displayed for a specific filter on mouse hover.

An example of a tooltip icon and a text.

If you want to display only particular options in the filters, you should make them Featured.

  • Go to Stores → Product
  • Select a particular attribute
  • In the Properties tab, go to Manage Swatch (Values of Your Attribute)
  • Select a needed option, that you want to make featured
  • Click on settings' gear icon in the option's section.

  • Enable Is Featured option. Note, that not featured options will be hidden under ‘show more’ element if at least one attribute's option is marked as ‘Is Featured’.

  • Adjust other featured option settings you need.

Visible in categories - Choose for which categories the filter will be available.

Show only when one of the attributes below is selected - choose filter attributes that will trigger the display of a dependent filter. You can select as many attributes as you need.

Show only when one of the options below is selected - choose the options that will trigger the display of the dependent filter.

Show icon on the product page - upload a special image that will be displayed on the product pages which meet filter requirements. This option is especially useful for a Brand filter to show a brand logo on the corresponding product pages.

Allow Multiselect - Enable the option to let customers choose several values of the filter at a time.

Multiple Values Logic - There two options available:

  • Show products with ANY value - all products containing at least one value from the selected ones will be displayed);
  • Show products with ALL values - products that contain all select values will be displayed.

There are several SEO settings for each filter available.


Filter Mapping Settings

To configure the option please go to StoresLayered NavigationManage Group Attribute Options → click Add New Group button
See the option in action. When a customer selects the icon of an attribute group ('Blue' for example), the module will display all products with the attributes from the 'Blue' group.

'All-Products' Page Settings

Enable the All Products page, containing all store items and layered navigation filters. You can also specify an appealing URL for the page, e.g. all-products.html.

You can set the name for the default category in Products – > Categories, e.g. All products


Brand Settings

General Settings

To configure greneral Brands Settinfs please go to StoresConfigurationImproved Layered NavigationBrands

Brand Attribute - It is possible to setup nice short URLs for pages of a brand attribute (or any other one you prefer), e.g.:

  • example.com/canon.html
  • example.com/nike.html
To generate such URLs for an attribute, please specify the code of the attribute in the Brand Attribute field. This feature works only for one attribute at a time.

URL Key - Specify the key that will be added to the URL before the brand name. E.g. your-site/brand/brand-name.html

Choose CMS page - select a CMS page where the All Brands List will be shown.

Add Brands link to Top Menu- choose whether to display a Brands link leading to the All Brand Page on the top menu bar. To configure the link position, select one of two modes:

  • Display First
  • Display Last

Show Brands List - display brands list and filter them by a character right in the tip menu Brands dropdown.

Add Brands to Account Top Links - Display a Brands link in a customer account.

Brands Item Label - Specify a name, which will be displayed in a menu bar and account top links.

Brand Label specified as Teams

Display Tooltip - Multi-select the directories, where you would like to display a tooltip with a brand info. Possible variants to display:

  • all-brands page
  • product pages
  • catalog pages (listing)
A tooltip

Tooltip Content - automate the tooltip creation and update. Enter the variables that should be used for a tooltip. Possible variables: {title}, {small_image}, {image}, {description}, {short_description}.

Take a look at the example of a brand logo on a product page. When customers click on the logo they will be redirected to the corresponding brand page.
A Brand filter can be added to vertical or horizontal navigation menu.
NOTE: Brands block on a category page is based on the current category. It means that the block contains only brands from the opened category.

Custom Product Sorting on Brand Pages (Add-On)

The additional functionality allows admins to customize product sorting on brand pages.

The feature can be enabled only after purchasing a Custom Product Sorting for Shop by Brand Add-On.

To manage products order on a brand page, go to Content → Layered Navigation → Brand Management.

Open the necessary brand page and scroll to the Products tab.

Here you can:

  • Reorder items using drag-and-drop
  • Place particular products at the top of the listing
  • Adjust sorting options
  • Move products through the pages
  • Pin particular ones
With the add-on, you can manage product sorting for particular store views separately.

First, set the necessary sort order, according to which all products will be displayed.

Sort Order - select from the dropdown the preferable way of the automatic ordering of the product listing.

Available options:

  • Move out of stock to the bottom
  • Newest products first
  • Name: Ascending
  • Name: Descending
  • Price: Ascending
  • Price: Descending

Search Products - find products within one current brand product listing by SKU or name.

In the Visible Items field the number of all the products that fall under the specified conditions is displayed.

Keep in mind that only Enabled products with the Visible Individually option can be displayed.

Drag-and-drop brand products according to your current marketing needs.

Move to Top - hit this button to send a particular item to the first position in the list.

Once you drag a particular product, the Manual mode is set automatically and it is “pinned” to a particular location. The feature helps to fixate a product in the same position even after the automatic sorting is activated too.

Moreover, the number of products per page in the admin panel equals the number of products customers see on the frontend. Thus, you will see how the products will be displayed to customers on each page.

With the move products through the pages feature it is possible to adjust the of products per each page by moving particular products to another page. As the page number is changed, the product becomes last on this page.

As the result, we set the follwing products order:

And on the frontend it will be displayed in the following way:

SEO Settings

Migration from Magento 1

If you've been using Improved Layered Navigation extension by Amasty for Magento 1 and now are going to migrate to M2, please pay a careful attention to your URL settings.

If you have URLs working based on 'Long with URL key' setting in Magento 1, then, please, configure the following options to migrate to Magento 2 and keep the existing URLs:

Include Attribute Name = Yes

Filter Key = shopby

See more information on this options below.


SEO URLs & Robots Tag Control

To manage SEO URLs, go to Stores → Configuration → Amasty extensions → Improved Layered Navigation:SEO

Enable - Set the option to 'yes' to optimize store URLs for search engines. The URLs will become short and clear.

Include Attribute Name - Select 'Yes' to add the attribute name to the the URL scheme, e.g. black → color_black.

Filter Key - The option allows to add a filter key to the URL scheme, e.g. example.com/black-xl-activity → example.com/shopby/black-xl-activity.

Add Suffix to the Brand Pages and Filtered All-products Pages - Set to Yes to add a particular SEO suffix to brand pages.

Replace Special Characters With - Specify how to replace special characters.

Separate Attribute Options With - Select the URL separator for the selected attribute options.

You can use the dash symbol in the Replace Special Characters With and Separate Attribute Options With fields simultaneously. But this method has a significant drawback. Let's compare the methods of using the same and different separators:

1. The same separator.

When building SEO URLs, the system may mistakenly regard one option as another. As a consequence, the results will be irrelevant.

E.g.: 3 different attributes have different options: “red”, “cotton” and “new”. This is how they will be displayed together in the link: “red-cotton-new” (when you apply a filter containing these 3 options). And there exists the 4-th attribute: its option displays on the frontend as “red+cotton=new”. According to the setting, all these symbols will be replaced to the dash separator. As a result: the system may take the filter of three options as a filter of one option (we'll receive 2 identical filters: “red-cotton-new”).

2. Different separators.

The situation described in the previous paragraph is impossible. When you replace special characters with the “_” symbol and separate attribute options with the dash symbol, you'll get 2 different filters: “red-cotton-new” and “red_cotton_new”. In addition, this method provides higher productivity with a large amount of data and filters.

To specify the suffix, go to Configuration → Catalog → Catalog → Search Engine Optimization → Category URL Suffix.

Allow the module to modify robots meta tags - Enable robots tag control to let the module manage indexation according to SEO settings for each attribute. If you disable the option, search engines will index all the store content.

Noindex when Multiple Attribute Filters Applied - Enable this option to set the robots to the noindex values for multiple filters.

Automatically Add rel=“nofollow” to Filter Links when Required - Enable this option to automatically add rel=“nofollow” to the filter links.

Noindex for paginated pages - Set to Yes to set the robots to noindex for paginated pages.


Canonical URL Settings

You can set structure of canonical URLs for ‘key’-related (‘Canonical URL’ setting) and category (‘Category Canonical URL’ setting) pages:

1. If you choose a “Keep current URL” option for category page, the canonical URL will have all information and will look like:

http://www.your_store.com/category/URL_Key.html?all_get_parameters_displayed_in_state

For “all product” page it will look like on the example below:

http://www.your_store.com/URL_Key.html?all_get_parameters_displayed_in_state

Please keep in mind, that all toolbar parameters (list mode, order, dir, limit), except pagination, won’t be added to canonical URL.

You can customize the All Products Page URL in Stores→Configuration→Improved Layered Navigation→All Products.

2. If you select the “First attribute value” for category page, the canonical URL will look like this:

http://www.your_store.com/category/URL_Key.html?first_attribute_displayed_in_state

For “all product” it will be generated like this:

http://www.your_store.com/URL_Key.html?first_attribute_displayed_in_state

Please, note that attribute's position in URL depends on specified attribute priority.

3. With the “Current URL without get parameters” for both “all product” pages and categories, canonical URL will have SEO-friendly attributes and a filter key:

http://www.your_store.com/category/URL_Key/seo_friendly_attribute_displayed_in_state.html

4. If you choose the “Without filters” option for category page, canonical URL will miss all filters and toolbar attributes (except pagination). As an example:

http://www.your_store.com/category/URL_Key.html?p=x

5. With “Brand Filter only” option for category page, the canonical URL will have brand attribute value:

http://www.your_store.com/category/URL_Key.html?brand_attribute_displayed_in_state

6. If you select the URL Key Only For “all product” page, the canonical URL will look like specified in the example below:

http://www.your_store.com/URL_Key.html

SEO URLs Examples

Generate SEO URL’ option is enabled. The URL is clear and includes the selected attributes.

Generate SEO URL’ option is disabled.


Pagination Settings

To bring your web store SEO to a top tier, you may as well want to check out new Amasty SEO Toolkit for Magento 2.

Use Prev/Next Tags for Improved Navigation Pages - Enable this option to help Google properly index your paginated content.

Add Page Number to Meta Title - Enable the option to add page numbers to meta titles, for example, 'Gear | Page 5'. This will fasten the work of search crawlers and the index building process.

Add Page Number to Meta Description - Set the option to Yes to add page numbers to meta descriptions. For instance, 'Gear Description | Page 3'.


Custom URL Alias

To customize URL Alias for pages with filtered options make sure you set the 'Generate SEO URL' option to ‘Yes’ (Stores → Attributes → Product → choose necessary attribute and open Improved Navigation tab).

Then open the 'Properties' tab, select the necessary filter value, click on the Settings icon and specify a custom URL alias.

See a custom URL Alias for the ‘Hoodie’ attribute.


Category Tree

Tree Settings

To create a category tree please go to StoresProduct and select the ‘Categories’ attribute.

In the Attribute Information menu open the Improved Layered Navigation tab.

Display Mode - Choose one of two display modes: Labels or Dropdown.

IMPORTANT: To add a particular category to a category tree make the category Anchor.

Render All Categories Tree - Specify to what extend the tree should be expanded.

  • Yes (Render Full Categories Tree);
  • No (For category filter tree customization);

Subcategories View - For the Labels display type you can specify the subcategories view mode: Folding/Fly-Out.

Render Categories Level - Indicate the level from which categories will be shown. There are 3 levels available:

  • Root Category
  • Current Category Level
  • Current Category Children
To get the Render Categories Level configuration available, you need to set the Category Tree Depth at 2 minimum, then press Enter button on the keyboard.
Please, make sure all parent categories have set is_anchor flag

Category Tree Depth - Specify the maximal level number for a category tree.

Shown in the Block - Select where to display the filter:

  • Left sidebar;
  • Top menu;
  • Both.

Category Tree Display Mode - Specify the mode for category tree presentation. You can display only text, only images, or both.

  • A sample of Show Labels & Images mode

Number of Unfolded Options - Limit the number of unfolded options. Customers will be able to unfold hidden options by clicking on the ‘More’ button. Leave the field empty to keep all filter options unfolded.

See how the ‘Render category level’ feature works. The example is created for Women > Tops category.
The Multiselect option which is enabled in the Filtering section can be used for Labels and Dropdown category view modes.


Frontend Examples

Here is the example of the ‘Labels’ category tree with the Folding view type and enabled Multiselect.

Here is the example of the ‘Labels’ category tree with the Fly-Out view type and enabled Multiselect

See the example of the ‘Dropdown’ category tree with enabled Multiselect.


Custom Pages

To create custom pages for specific filter results please go to ContentLayered NavigationCustom Pages.

Add Title & Description - Choose whether to replace category page metadata with your own info, or show it before/after category data.

Title - Specify the custom page title.

Description - Add the page description using the WYSIWYG editor.

Image - Choose and upload an image.

Please, keep in mind that for proper functioning image size should be less than the maximum size allowed by a server.

Top CMS Block -Select the CMS block on the base of which the page should be created.

NOTE: You can either select one of already existing CMS blocks or create a new one. To create a new CMS block please go to ContentElementsBlocks.

Meta Tags Tab - Specify meta title, description and keywords for each custom page you create.

IMPORTANT: Specify the Canonical Url when you're adding your custom navigation page to the sitemap with the XML Google Sitemap extension.

Categories & Store Views Tab - Select store views for which the page will be available. Choose categories products from which will be displayed on a custom page.

Filter & Filter Value - Select an attribute with its value. You can specify as many combinations (filter+value) as you need for a custom page. For instance, specify selection#1 with color-red and selection#2 with brand-puma to display only red puma items on a custom page.

See an example of a custom page with specific filter results.

API Methods

You can use Magento web API integrators to communicate with the Shop By Page functionality.

The following methods are available:

POST request - to create or update a resource;

GET request - to retrieve data from a server;

PUT request - to create or update a particular page;

DELETE request - to delete a particular page.

Infinite Scroll Settings

General Settings

To get the access to the “Infinite Scroll” settings please go to: Stores → Configuration → Amasty Extensions → Infinite Scroll In the Loading Type field:

  • Select None - module is disabled if you want to deactivate the functionality of the Infinite Scroll extension.
  • Select Automatic - on page scroll to activate the autoloading of the previous and next pages. The next and previous pages will be displayed as soon as you reach the end of the current page. The AJAX plugin provides the progressive enhancement of the next and previous pages to the existing page without a complete page refresh.
  • If you select Button - on button click you have the next and previous pages loaded automatically but they will be displayed only after you click the button.

In the Display Page Numbers field:

  • Choose Yes to display the pages separator with numbers. While scrolling down the list of products you will see the line separator with the page number. Select No to deactivate the separator and have the plain catalog list.

In the AJAX Progress Image Path field:

  • Insert the path to your own loading theme to customize your website. Choose what kind of loading wheels fits to your web store layout.

Customize buttons

With the Infinite Scroll extension, you can customize buttons at your taste.

  • Insert the text for the button that leads to the next page.
  • Customize your Next page button by specifying all necessary CSS parameters.

To customize the buttons and bars, you can set location, size, shape, and color, etc.
  • Enable/disable the Info bar that displays the current page number and the total pages count.
  • Specify the background color and other CSS styles (e.g. width, height) for your Info bar.
  • Place the Info bar in the most appropriate place on your page by inserting the offsets in pixels.

In this section you can specify CSS classes of blocks after which the module should load products, toolbars and pager. This is sometimes needed when standard classes are removed from custom design themes.

Catalog pages with buttons

Infinite Scroll for Magento 2 is fully compatible with Improved Layered Navigation for Magento 2.

Take a look at the Infinite Scroll smart navigation on the catalog pages. Load next and Info bar will significantly improve the customer experience.

The Back to Top button will ease your catalog navigation. You may enable or disable the page separator.

Find out how to install the Magento 2 Layered Navigation Premium via Composer.

Rate the user guide
 stars  from 0 votes (Details)
magento_2/layered_navigation_premium.txt · Last modified: 2020/06/15 07:11 by arhipenko