For more details see how the Improved Layered Navigation extension works.
With a feature-rich navigation module, you will easily enhance customer shopping experience by adding 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.
NOTE: Amasty has launched the new Elastic Search for Magento 2 extension that can principally quicken your catalog.
To get the access to Magento 2 layered navigation settings, please go to Stores → Configuration → Improved Layered Navigation
If you need different types of cache for mobile and desktop devices, please, insert this code (line 2-8) into the section vcl_hash in the varnish configuration file (vcl).
sub vcl_hash { if (req.http.X-UA-Device ~ "^mobile" || req.http.X-UA-device ~ "^tablet" ) { hash_data("mobile"); } else { hash_data("desktop"); } }
Enable AJAX - Enable AJAX to avoid page reloads.
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.
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.
Leave the Single-choice Filter Visible after Selection - Disable the setting to hide the filter when the value is selected.
If the setting is set to No, the option with the only one choice will become hidden after the selection:
If you enable the option, it will remain visible:
Number of Unfolded Options in State - Specify the number of unfolded options. To see other options, a customer should click the 'More' button.
Here you can customize and add such Magento 2 category attributes as title and description.
Add the title & description of the selected filters - specify any filters to which you want to apply custom title and description.
Add filter title - Select the place where filter title will be displayed:
Separate Category name and title with Specify the separator for a category name and a title
Add filter description - Specify where to display a custom filter description:
Replace Category Image - Choose whether to replace category image with a custom filter image.
Replace Category CMS Block - Set this option to 'Yes' to replace a category CMS block.
Display Mode - Choose the display mode for a Children Categories Block. Two options are available: either to show subcategories' names with their icons or without the ones.
Category's Thumbnail Image Size (the field is available when the display mode “Category Thumbnail Images” is chosen) - Specify the size of thumbnails, which will be displayed in the block on the category page.
Show Image Labels (the field is available when the display mode “Category Thumbnail Images” is chosen) - Select Yes to display the titles of the subcategories.
Enable Slider - Set Yes to display block as a slider, otherwise it will be displayed as a static block.
Items per Slide - Specify how many items will be displayed in the slide on the page. Other thumbnails will be available with the scroll.
Categories - Choose whether to show children categories block for all categories or enable/disable children categories block per chosen categories.
Add the Meta-data of the selected filters - Select the filters and the meta-data category attributes of the applied filters Magento 2 will add to the category and brand pages.
Add filter title to meta title - Choose whether to add and additional filter title to meta title.
Title tag separator - specify the title tag separator.
Add filter description - Select the place where filter description will be displayed:
Description tag separator - Specify the description tag separator.
Add filter Title to meta-keywords - Enable the option to automatically add a filter title to meta-keywords.
Enabled - Enable In Stock/Out of Stock filter. You can preselect a label, position and the display mode.
Show in the block - Choose where to display the filter:
Tooltip - Specify tooltip text that will be displayed on a mouse hover for the stock filter.
Display Mode - Select filter display mode: labels or dropdown.
Specify the position for a category filter as well:
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.
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.
Display Mode - Use ‘Dropdown’ display mode for multiselect, price, visual swatch input types.
Display Mode - Use ‘Slider’ display mode for price attribute.
Min value/Max value - 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.
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.
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.
Tooltip - Specify the tooltip text that will be displayed for a specific filter on mouse hover.
If you want to display only particular options in the filters, you should make them Featured.
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:
There are several SEO settings for each filter available.
Group Title - Specify a different titles for attributes' group for each view store individually.
Group Code - Specify a group code that will be used in the URL of the filter results page by default.
Status - Enable filter group on the frontend.
Swatch - Select the main thumbnail swatch for the whole group.
Alias - Specify a custom alias if necessary that will be used in the URL of the filter results page.
Position - Set the display position for your frontend filters block. This setting defines the position only among the Group Attribute Options (created within the same attribute). It doesn't affect the positioning of common attribute options in the filter.
Attribute - Select an attribute type for which you want to create a group.
Attribute options - Once the attribute is selected you'll see corresponding attribute options. Select the ones that you want to gather in a group.
Simple attribute-filters are presented in Magento by design. They are derived from the attributes of Catalog Input Type for Store Owner=Multiple Select/Dropdown. An attribute becomes a filter, if there is a Use in Layered Navigation setting.
(the specific for simple attribute-filters are highlighted)
Show Search Box adds a text field for the quick search under the options. It hides the options that don't correspond with the request.
Number of unfolded options indicates options that will be displayed right after the page is loaded. The other options are hidden with the Show more button. This is useful, when there are many options.
Expand - Expand filter right after a page is loaded. The setting may be helpful for the themes, where filters are hidden by default.
Tooltip - Add a pictogram to a filter. When you hover over a pictogram, a pop-up hint appears.
Visible in Categories - It defines what categories includes a filter.
Show only when any option of attributes below is selected - It allows to manage a correlation between one filter visibility and the several others. Thus, if you specify a few other attributes here, the filter will be visible only if one of the specified filters is used by a visitor.
Show only if the following option is selected - It allows to manage a correlation with other filters in more detail. Specify individual options of another filter, rather than a filter all-in-all.
Multiple Values Logic - Show products with any values. A product is selected, if at least one of the filter's options match with its attributes' values.
Multiple Values Logic - Show products with ALL values only. A product is selected, if all the filter's options match with its attributes' values.
Generate SEO URL. When you filter by this attribute, it removes the parameter from the GET-request and embeds it in the main part of the URL with alias, optimized for the search engines. For instance, category/cotton.html instead of category.html?material=46. It is active, if SEO URL generator is enabled in the general SEO settings.
Allow Google to INDEX/FOLLOW the Category Page with the Filter Applied - the option allows to block the indexing and prevent the search crawlers from going through links on the pages, where the filter is applied. It is implemented with the meta-tag robots. Active, when the option Allow the Module to Modify Robots Meta Tag is enabled in the SEO general settings.
Add rel=“nofollow” to filter links allows to block the path to links that are unavailable by design. Thus it decreases the stress on a search robot. It is active, when the option Automatically add rel=“nofollow” to filter links when required is enabled in the SEO general settings. You can disable this parameter, when the attribute takes part in the Custom Page formation. This will help the search robot reach the necessary page.
The attributes from Catalog Input Type for Store Owner = Visual Swatch / Text Swatch in Magento are displayed in a particular way: as images or pictograms with texts. That is why, the kit of settings in Improved Navigation is different.
Available settings in the Display Properties section:
It is possible to specify particular filter options to improve SEO. When you edit an attribute, click the Settings button in front of a necessary option. See a window with settings:
Meta Data and Page Content are added to the page according to the settings specified in the sections Improved Layered Navigation > Category Title and Description Improved Layered Navigation > Category Meta Tags. It is added, when you filter products by particular option. Also these settings are applied on the page of the appropriate brand, replacing data set by default.
Improved Layered Navigation automatically generates URL Alias for the filter options. To enable this, leave an empty field.
Price & Decimal are filters that are featured in Magento by design.
Decimal is any attribute of the price type, except the price itself. Decimal attributes are often used to store the values, that don't relate to the price (e.g., size, length, weight, etc). This is convenient, as far as you can specify any arbitrary values in decimals, rather than selecting them from variants.
SEO URL is not available, as Price and Decimal attributes are added to the URL as a GET parameter: category.html?price=100-200
If the filter is applied, then the robots tag takes the value “noindex, nofollow” (if Allow the Module to Modify Robots Meta Tag is enabled in the SEO settings). Accordingly, direct links to filtering should have the attribute rel=“nofollow” (if Automatically add rel=“nofollow” to filter links when required is enabled in the SEO settings)
If a store's currency differs from the base currency, the values are recalculated according to the rates only for the Price filter, but not for Decimal.
(the specific ones for Price and Decimal filters are highlighted)
Add From-To Widget adds a widget to the filter and offers an alternative filtering method in addition to the selected Display Mode.
Minimum Slider Value and Maximum Slider Value narrow the limit of the slider for the convenient filtering.
Slider Step allows you to specify the step of the slider. It can be either an integer or a fractional number.
Measure Units and Unit Label determine the unit of measurement. By default, this is the currency of the current store. It is used on the frontend: in the filter block and in the Currently Shopping By section.
Enable All-Products Page - Set the option to 'yes' to enable the All Products page, containing all store items and layered navigation filters.
All Product Page URL - Specify an appealing URL for the page, e.g. all-products.html.
Brand Attribute - It is possible to setup nice short URLs for pages of a brand attribute (or any other one you prefer), e.g.:
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:
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.
Display Tooltip - Multi-select the directories, where you would like to display a tooltip with a brand info. Possible variants to display:
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}.
Catalog Input type for store owner - select an input type for the catalog. Choose on of 3 available variants:
Slider Options - Enable the display in a brand slider (if necessary), specify the brand position in a slider and upload a slider image. See the details on how to configure a brand slider here.
Create All Brands Page - To create a page you need to:
Show Brand Logo - Enable to display brand logos in the all-brands listing.
Image Max Width (Height) - Specify the size of logos in the listing.
Enable Search - Enable a searchbox on the all-brands listing page.
Enable Filter by Character - Enable to display all the alphabet characters and possibility to click them.
Show Characters without Brands - Enable to display only characters.
Show Products Quantity - Enable to display a marker with a number of items assigned to a particular brand.
Show Brands Without Products - Enable to display only the brands that have products assigned to them.
Widget Code - Use this code to add a brands slider to any CMS page or block. It’s also possible to place the slider to the All brands page.
Visible Items Quantity - Specify how many brands will be displayed in a slider at a time.
Sort By - Select a sorting type for slider items – either by name or by position.
Slider display settings - Configure slider display parameters: maximal slider width, image width/height.
Show Brand Label - Choose whether to display text labels together with brand logos.
Show Buttons - Enable previous/next buttons display.
Infinity Loop - Enable continuous loop mode for slider images.
Simulate Touch - Let customers click and drag slider images.
Show Pagination - Enable pagination display below the slider.
Autoplay - Switch on/off the autoplay option.
Enable - Display a block of products of a current product's brand. A block will be displayed at the bottom of a current product page.
Title - Specify a title of a block, using a Brand variable.
Max Product Count - Specify a number of random products to display in a block.
Display Brand Logo on Product Page - Enable a brand logo display on the products pages.
Display Short Description on Product Page - Enable a label short description on the products pages.
Brand Logo Width & Height, px - Specify size of a brand in pixels.
Display Brand Logo on Product Listing - set to Yes to show brand logos on category pages.
Brand Logo Width and Height - adjust logo resolutions. Specify the value in pixels (e.g. 10) or percent (e.g. 10%). Leave empty to use default image size.
The additional functionality allows admins to customize product sorting on brand pages.
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:
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:
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.
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:
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.
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.
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.
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
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'.
Display Mode - Choose one of two display modes: Labels or Dropdown.
Render All Categories Tree - Specify to what extend the tree should be expanded.
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:
Category Tree Depth - Specify the maximal level number for a category tree.
Shown in the Block - Select where to display the filter:
Category Tree Display Mode - Specify the mode for category tree presentation. You can display only text, only images, or both.
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.
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.
Top CMS Block -Select the CMS block on the base of which the page should be created.
Meta Tags Tab - Specify meta title, description and keywords for each custom page you create.
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.
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.