Go to Extension Page

Welcome to Layered Navigation User Manual

Layered Navigation is a powerful yet simple extension, which allows you to build your own layered menu, making catalog navigation and filtering more convenient.

It replaces standard Magento layered navigation widget, which is displayed on each category page, with a more complex one - allowing customer to dynamically combine filters and browse desired products more quickly.

Go ahead, dive in!

Firstly, please, find our extension in My Downloadable Products section of our store. Learn how to install extension.

Proceed then with Quick Start, which will guide you to build your custom layered navigation menu.

How to install the extension

  1. Backup your store's database and web directory.
  2. Login to the SSH console of your server and navigate to the root directory of the Magento 2 store.
  3. Copy installation instructions from page My Downloadable Products to SSH console and press ENTER.

    Note

    Warning: If you have installed our Mirasvit Advanced SEO Suite extension version, lower than 2.0.50, please, update SEO extension prior to installing Layered Navigation extension.
  4. Run command php -f bin/magento module:enable Mirasvit_Core Mirasvit_SeoFilter Mirasvit_Scroll Mirasvit_Sorting Mirasvit_LayeredNavigation Mirasvit_Brand Mirasvit_AllProducts Mirasvit_SeoNavigation to enable the extension.
  5. Run command php -f bin/magento setup:upgrade to install the extension.
  6. Run command php -f bin/magento cache:clean to clean the cache.
  7. Deploy static view files

    rm -rf pub/static/*; rm -rf var/view_preprocessed/*; php -f bin/magento setup:static-content:deploy

Quick Start

Layered Navigation is a straightforward extension, which replaces standard catalog filters immediately after installation. Basically, you can work just from the box.

However, there can be things, that should be tuned-up.

  1. Layered Navigation should be seamlessly integrated to your theme. Visit General and Highlight section of Configuration, and fit layered navigation to your theme.

    Note

    Do not forget after each change to clear cache to make changes apply.
  2. Review your products attributes, and set as Filterable those, that you wish to be added to Layered Navigation.
  3. Some of attributes can have too much options to select. To optimize your navigation, use Links Limit.
  4. You may wish to make navigation more attractive by changing selection widgets to images. Use Widget Override feature for that.
  5. Configure additional filters, such as New Arrivals or On Stock using Additional Filters section of configuration.
  6. You can also make links in Layered Navigation Widgets more SEO-friendly, which will help web-crawlers index your store more effective.

This should be a good start. Refer to corresponding sections of this manual to know more.

Configuration Settings

This section describes most of settings, that you can use for configuring your layered navigation.

All of them located at Stores -> Configuration -> Mirasvit Extensions -> Layered Navigation section. It breaks into the following subsections, which you see at the sidebar:

Note

After changing of any option described below, navigate to System -> Tools -> Cache Management and clear ALL cache to apply CSS changes, which correspond to changed options.

General

This section contains the most basic options, that define behaviour of Layered Navigation.

Option Description
Enabled Ajax Allows to update filters and catalog list via AJAX
Enabled Multiselect Allows to select multiple filter options in a time, creating flexible and complex filters.
Display options Defines widget, which will be used for filter option selection. There's three available widgets: Default (used default widget, defined in your theme), Simple Checkbox, Checkbox, and Circle. These widgets will be used for all properties with enumerated values.

Note

You can override this option and define custom icons for each enumerated value using Attribute Navigation Images.
Checkbox or circle background color Displayed, when Checkbox or Circle options is selected in previous setting. Defines background of the widget.
Checkbox or circle border color Displayed, when Checkbox or Circle options is selected in Display options setting. Defines border of the widget.
Display options Displayed, when Checkbox or Circle options is selected in master Display options setting. Defines selection color of the widget.
Show opened filters If this option is set to Yes, opened filters will be displayed at the top of the filtered product list.

Back to Top

Highlight

Option Description
Enabled highlight for links Enables options (filter links) highlighting
Highlight color Defines a color for options (filter links) highlighting

Back to Top

Links Limit

Option Description
Links limit Limit for options (filter links) displayed at particular filter
Less text Text, which will be used as button to collapse filter to limited options quantity.
More text Text, which will be used as button to expand filter to full options quantity.
Switch label color Color of text of collapse/expand action.

Back to Top

Slider

Option Description
Select filters to show in frontend Select filters, that should be displayed as sliders on navigation sidebar
Slider handle color Defines color of the handle
Slider handle border color Defines color of handle border
Slider connect color Defines color of slider connect line
Slider text color Defines color of text, which accompanies the slider

Back to Top

Additional Filters

This section consists of three additional filters, provided by our extension: New Products, On Sale Stock and Rating.

New Products

This filter shows only new arrivals.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

On Sale

This filter shows products, that are registered as "for sale" (e. q. with discount).

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Stocks

This filter shows products, that are in stock, and can be bought.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
In Stock Filter Label Text, which is used to mark products, available for shopping
Out of Stock Filter Label Text, which is used to mark products, went out of stocks
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Ratings

This filter shows rating, calculated on customer's review. It also utilized custom widget with stars.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Back to Top

Horizontal filter and Panel

This section deals with displaying filters, which should be displayed on sidebar.

Option Description
Select filters to show in frontend Multi-selection option, which defines filters, eligible for navigation. They are defined at Stores -> Attributes -> Product. To became filter, attribute should be enumerable, and option Use in Layered Navigation should be enabled in Storefront Properties.
Hide horizontal filters if screen size less then (px) Defines height, at which extension will shrink and hide horizontal filters.

Back to Top

Filter clear block

Clear block is the block, where customer can cancel one or more filters.

Option Description
Filter clear block position Defines position of that block. There are two options available: Default (within sidebar) and Horizontal
Representation of attributes in filter clear block Defines, how selected filters should be arranged - in one row, or in different rows.

Back to Top

SEO

Option Description
Robots meta header for pages with applied filters This directive controls page visibility by search engines crawlers. It's recommended to use NOINDEX, NOFOLLOW option to avoid indexation of duplicate content by search engines like Google unless you use friendly URLs.
Canonical link for pages for pages with applied filters Defines the "preferred" version for current page. Helps to prevent duplicate content issues.
Options:
- Current Url - always uses the same URL as in the browser's address panel. For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica/red.html?activity=5174"
- URL without applied filters and GET parameters - canonical URL always points to genuine page URL, removing applied filters (even with friendly URLs) and GET parameters.
For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica.html"
- URL without GET parameters - canonical URL points to the URL specified in the browser's address panel, but without GET parameters.
For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica/red.html"

Back to Top

Configuration Settings

This section describes most of settings, that you can use for configuring your layered navigation.

All of them located at Stores -> Configuration -> Mirasvit Extensions -> Layered Navigation section. It breaks into the following subsections, which you see at the sidebar:

Note

After changing of any option described below, navigate to System -> Tools -> Cache Management and clear ALL cache to apply CSS changes, which correspond to changed options.

General

This section contains the most basic options, that define behaviour of Layered Navigation.

Option Description
Enabled Ajax Allows to update filters and catalog list via AJAX
Enabled Multiselect Allows to select multiple filter options in a time, creating flexible and complex filters.
Display options Defines widget, which will be used for filter option selection. There's three available widgets: Default (used default widget, defined in your theme), Simple Checkbox, Checkbox, and Circle. These widgets will be used for all properties with enumerated values.

Note

You can override this option and define custom icons for each enumerated value using Attribute Navigation Images.
Checkbox or circle background color Displayed, when Checkbox or Circle options is selected in previous setting. Defines background of the widget.
Checkbox or circle border color Displayed, when Checkbox or Circle options is selected in Display options setting. Defines border of the widget.
Display options Displayed, when Checkbox or Circle options is selected in master Display options setting. Defines selection color of the widget.
Show opened filters If this option is set to Yes, opened filters will be displayed at the top of the filtered product list.

Back to Top

Highlight

Option Description
Enabled highlight for links Enables options (filter links) highlighting
Highlight color Defines a color for options (filter links) highlighting

Back to Top

Links Limit

Option Description
Links limit Limit for options (filter links) displayed at particular filter
Less text Text, which will be used as button to collapse filter to limited options quantity.
More text Text, which will be used as button to expand filter to full options quantity.
Switch label color Color of text of collapse/expand action.

Back to Top

Slider

Option Description
Select filters to show in frontend Select filters, that should be displayed as sliders on navigation sidebar
Slider handle color Defines color of the handle
Slider handle border color Defines color of handle border
Slider connect color Defines color of slider connect line
Slider text color Defines color of text, which accompanies the slider

Back to Top

Additional Filters

This section consists of three additional filters, provided by our extension: New Products, On Sale Stock and Rating.

New Products

This filter shows only new arrivals.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

On Sale

This filter shows products, that are registered as "for sale" (e. q. with discount).

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Stocks

This filter shows products, that are in stock, and can be bought.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
In Stock Filter Label Text, which is used to mark products, available for shopping
Out of Stock Filter Label Text, which is used to mark products, went out of stocks
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Ratings

This filter shows rating, calculated on customer's review. It also utilized custom widget with stars.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Back to Top

Horizontal filter and Panel

This section deals with displaying filters, which should be displayed on sidebar.

Option Description
Select filters to show in frontend Multi-selection option, which defines filters, eligible for navigation. They are defined at Stores -> Attributes -> Product. To became filter, attribute should be enumerable, and option Use in Layered Navigation should be enabled in Storefront Properties.
Hide horizontal filters if screen size less then (px) Defines height, at which extension will shrink and hide horizontal filters.

Back to Top

Filter clear block

Clear block is the block, where customer can cancel one or more filters.

Option Description
Filter clear block position Defines position of that block. There are two options available: Default (within sidebar) and Horizontal
Representation of attributes in filter clear block Defines, how selected filters should be arranged - in one row, or in different rows.

Back to Top

SEO

Option Description
Robots meta header for pages with applied filters This directive controls page visibility by search engines crawlers. It's recommended to use NOINDEX, NOFOLLOW option to avoid indexation of duplicate content by search engines like Google unless you use friendly URLs.
Canonical link for pages for pages with applied filters Defines the "preferred" version for current page. Helps to prevent duplicate content issues.
Options:
- Current Url - always uses the same URL as in the browser's address panel. For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica/red.html?activity=5174"
- URL without applied filters and GET parameters - canonical URL always points to genuine page URL, removing applied filters (even with friendly URLs) and GET parameters.
For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica.html"
- URL without GET parameters - canonical URL points to the URL specified in the browser's address panel, but without GET parameters.
For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica/red.html"

Back to Top

Configuration Settings

This section describes most of settings, that you can use for configuring your layered navigation.

All of them located at Stores -> Configuration -> Mirasvit Extensions -> Layered Navigation section. It breaks into the following subsections, which you see at the sidebar:

Note

After changing of any option described below, navigate to System -> Tools -> Cache Management and clear ALL cache to apply CSS changes, which correspond to changed options.

General

This section contains the most basic options, that define behaviour of Layered Navigation.

Option Description
Enabled Ajax Allows to update filters and catalog list via AJAX
Enabled Multiselect Allows to select multiple filter options in a time, creating flexible and complex filters.
Display options Defines widget, which will be used for filter option selection. There's three available widgets: Default (used default widget, defined in your theme), Simple Checkbox, Checkbox, and Circle. These widgets will be used for all properties with enumerated values.

Note

You can override this option and define custom icons for each enumerated value using Attribute Navigation Images.
Checkbox or circle background color Displayed, when Checkbox or Circle options is selected in previous setting. Defines background of the widget.
Checkbox or circle border color Displayed, when Checkbox or Circle options is selected in Display options setting. Defines border of the widget.
Display options Displayed, when Checkbox or Circle options is selected in master Display options setting. Defines selection color of the widget.
Show opened filters If this option is set to Yes, opened filters will be displayed at the top of the filtered product list.

Back to Top

Highlight

Option Description
Enabled highlight for links Enables options (filter links) highlighting
Highlight color Defines a color for options (filter links) highlighting

Back to Top

Links Limit

Option Description
Links limit Limit for options (filter links) displayed at particular filter
Less text Text, which will be used as button to collapse filter to limited options quantity.
More text Text, which will be used as button to expand filter to full options quantity.
Switch label color Color of text of collapse/expand action.

Back to Top

Slider

Option Description
Select filters to show in frontend Select filters, that should be displayed as sliders on navigation sidebar
Slider handle color Defines color of the handle
Slider handle border color Defines color of handle border
Slider connect color Defines color of slider connect line
Slider text color Defines color of text, which accompanies the slider

Back to Top

Additional Filters

This section consists of three additional filters, provided by our extension: New Products, On Sale Stock and Rating.

New Products

This filter shows only new arrivals.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

On Sale

This filter shows products, that are registered as "for sale" (e. q. with discount).

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Stocks

This filter shows products, that are in stock, and can be bought.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
In Stock Filter Label Text, which is used to mark products, available for shopping
Out of Stock Filter Label Text, which is used to mark products, went out of stocks
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Ratings

This filter shows rating, calculated on customer's review. It also utilized custom widget with stars.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Back to Top

Horizontal filter and Panel

This section deals with displaying filters, which should be displayed on sidebar.

Option Description
Select filters to show in frontend Multi-selection option, which defines filters, eligible for navigation. They are defined at Stores -> Attributes -> Product. To became filter, attribute should be enumerable, and option Use in Layered Navigation should be enabled in Storefront Properties.
Hide horizontal filters if screen size less then (px) Defines height, at which extension will shrink and hide horizontal filters.

Back to Top

Filter clear block

Clear block is the block, where customer can cancel one or more filters.

Option Description
Filter clear block position Defines position of that block. There are two options available: Default (within sidebar) and Horizontal
Representation of attributes in filter clear block Defines, how selected filters should be arranged - in one row, or in different rows.

Back to Top

SEO

Option Description
Robots meta header for pages with applied filters This directive controls page visibility by search engines crawlers. It's recommended to use NOINDEX, NOFOLLOW option to avoid indexation of duplicate content by search engines like Google unless you use friendly URLs.
Canonical link for pages for pages with applied filters Defines the "preferred" version for current page. Helps to prevent duplicate content issues.
Options:
- Current Url - always uses the same URL as in the browser's address panel. For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica/red.html?activity=5174"
- URL without applied filters and GET parameters - canonical URL always points to genuine page URL, removing applied filters (even with friendly URLs) and GET parameters.
For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica.html"
- URL without GET parameters - canonical URL points to the URL specified in the browser's address panel, but without GET parameters.
For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica/red.html"

Back to Top

Configuration Settings

This section describes most of settings, that you can use for configuring your layered navigation.

All of them located at Stores -> Configuration -> Mirasvit Extensions -> Layered Navigation section. It breaks into the following subsections, which you see at the sidebar:

Note

After changing of any option described below, navigate to System -> Tools -> Cache Management and clear ALL cache to apply CSS changes, which correspond to changed options.

General

This section contains the most basic options, that define behaviour of Layered Navigation.

Option Description
Enabled Ajax Allows to update filters and catalog list via AJAX
Enabled Multiselect Allows to select multiple filter options in a time, creating flexible and complex filters.
Display options Defines widget, which will be used for filter option selection. There's three available widgets: Default (used default widget, defined in your theme), Simple Checkbox, Checkbox, and Circle. These widgets will be used for all properties with enumerated values.

Note

You can override this option and define custom icons for each enumerated value using Attribute Navigation Images.
Checkbox or circle background color Displayed, when Checkbox or Circle options is selected in previous setting. Defines background of the widget.
Checkbox or circle border color Displayed, when Checkbox or Circle options is selected in Display options setting. Defines border of the widget.
Display options Displayed, when Checkbox or Circle options is selected in master Display options setting. Defines selection color of the widget.
Show opened filters If this option is set to Yes, opened filters will be displayed at the top of the filtered product list.

Back to Top

Highlight

Option Description
Enabled highlight for links Enables options (filter links) highlighting
Highlight color Defines a color for options (filter links) highlighting

Back to Top

Links Limit

Option Description
Links limit Limit for options (filter links) displayed at particular filter
Less text Text, which will be used as button to collapse filter to limited options quantity.
More text Text, which will be used as button to expand filter to full options quantity.
Switch label color Color of text of collapse/expand action.

Back to Top

Slider

Option Description
Select filters to show in frontend Select filters, that should be displayed as sliders on navigation sidebar
Slider handle color Defines color of the handle
Slider handle border color Defines color of handle border
Slider connect color Defines color of slider connect line
Slider text color Defines color of text, which accompanies the slider

Back to Top

Additional Filters

This section consists of three additional filters, provided by our extension: New Products, On Sale Stock and Rating.

New Products

This filter shows only new arrivals.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

On Sale

This filter shows products, that are registered as "for sale" (e. q. with discount).

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Stocks

This filter shows products, that are in stock, and can be bought.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
In Stock Filter Label Text, which is used to mark products, available for shopping
Out of Stock Filter Label Text, which is used to mark products, went out of stocks
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Ratings

This filter shows rating, calculated on customer's review. It also utilized custom widget with stars.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Back to Top

Horizontal filter and Panel

This section deals with displaying filters, which should be displayed on sidebar.

Option Description
Select filters to show in frontend Multi-selection option, which defines filters, eligible for navigation. They are defined at Stores -> Attributes -> Product. To became filter, attribute should be enumerable, and option Use in Layered Navigation should be enabled in Storefront Properties.
Hide horizontal filters if screen size less then (px) Defines height, at which extension will shrink and hide horizontal filters.

Back to Top

Filter clear block

Clear block is the block, where customer can cancel one or more filters.

Option Description
Filter clear block position Defines position of that block. There are two options available: Default (within sidebar) and Horizontal
Representation of attributes in filter clear block Defines, how selected filters should be arranged - in one row, or in different rows.

Back to Top

SEO

Option Description
Robots meta header for pages with applied filters This directive controls page visibility by search engines crawlers. It's recommended to use NOINDEX, NOFOLLOW option to avoid indexation of duplicate content by search engines like Google unless you use friendly URLs.
Canonical link for pages for pages with applied filters Defines the "preferred" version for current page. Helps to prevent duplicate content issues.
Options:
- Current Url - always uses the same URL as in the browser's address panel. For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica/red.html?activity=5174"
- URL without applied filters and GET parameters - canonical URL always points to genuine page URL, removing applied filters (even with friendly URLs) and GET parameters.
For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica.html"
- URL without GET parameters - canonical URL points to the URL specified in the browser's address panel, but without GET parameters.
For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica/red.html"

Back to Top

Configuration Settings

This section describes most of settings, that you can use for configuring your layered navigation.

All of them located at Stores -> Configuration -> Mirasvit Extensions -> Layered Navigation section. It breaks into the following subsections, which you see at the sidebar:

Note

After changing of any option described below, navigate to System -> Tools -> Cache Management and clear ALL cache to apply CSS changes, which correspond to changed options.

General

This section contains the most basic options, that define behaviour of Layered Navigation.

Option Description
Enabled Ajax Allows to update filters and catalog list via AJAX
Enabled Multiselect Allows to select multiple filter options in a time, creating flexible and complex filters.
Display options Defines widget, which will be used for filter option selection. There's three available widgets: Default (used default widget, defined in your theme), Simple Checkbox, Checkbox, and Circle. These widgets will be used for all properties with enumerated values.

Note

You can override this option and define custom icons for each enumerated value using Attribute Navigation Images.
Checkbox or circle background color Displayed, when Checkbox or Circle options is selected in previous setting. Defines background of the widget.
Checkbox or circle border color Displayed, when Checkbox or Circle options is selected in Display options setting. Defines border of the widget.
Display options Displayed, when Checkbox or Circle options is selected in master Display options setting. Defines selection color of the widget.
Show opened filters If this option is set to Yes, opened filters will be displayed at the top of the filtered product list.

Back to Top

Highlight

Option Description
Enabled highlight for links Enables options (filter links) highlighting
Highlight color Defines a color for options (filter links) highlighting

Back to Top

Links Limit

Option Description
Links limit Limit for options (filter links) displayed at particular filter
Less text Text, which will be used as button to collapse filter to limited options quantity.
More text Text, which will be used as button to expand filter to full options quantity.
Switch label color Color of text of collapse/expand action.

Back to Top

Slider

Option Description
Select filters to show in frontend Select filters, that should be displayed as sliders on navigation sidebar
Slider handle color Defines color of the handle
Slider handle border color Defines color of handle border
Slider connect color Defines color of slider connect line
Slider text color Defines color of text, which accompanies the slider

Back to Top

Additional Filters

This section consists of three additional filters, provided by our extension: New Products, On Sale Stock and Rating.

New Products

This filter shows only new arrivals.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

On Sale

This filter shows products, that are registered as "for sale" (e. q. with discount).

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Stocks

This filter shows products, that are in stock, and can be bought.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
In Stock Filter Label Text, which is used to mark products, available for shopping
Out of Stock Filter Label Text, which is used to mark products, went out of stocks
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Ratings

This filter shows rating, calculated on customer's review. It also utilized custom widget with stars.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Back to Top

Horizontal filter and Panel

This section deals with displaying filters, which should be displayed on sidebar.

Option Description
Select filters to show in frontend Multi-selection option, which defines filters, eligible for navigation. They are defined at Stores -> Attributes -> Product. To became filter, attribute should be enumerable, and option Use in Layered Navigation should be enabled in Storefront Properties.
Hide horizontal filters if screen size less then (px) Defines height, at which extension will shrink and hide horizontal filters.

Back to Top

Filter clear block

Clear block is the block, where customer can cancel one or more filters.

Option Description
Filter clear block position Defines position of that block. There are two options available: Default (within sidebar) and Horizontal
Representation of attributes in filter clear block Defines, how selected filters should be arranged - in one row, or in different rows.

Back to Top

SEO

Option Description
Robots meta header for pages with applied filters This directive controls page visibility by search engines crawlers. It's recommended to use NOINDEX, NOFOLLOW option to avoid indexation of duplicate content by search engines like Google unless you use friendly URLs.
Canonical link for pages for pages with applied filters Defines the "preferred" version for current page. Helps to prevent duplicate content issues.
Options:
- Current Url - always uses the same URL as in the browser's address panel. For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica/red.html?activity=5174"
- URL without applied filters and GET parameters - canonical URL always points to genuine page URL, removing applied filters (even with friendly URLs) and GET parameters.
For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica.html"
- URL without GET parameters - canonical URL points to the URL specified in the browser's address panel, but without GET parameters.
For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica/red.html"

Back to Top

Configuration Settings

This section describes most of settings, that you can use for configuring your layered navigation.

All of them located at Stores -> Configuration -> Mirasvit Extensions -> Layered Navigation section. It breaks into the following subsections, which you see at the sidebar:

Note

After changing of any option described below, navigate to System -> Tools -> Cache Management and clear ALL cache to apply CSS changes, which correspond to changed options.

General

This section contains the most basic options, that define behaviour of Layered Navigation.

Option Description
Enabled Ajax Allows to update filters and catalog list via AJAX
Enabled Multiselect Allows to select multiple filter options in a time, creating flexible and complex filters.
Display options Defines widget, which will be used for filter option selection. There's three available widgets: Default (used default widget, defined in your theme), Simple Checkbox, Checkbox, and Circle. These widgets will be used for all properties with enumerated values.

Note

You can override this option and define custom icons for each enumerated value using Attribute Navigation Images.
Checkbox or circle background color Displayed, when Checkbox or Circle options is selected in previous setting. Defines background of the widget.
Checkbox or circle border color Displayed, when Checkbox or Circle options is selected in Display options setting. Defines border of the widget.
Display options Displayed, when Checkbox or Circle options is selected in master Display options setting. Defines selection color of the widget.
Show opened filters If this option is set to Yes, opened filters will be displayed at the top of the filtered product list.

Back to Top

Highlight

Option Description
Enabled highlight for links Enables options (filter links) highlighting
Highlight color Defines a color for options (filter links) highlighting

Back to Top

Links Limit

Option Description
Links limit Limit for options (filter links) displayed at particular filter
Less text Text, which will be used as button to collapse filter to limited options quantity.
More text Text, which will be used as button to expand filter to full options quantity.
Switch label color Color of text of collapse/expand action.

Back to Top

Slider

Option Description
Select filters to show in frontend Select filters, that should be displayed as sliders on navigation sidebar
Slider handle color Defines color of the handle
Slider handle border color Defines color of handle border
Slider connect color Defines color of slider connect line
Slider text color Defines color of text, which accompanies the slider

Back to Top

Additional Filters

This section consists of three additional filters, provided by our extension: New Products, On Sale Stock and Rating.

New Products

This filter shows only new arrivals.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

On Sale

This filter shows products, that are registered as "for sale" (e. q. with discount).

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Stocks

This filter shows products, that are in stock, and can be bought.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
In Stock Filter Label Text, which is used to mark products, available for shopping
Out of Stock Filter Label Text, which is used to mark products, went out of stocks
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Ratings

This filter shows rating, calculated on customer's review. It also utilized custom widget with stars.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Back to Top

Horizontal filter and Panel

This section deals with displaying filters, which should be displayed on sidebar.

Option Description
Select filters to show in frontend Multi-selection option, which defines filters, eligible for navigation. They are defined at Stores -> Attributes -> Product. To became filter, attribute should be enumerable, and option Use in Layered Navigation should be enabled in Storefront Properties.
Hide horizontal filters if screen size less then (px) Defines height, at which extension will shrink and hide horizontal filters.

Back to Top

Filter clear block

Clear block is the block, where customer can cancel one or more filters.

Option Description
Filter clear block position Defines position of that block. There are two options available: Default (within sidebar) and Horizontal
Representation of attributes in filter clear block Defines, how selected filters should be arranged - in one row, or in different rows.

Back to Top

SEO

Option Description
Robots meta header for pages with applied filters This directive controls page visibility by search engines crawlers. It's recommended to use NOINDEX, NOFOLLOW option to avoid indexation of duplicate content by search engines like Google unless you use friendly URLs.
Canonical link for pages for pages with applied filters Defines the "preferred" version for current page. Helps to prevent duplicate content issues.
Options:
- Current Url - always uses the same URL as in the browser's address panel. For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica/red.html?activity=5174"
- URL without applied filters and GET parameters - canonical URL always points to genuine page URL, removing applied filters (even with friendly URLs) and GET parameters.
For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica.html"
- URL without GET parameters - canonical URL points to the URL specified in the browser's address panel, but without GET parameters.
For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica/red.html"

Back to Top

Configuration Settings

This section describes most of settings, that you can use for configuring your layered navigation.

All of them located at Stores -> Configuration -> Mirasvit Extensions -> Layered Navigation section. It breaks into the following subsections, which you see at the sidebar:

Note

After changing of any option described below, navigate to System -> Tools -> Cache Management and clear ALL cache to apply CSS changes, which correspond to changed options.

General

This section contains the most basic options, that define behaviour of Layered Navigation.

Option Description
Enabled Ajax Allows to update filters and catalog list via AJAX
Enabled Multiselect Allows to select multiple filter options in a time, creating flexible and complex filters.
Display options Defines widget, which will be used for filter option selection. There's three available widgets: Default (used default widget, defined in your theme), Simple Checkbox, Checkbox, and Circle. These widgets will be used for all properties with enumerated values.

Note

You can override this option and define custom icons for each enumerated value using Attribute Navigation Images.
Checkbox or circle background color Displayed, when Checkbox or Circle options is selected in previous setting. Defines background of the widget.
Checkbox or circle border color Displayed, when Checkbox or Circle options is selected in Display options setting. Defines border of the widget.
Display options Displayed, when Checkbox or Circle options is selected in master Display options setting. Defines selection color of the widget.
Show opened filters If this option is set to Yes, opened filters will be displayed at the top of the filtered product list.

Back to Top

Highlight

Option Description
Enabled highlight for links Enables options (filter links) highlighting
Highlight color Defines a color for options (filter links) highlighting

Back to Top

Links Limit

Option Description
Links limit Limit for options (filter links) displayed at particular filter
Less text Text, which will be used as button to collapse filter to limited options quantity.
More text Text, which will be used as button to expand filter to full options quantity.
Switch label color Color of text of collapse/expand action.

Back to Top

Slider

Option Description
Select filters to show in frontend Select filters, that should be displayed as sliders on navigation sidebar
Slider handle color Defines color of the handle
Slider handle border color Defines color of handle border
Slider connect color Defines color of slider connect line
Slider text color Defines color of text, which accompanies the slider

Back to Top

Additional Filters

This section consists of three additional filters, provided by our extension: New Products, On Sale Stock and Rating.

New Products

This filter shows only new arrivals.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

On Sale

This filter shows products, that are registered as "for sale" (e. q. with discount).

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Stocks

This filter shows products, that are in stock, and can be bought.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
In Stock Filter Label Text, which is used to mark products, available for shopping
Out of Stock Filter Label Text, which is used to mark products, went out of stocks
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Ratings

This filter shows rating, calculated on customer's review. It also utilized custom widget with stars.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Back to Top

Horizontal filter and Panel

This section deals with displaying filters, which should be displayed on sidebar.

Option Description
Select filters to show in frontend Multi-selection option, which defines filters, eligible for navigation. They are defined at Stores -> Attributes -> Product. To became filter, attribute should be enumerable, and option Use in Layered Navigation should be enabled in Storefront Properties.
Hide horizontal filters if screen size less then (px) Defines height, at which extension will shrink and hide horizontal filters.

Back to Top

Filter clear block

Clear block is the block, where customer can cancel one or more filters.

Option Description
Filter clear block position Defines position of that block. There are two options available: Default (within sidebar) and Horizontal
Representation of attributes in filter clear block Defines, how selected filters should be arranged - in one row, or in different rows.

Back to Top

SEO

Option Description
Robots meta header for pages with applied filters This directive controls page visibility by search engines crawlers. It's recommended to use NOINDEX, NOFOLLOW option to avoid indexation of duplicate content by search engines like Google unless you use friendly URLs.
Canonical link for pages for pages with applied filters Defines the "preferred" version for current page. Helps to prevent duplicate content issues.
Options:
- Current Url - always uses the same URL as in the browser's address panel. For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica/red.html?activity=5174"
- URL without applied filters and GET parameters - canonical URL always points to genuine page URL, removing applied filters (even with friendly URLs) and GET parameters.
For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica.html"
- URL without GET parameters - canonical URL points to the URL specified in the browser's address panel, but without GET parameters.
For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica/red.html"

Back to Top

Configuration Settings

This section describes most of settings, that you can use for configuring your layered navigation.

All of them located at Stores -> Configuration -> Mirasvit Extensions -> Layered Navigation section. It breaks into the following subsections, which you see at the sidebar:

Note

After changing of any option described below, navigate to System -> Tools -> Cache Management and clear ALL cache to apply CSS changes, which correspond to changed options.

General

This section contains the most basic options, that define behaviour of Layered Navigation.

Option Description
Enabled Ajax Allows to update filters and catalog list via AJAX
Enabled Multiselect Allows to select multiple filter options in a time, creating flexible and complex filters.
Display options Defines widget, which will be used for filter option selection. There's three available widgets: Default (used default widget, defined in your theme), Simple Checkbox, Checkbox, and Circle. These widgets will be used for all properties with enumerated values.

Note

You can override this option and define custom icons for each enumerated value using Attribute Navigation Images.
Checkbox or circle background color Displayed, when Checkbox or Circle options is selected in previous setting. Defines background of the widget.
Checkbox or circle border color Displayed, when Checkbox or Circle options is selected in Display options setting. Defines border of the widget.
Display options Displayed, when Checkbox or Circle options is selected in master Display options setting. Defines selection color of the widget.
Show opened filters If this option is set to Yes, opened filters will be displayed at the top of the filtered product list.

Back to Top

Highlight

Option Description
Enabled highlight for links Enables options (filter links) highlighting
Highlight color Defines a color for options (filter links) highlighting

Back to Top

Links Limit

Option Description
Links limit Limit for options (filter links) displayed at particular filter
Less text Text, which will be used as button to collapse filter to limited options quantity.
More text Text, which will be used as button to expand filter to full options quantity.
Switch label color Color of text of collapse/expand action.

Back to Top

Slider

Option Description
Select filters to show in frontend Select filters, that should be displayed as sliders on navigation sidebar
Slider handle color Defines color of the handle
Slider handle border color Defines color of handle border
Slider connect color Defines color of slider connect line
Slider text color Defines color of text, which accompanies the slider

Back to Top

Additional Filters

This section consists of three additional filters, provided by our extension: New Products, On Sale Stock and Rating.

New Products

This filter shows only new arrivals.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

On Sale

This filter shows products, that are registered as "for sale" (e. q. with discount).

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Stocks

This filter shows products, that are in stock, and can be bought.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
In Stock Filter Label Text, which is used to mark products, available for shopping
Out of Stock Filter Label Text, which is used to mark products, went out of stocks
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Ratings

This filter shows rating, calculated on customer's review. It also utilized custom widget with stars.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Back to Top

Horizontal filter and Panel

This section deals with displaying filters, which should be displayed on sidebar.

Option Description
Select filters to show in frontend Multi-selection option, which defines filters, eligible for navigation. They are defined at Stores -> Attributes -> Product. To became filter, attribute should be enumerable, and option Use in Layered Navigation should be enabled in Storefront Properties.
Hide horizontal filters if screen size less then (px) Defines height, at which extension will shrink and hide horizontal filters.

Back to Top

Filter clear block

Clear block is the block, where customer can cancel one or more filters.

Option Description
Filter clear block position Defines position of that block. There are two options available: Default (within sidebar) and Horizontal
Representation of attributes in filter clear block Defines, how selected filters should be arranged - in one row, or in different rows.

Back to Top

SEO

Option Description
Robots meta header for pages with applied filters This directive controls page visibility by search engines crawlers. It's recommended to use NOINDEX, NOFOLLOW option to avoid indexation of duplicate content by search engines like Google unless you use friendly URLs.
Canonical link for pages for pages with applied filters Defines the "preferred" version for current page. Helps to prevent duplicate content issues.
Options:
- Current Url - always uses the same URL as in the browser's address panel. For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica/red.html?activity=5174"
- URL without applied filters and GET parameters - canonical URL always points to genuine page URL, removing applied filters (even with friendly URLs) and GET parameters.
For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica.html"
- URL without GET parameters - canonical URL points to the URL specified in the browser's address panel, but without GET parameters.
For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica/red.html"

Back to Top

Configuration Settings

This section describes most of settings, that you can use for configuring your layered navigation.

All of them located at Stores -> Configuration -> Mirasvit Extensions -> Layered Navigation section. It breaks into the following subsections, which you see at the sidebar:

Note

After changing of any option described below, navigate to System -> Tools -> Cache Management and clear ALL cache to apply CSS changes, which correspond to changed options.

General

This section contains the most basic options, that define behaviour of Layered Navigation.

Option Description
Enabled Ajax Allows to update filters and catalog list via AJAX
Enabled Multiselect Allows to select multiple filter options in a time, creating flexible and complex filters.
Display options Defines widget, which will be used for filter option selection. There's three available widgets: Default (used default widget, defined in your theme), Simple Checkbox, Checkbox, and Circle. These widgets will be used for all properties with enumerated values.

Note

You can override this option and define custom icons for each enumerated value using Attribute Navigation Images.
Checkbox or circle background color Displayed, when Checkbox or Circle options is selected in previous setting. Defines background of the widget.
Checkbox or circle border color Displayed, when Checkbox or Circle options is selected in Display options setting. Defines border of the widget.
Display options Displayed, when Checkbox or Circle options is selected in master Display options setting. Defines selection color of the widget.
Show opened filters If this option is set to Yes, opened filters will be displayed at the top of the filtered product list.

Back to Top

Highlight

Option Description
Enabled highlight for links Enables options (filter links) highlighting
Highlight color Defines a color for options (filter links) highlighting

Back to Top

Links Limit

Option Description
Links limit Limit for options (filter links) displayed at particular filter
Less text Text, which will be used as button to collapse filter to limited options quantity.
More text Text, which will be used as button to expand filter to full options quantity.
Switch label color Color of text of collapse/expand action.

Back to Top

Slider

Option Description
Select filters to show in frontend Select filters, that should be displayed as sliders on navigation sidebar
Slider handle color Defines color of the handle
Slider handle border color Defines color of handle border
Slider connect color Defines color of slider connect line
Slider text color Defines color of text, which accompanies the slider

Back to Top

Additional Filters

This section consists of three additional filters, provided by our extension: New Products, On Sale Stock and Rating.

New Products

This filter shows only new arrivals.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

On Sale

This filter shows products, that are registered as "for sale" (e. q. with discount).

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Stocks

This filter shows products, that are in stock, and can be bought.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
In Stock Filter Label Text, which is used to mark products, available for shopping
Out of Stock Filter Label Text, which is used to mark products, went out of stocks
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Ratings

This filter shows rating, calculated on customer's review. It also utilized custom widget with stars.

Option Description
Enabled Allows this filter to be used in navigation
Label Text label, which will mark this filter at the navigation sidebar
Position Numerical position of this filter (0 is the top, 100 is the bottom)

Back to Top

Horizontal filter and Panel

This section deals with displaying filters, which should be displayed on sidebar.

Option Description
Select filters to show in frontend Multi-selection option, which defines filters, eligible for navigation. They are defined at Stores -> Attributes -> Product. To became filter, attribute should be enumerable, and option Use in Layered Navigation should be enabled in Storefront Properties.
Hide horizontal filters if screen size less then (px) Defines height, at which extension will shrink and hide horizontal filters.

Back to Top

Filter clear block

Clear block is the block, where customer can cancel one or more filters.

Option Description
Filter clear block position Defines position of that block. There are two options available: Default (within sidebar) and Horizontal
Representation of attributes in filter clear block Defines, how selected filters should be arranged - in one row, or in different rows.

Back to Top

SEO

Option Description
Robots meta header for pages with applied filters This directive controls page visibility by search engines crawlers. It's recommended to use NOINDEX, NOFOLLOW option to avoid indexation of duplicate content by search engines like Google unless you use friendly URLs.
Canonical link for pages for pages with applied filters Defines the "preferred" version for current page. Helps to prevent duplicate content issues.
Options:
- Current Url - always uses the same URL as in the browser's address panel. For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica/red.html?activity=5174"
- URL without applied filters and GET parameters - canonical URL always points to genuine page URL, removing applied filters (even with friendly URLs) and GET parameters.
For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica.html"
- URL without GET parameters - canonical URL points to the URL specified in the browser's address panel, but without GET parameters.
For example:
Address URL: "http://example.com/veronica/red.html?activity=5174"
Canonical URL: "http://example.com/veronica/red.html"

Back to Top

Product Attributes Navigation Options

Our extension uses SEO Filters for defining possible filters. That extension adds additional options to the product attributes, which are used for building Layered Navigation.

To adjust your attributes for navigation, visit Stores -> Attributes -> Product and pick up an attribute.

Basic Navigation Options

They are located at Storefront Properties subsection, and added to all attributes:

  • Use in Layered Navigation - defines, how current attributes should be used in Layered Navigation. There's three possible options:
    • Filterable (with Results) - defines, that filter can be used in Navigation, and results can be displayed and manipulated.
    • Filterable (no Results) - defines, that filter can be used in Navigation, but results can not be manipulated.
    • No - attribute can not be used for Navigation.
  • Use in Search Results Layered Navigation - our extension features additional filters, which can be applied further to already filtered results and combine them this way. If this option is set to Yes, then this attribute can be combined.

    Note

    This option applies only to enumerable properties, like Dropdown, Multiple Select, Price and so on.

Overriding Filter Options Display

If property is enumerable, and has defined set of values, display of each one can be customized. It can be done via special tab, added to such an attributes, and named Layered Navigation.

For each possible value it features four options:

  • Option - name of possible value (read-only property).
  • Image - is the image, which should be used instead of widget, defined at Display options setting in General section.
  • Change original menu text - a label, which will be used instead of default name, shown in Option field.
  • Whole width image - defines, whether image should be displayed as is (selected), or shrinked to standard proportions (deselected).

By combining these definitions, you can completely override your filter display on sidebar, and create attractive appearance.

Ajax Infinite Scroll

Scroll module provides you with the ability to activate the infinite scroll for traversing your catalog.
It works in 2 modes:

  1. Automatic Infinite Scroll - which automatically loads next page when user scrolls down to bottom of the current page.
  2. Load More Button - which triggers next page load by hitting the Load More button.

General Settings

Go to Stores > Configuration > Mirasvit Extensions > Scroll section.

  • Scroll Mode - defines, the mode used for loading next pages:
    • Disabled - disable scroll functionality.
    • Infinite scroll
    • Load More Button
  • Load Previous Page Button Label - if user opens your site by direct link which loads the specific category page (using param "p=page_num"), our module shows the Load Previous Page button on top of the catalog to give user the ability to see the previous pages.
  • Load Next Page Button Label - label for Load More button.
  • Product List Selector - our extension uses this selector as the starting point for initialization of the scroll functionality. Default Magento blcock which wraps products has the .products.products-grid or .products.products-list selector (depends on current view mode). But if your theme uses custom selector you should specify it here.

Sorting Criteria

Go to System > Improved Sorting > Sorting Criteria.

You will see the list of configured sorting options. If list is empty, magento will use default sorting options.

Here you can change the order of the criteria visible to users and add/remove available options.

Once you add your first sorting criteria, extension will replace native magento sorting options and use your configuration.


Ranking Factors

Ranking Factor - internal functionality, that calculate product "weight" or "relevance"

Sorting Criteria

  • Name - name of option, visible in dropdown
  • Is Default - if selected, sorting criteria will be applied by default on category page
  • Is Default for Search - if selected, sorting criteria will be applied by default on search results page (instead sort by relevance)
  • Position - position of sorting option in dropdown
  • Conditions - describes logic to sort products. You can use catalog attributes and/or ranking factors. An attribute is visible for sorting, if option "Used for Sorting in Product Listing" is enabled (Stores / Attributes / Product)

Command Line Interface

Usage: php -f bin/magento [options]

  • mirasvit:sorting:reindex - reindex extension indexes. Same as native Magento 2 command: indexer:reindex mst_sorting

SEO Filters

SEO Filters allows replacement of layered navigation links (e.q. with interchangeable parameters like size and colors) to a SEO-friendly links with more intuitive and human-readable path.

Corresponding settings subsection is located at Stores -> Configuration -> Mirasvit Extensions -> SEO Filters.

The only options, available for now, are:

  • Enabled - enables and disables SEO Filters feature
  • Separator between words in complex filter name - if attribute name consists of several words, this option will define their concatenating to single name with a delimiter. There are the following options:
    • Do not use separator - words are not separated at all.
    • Use "_" as separator - words will be separated with underline.
    • Use capital letter as separator - each word in attribute name will be capitalized.

Note

Important Note

SEO Filters should only be enabled if you are using native Magento Layered Navigation or Mirasvit Layered Navigation and there are no third-party Layered Navigation extensions installed on your store.

Otherwise, turning on this option can cause unchecked errors and unexpected crushes.

SEO Filters Example

Consider a links, which are generated for different subcategories at Tops category page, and displayed as layered navigation sidebar.

Layered Navigation Sidebar

Subcategories, displayed above, are constructed dynamically from parameters, that defined in configurable products, and have the following form. For example, let's consider a links for a top of XS size and of Orange color.

    http://www.example.com/women/tops-women.html?size=167
    http://www.example.com/women/tops-women.html?color=56

As you see, link has a dynamic part, which takes form parameter=ID, which is not optimal for web indexing.

But if we will set Marketing > Advanced SEO Suite > Settings > SEO Filters -> Enable to Yes, links will change into:

    http://www.example.com/women/tops-women/xs.html
    http://www.example.com/women/tops-women/orange.html

These links are far more SEO-friendly.

Note

Important Note

You should purge ALL cache after enabling/disabling SEO filters, otherwise links will not change.

Troubleshoot

This section describes the most common problems, that customers report, and how they can be resolved:

Filter is not visible on some category pages, while it remains visible on other category pages

Description

For example, you met the issue when the color filter is visible on some category pages and not visible on others.

Explanation

In case if a specific category's filter consist of a single option and filtering by this option does not reduce this category's products amount, then our module skips such filters because they are useless.

Example

E.g., your category page contains 14 products, all products have the white color, so displaying color filter with the single option "white" makes no sense, because it does not narrow down amount of the visible products.

Price filter shows a single price range option

Solution

Magento allows to configure price step setting on category and system levels.

So if the price filter shows a single range only for specific category, navigate to that category settings in Catalog > Categories section, open the tab Display Settings and verify the field Layered Navigation Price Step.

If all categories displays a single price range, then you should check the system level price step settings:

  1. On the Admin sidebar, tap Stores. Then under Settings, choose Configuration.
  2. In the panel on the left under Catalog, choose Catalog.
  3. Expand the Layered Navigation. Now verify and adjust the price settings if needed.

Useful Info

For more information about price navigation refer to official Magento 2 documentation.

How to upgrade extension

To upgrade the extension follow these steps:

  1. Backup your store's database and web directory.
  2. Login to the SSH console of your server and navigate to the root directory of the Magento 2 store.
  3. Run command composer require mirasvit/module-seo-filter:* mirasvit/module-navigation:* --update-with-dependencies to update current extension with all dependencies.

    Note

    In some cases the command above is not applicable, it's not possible to update just current module, or you just need to upgrade all Mirasvit modules in a bundle. In this case command above will have no effect.

    Run instead composer update mirasvit/* command. It will update all Mirasvit modules, installed on your store.

  4. Run command php -f bin/magento module:enable Mirasvit_Core Mirasvit_SeoFilter Mirasvit_Scroll Mirasvit_LayeredNavigation Mirasvit_Brand Mirasvit_AllProducts to re-enable extension.
  5. Run command php -f bin/magento setup:upgrade to install the updates.
  6. Run command php -f bin/magento cache:clean to clean the cache.
  7. Deploy static view files

    rm -rf pub/static/*; rm -rf var/view_preprocessed/*; php -f bin/magento setup:static-content:deploy

Disabling the Extension

Temporarily Disable

To temporarily disable the extension please follow these steps:

  1. Login to the SSH console of your server and navigate to the root directory of the Magento 2 store.
  2. Run command php -f bin/magento module:disable Mirasvit_LayeredNavigation Mirasvit_Scroll Mirasvit_Sorting Mirasvit_AllProducts Mirasvit_Brand Mirasvit_SeoFilter Mirasvit_SeoNavigation to disabled the extension.
  3. Login in to the Magento back-end and refresh the store cache (if enabled) and regenerate static content.

Extension Removal

To uninstall the extension please follow these steps:

  1. Login to the SSH console of your server and navigate to the root directory of the Magento 2 store.
  2. Run command composer remove mirasvit/module-navigation mirasvit/module-seo-filter to remove the extension.
  3. Login in to the Magento back-end and refresh the store cache (if enabled) and regenerate static content.

Change Log

1.0.82

(2019-12-02)

Fixed

  • Checkbox filter click returns raw JSON

1.0.81

(2019-11-25)

Fixed

  • Clean selected filters
  • Missing nested categories in filter list

1.0.80

(2019-11-13)

Fixed

  • Issue with category filter on search results page (elasticsearch 6+)

1.0.79

(2019-11-13)

Improvements

  • Add category and product url suffix validator

1.0.78

(2019-11-08)

Improvements

  • Ability to sort attribute options alphabetically

1.0.77

(2019-11-05)

Improvements

  • Ability to use multi-select for Decimal filters
  • Ability to split selected filter option (filter clear block)

1.0.76

(2019-10-28)

Improved

  • Code refactoring

Fixed

  • Price filter multi select

1.0.75

(2019-10-21)

Features

  • display different swatch for category and product page

Fixed

  • ES compatibility

1.0.73

(2019-08-22)

Improvements

  • Ability to use .svg for brand logos

1.0.72

(2019-08-21)

Improvements

  • Ability to display nested categories in filter

1.0.71

(2019-05-24)

Fixed

  • Issue with save attribute

1.0.70

(2019-05-23)

Fixed

  • Upgrade issue (All parts of a PRIMARY KEY must be NOT NULL)

1.0.69

(2019-05-22)

Improvements

  • Ability to display/hide particular filters by category

Fixed

  • Issue with Customer Group ID in price filter

1.0.68

(2019-04-15)

Fixed

  • JS error on edit brand page

1.0.67

(2019-04-11)

Improvements

  • All Brands Page

1.0.66

(2019-03-28)

Improvements

  • Performance issue loading css styles

1.0.65

(2019-03-18)

  • Refactoring

1.0.64

(2019-03-14)

Fixed

  • Price slider filter is not properly displayed in IE11 [#89]()

1.0.63

(2019-03-06)

Fixed

  • White layer appears during using toolbar and hides catalog

1.0.62

(2019-03-04)

Fixed

  • Rating filter displayed multiple times across different filters
  • Properly set additional filters position

1.0.61

(2019-03-01)

Fixed

  • Error during saving product from admin panel

1.0.60

(2019-02-28)

Improvements

  • Integrate Layered Navigation with Elastic Search Engine provided by Mirasvit Search

1.0.59

(2019-02-22)

Improvements

  • Add translation file

1.0.58

(2019-02-19)

Fixed

  • Error during performing compilation command

1.0.57

(2019-02-14)

Fixed

  • Solve error during DI compilation

1.0.56

(2019-02-13)

Fixed

  • Error 'The attribute model is not defined.'

1.0.55

(2019-02-07)

Features

  • SEO for layered navigation: robots meta header and canonical URLs

Fixed

  • Error in logs regarding non-numeric value in price filter
  • Fix error in browser's console regarding absent css file

1.0.54

(2019-01-11)

Fixed

  • Clear all filters button does not work in some cases

1.0.53

(2019-01-10)

Fixed

  • Style issue with 'Shop By' button #50
  • Error in browser's developer toolbar regarding absence of the stylesheet file #50

1.0.52

(2019-01-09)

Fixed

  • Cannot upload logo image for brand page in M2.3

1.0.51

(2019-01-09)

Fixed

  • Error 'Attribute does not exist' occurs when opening CMS pages without preliminary setting the brand attribute
  • Compatibility with Magento 2.1.7 and lower

1.0.50

(2018-12-20)

Fixed

  • Category page gives error when price calculation step set to 'Automatic (equalize product counts)' option

1.0.49

(2018-12-05)

Features

  • Added Smart Sorting module

Fixed

  • Errors during di compilation
  • Brand pages show all brand products (since 1.0.48)

Documentation

  • Layered Navigation troubleshoot
  • Scroll and Sorting modules documentation

1.0.48

(2018-11-29)

Improvements

  • M2.3 support
  • Center brand labels in slider for IE

Fixed

  • Brand page is not opened

1.0.47

(2018-11-23)

Fixed

  • Error displaying brand slider

1.0.46

(2018-11-19)

Improvements

  • Display horizontal filters with mobile themes
  • Center 'Add to Cart' button after catalog update Trigger "amscroll" event after catalog update, JS script listens for this event to center the buttons

Fixed

  • Swatch options' labels of type text are not visible (since 1.0.45)
  • Problem with auto-generated brand URLs whitespaces are not replaced with hyphen sign

1.0.45

(2018-11-09)

Features

  • Ability to set Brand URL suffix

Fixed

  • Brand logo is not visible in product list
  • Filter options missing for swatch filters
    When swatch type is not set for the attribute the
    filter options for that attribute are not visible
  • Checkbox-styled filters are not clickable When option Display options set to Checkbox and Ajax
    is not enabled the filter options do not react on user clicks
    and as a result filtering is not performed.

Documentation

  • update installation instruction

1.0.44

(2018-11-02)

Fixed

  • On Sale filter shows wrong products
    On Sale filter ignores Special Price From and To dates
    and as a result shows products that are no longer on sale.

Feature

  • Ajax Infinite Scroll

1.0.43

(2018-10-24)

Fixed

  • Wrong SEO-friendly filter URL when category URL suffix is set to slash - /

1.0.42

(2018-10-23)

Fixed

  • Product URLs are not SEO-friendly on brand page when 'Use Categories Path for Product URLs' is enabled

1.0.41

(2018-10-11)

Fixed

  • Pagination does not work on search page, when search query composed from 2 words

Documentation

  • Instruction for module disabling

1.0.40

(2018-09-28)

Fixed

  • Multiple filter options marked as checked when option ID exists as the substring in another option
  • JS Error: filters do not work

1.0.39

(2018-09-19)

Fixed

  • Brand page returns 404 when trailing slash is used in the brand's page URL

1.0.38

(2018-09-18)

Fixed

  • Issue with slider

1.0.36

(2018-09-14)

Fixed

  • Swatch multiselector

1.0.35

(2018-09-14)

Fixed

  • issues with js

1.0.33

(2018-09-12)

Fixed

  • LOF after filtration

1.0.32

(2018-09-11)

Improvements

  • Float filters

Fixed

  • Lof Ajax

1.0.31

(2018-09-06)

Improvements

  • Lof Ajax

1.0.30

(2018-08-30)

Improvements

  • Show all categories in filter (for brand and all products page)

1.0.29

(2018-08-28)

Fixed

  • Lof_AjaxScroll compatibility

1.0.28

(2018-08-23)

Fixed

  • Fixed conflict with Aheadworks Product Questions

1.0.27

(2018-08-17)

Fixed

  • Fixed "Notice: Undefined variable: filtersWithoutSuffix in .../LayeredNavigation/Service/SeoFilterUrlService.php on line 292"

1.0.26

(2018-08-16)

Fixed

  • Fixed notice

1.0.25

(2018-08-15)

Fixed

  • Fixed frontend style

1.0.24

(2018-08-15)

Feature

  • Brand slider
  • More from this brand block
  • Brand logo and tooltip on product and category page

1.0.23

(2018-07-20)

Fixed

  • bug: Compatibility with SEO

1.0.22

(2018-07-19)

Fixed

  • Style fix

1.0.21

(2018-07-19)

Feature

  • All products page

1.0.20

(2018-07-16)

Fixed

  • Fix default title
  • Compatibility with SEOFilter version 1.0.5

Feature

  • Ability add banner to brand page

1.0.19

(2018-07-04)

Fixed

  • Fixed incorrect items count in navigation for Elasticsearch (magento ee, Elasticsearch, for some stores)

1.0.18

(2018-06-27)

Fixed

  • Ability use catalog.leftnav for horizontal navigation (need for some stores)

1.0.17

(2018-06-22)

Fixed

  • Fixed brand images style

1.0.16

(2018-06-21)

Fixed

  • Fixed an issue when only 10 items in navigation ( for Elasticsearch 1.7.x )

1.0.15

(2018-06-14)

Fixed

  • Elasticsearch compatibility if multiselect enabled (magento ee)

1.0.14

(2018-06-06)

Fixed

  • Fix brand composer

1.0.13

(2018-06-06)

Documentation

  • docs: Documentation improvement

Feature

  • Brands

1.0.12

(2018-05-23)

Fixed

  • Fixed incorrect urls for additional filters in navigation
  • Fixed an issue with "%2C" in url without ajax if slider enabled

1.0.11

(2018-05-17)

Fixed

  • Multi filter issue + issue with price slider (if from is 0)

1.0.10

(2018-05-08)

Fixed

  • Fixed error if search elastic work in mysql mode

1.0.9

(2018-05-08)

Fixed

  • Fixed issue with "pub" folder in additional css path

1.0.8

(2018-05-04)

Fixed

  • Compatibility with SearchElastic

1.0.7

(2018-04-30)

Fixed

  • Fixed %2C symbol in pager url

1.0.6

(2018-04-30)

Improvements

  • Redirect to correct url if js error

1.0.5

(2018-04-30)

Fixed

  • Fixed filter disappearance when click on ajax paging

1.0.4

(2018-04-18)

Improvements

  • Magento 2.1 compatibility

1.0.3

(2018-04-18)

Improvements

  • Ability use scroll for navigation links

1.0.2

(2018-04-12)

Fixed

  • Fixed style issue for Safari browser

1.0.1

(2018-04-06)

Documentation

  • Added documentation

1.0.0

(2018-04-03)

  • Initial release