Layered navigation
Layered navigation makes it easy to find products based on category, price range, or any other available attribute. Layered navigation usually appears in the left column of search results and category pages and sometimes on the home page. The standard navigation includes a Shop By list of categories and price range. You can configure the display of layered navigation, including product count and price range.
Filterable attributes
Layered navigation can be used to search for products by category or by attribute. For example, when a shopper chooses the Mens/Shorts category from the top navigation, the initial results include all products in the category. The list can be filtered further by choosing a specific style, climate, color, material, pattern, or price—or a combination of values. Filterable attributes appear in an expanding section that lists each attribute value. As an option, the list of products with matching results can be configured to include products with, or without, a match.
The attribute properties, combined with the product input type, determine which attributes can be used for layered navigation. Layered navigation is available only for anchor categories, but can also be added to search results pages. The Catalog Input Type for Store Owner property of each attribute must be set to Yes/No, Dropdown, Multiple Select, or Price. To make the attributes filterable, the Use in Layered Navigation property of each must be set to either Filterable (with results) or Filterable (no results).
Example: Filterable attributes with results
Example: Filterable swatch values displayed with no result
The following instructions show how to set up basic layered navigation with filterable attributes. For advanced layered navigation with price steps, see Price Navigation.
Step 1: Set up the attribute properties
-
On the Admin sidebar, go to Stores > Attributes > Product.
-
Browse or use filtered search to find an attribute in the list and open it in edit mode.
-
In the left panel, choose Storefront Properties and set Use In Layered Navigation to one of the following:
-
Filterable (with results)- Layered navigation includes only those filters for which matching products can be found. Any attribute value that already applies to all products shown in the list should still appear as an available filter. Attribute values with a count of zero (0) product matches are omitted from the list of available filters. The filtered list includes only the products that match the filter. The products list is updated only if the selected filters change what is shown. -
Filterable (no results)- Layered navigation includes filters for all available attribute values and their product counts, including products with zero (0) product matches. If the attribute value is a swatch, the value appears as a filter, but is crossed out. Price-layered filtering is not supported by this option, and does not affect Price filters.
-
-
Set Use In Search Results Layered Navigation to
Yes.
-
Repeat these steps for each attribute that you want to include in layered navigation.
No, the Use in Search Results Layered Navigation setting is not displayed and the product attribute is not used in the search with any Use in Layered Navigation setting value.Step 2: Make the category an anchor
-
On the Admin sidebar, go to Catalog > Categories.
-
In the categories tree, select the category where you want to use layered navigation.
-
Expand
Yes.
-
Click Save.
Step 3: Test the results
To test the setting, visit your store and navigate to the category from the main menu. The selection of filterable attributes appears in the layered navigation of the category page.
Search, filter, and review the displayed products.
Remove filterable attribute values from layered navigation
Layered navigation includes filters for all available attribute values and their product counts, including products with zero (0) product matches (as shown in the following image).
This result can make it difficult for customers to select a preferred product, and there is no need to display attribute values ​​with 0 products in the front end.
You can use the following steps to remove filterable attribute values with 0 Products from the layered navigation:
-
On the Admin sidebar, go to Stores > Attributes > Product.
-
Browse or use filtered search to find an attribute in the list and open it in edit mode.
-
Under Attribute Information , click Storefront Properties.
-
For Layered Navigation, choose
Filterable (with results).
-
Click Save Attribute.
Price navigation
Price navigation can be used to distribute products by price range in layered navigation. You can also split each range in intervals. There are a few ways to calculate price navigation:
- Automatic (Equalize Price Ranges)
- Automatic (Equalize Product Counts)
- Manual
With the first two methods, the navigation steps are calculated automatically. The manual method lets you specify a division limit for price intervals. The following example shows the difference between price navigation steps of 10 and 100.
Iterative splitting provides the best distribution of products among price ranges. With iterative splitting, after choosing the $0.00-$99 range, the customer can drill down through several subranges of prices. Price-range splitting stops when the number of products reaches the threshold set by the Interval Division Limit.
Example: Price navigation steps
Configure price navigation
Excluding Tax or Including Tax). For the Calculation Settings, check the Catalog Prices value. And for Price Display Settings, check the Display Product Prices in Catalog value. If these have different values, price filters in the layered navigation may not properly filter and sort products by price.-
On the Admin sidebar, go to Stores > Settings > Configuration.
-
In the left panel, expand Catalog and choose Catalog underneath.
-
Expand
By default, Display Product Count is set to
Yes. If necessary, deselect the Use system value checkbox to change this setting.
For a detailed list of these configuration options, see Layered Navigation in the Configuration Reference.
-
Set Price Navigation Steps Calculation for one of the methods in the following sections.
-
When complete, click Save Config.
Method 1: Automatic (equalize price ranges)
Leave Price Navigation Steps Calculation set to Automatic (Equalize Price Ranges) (default). This setting uses the standard algorithm for price navigation.
Method 2: Automatic (equalize product counts)
-
Set Price Navigation Steps Calculation to
Automatic (equalize product counts). -
To display a single price when multiple products with the same price, set Display Price Interval as One Price to
Yes. -
For Interval Division Limit, enter the threshold for the number of products within a price range.
The range cannot be further split beyond this limit. The default value is
9.
Method 3: Manual
-
Set Price Navigation Steps Calculation to
Manual. -
Enter a value that determines the Default Price Navigation Step.
-
Enter the Maximum Number of Price Intervals allowed, up to
100.
Configure layered navigation
The layered navigation configuration determines if a product count appears in parentheses after each attribute, and the size of the step calculation that is used in price navigation.
-
On the Admin sidebar, go to Stores > Settings > Configuration.
-
In the left panel, expand the Catalog section and choose Catalog underneath.
-
Expand the Layered Navigation section.
note note NOTE If necessary, first deselect the Use system value checkbox to change these settings. -
To display the number of products found for each attribute, set Display Product Count to
Yes. -
Set Price Navigation Step Calculation to
Automatic (equalize price ranges). -
When complete, click Save Config.