The navigation menu is a significant part of the Magento 2 store, but only 16% of e-commerce websites have enough filtering types, attractive design, and clear logic.
So we decided to look into how to create a convenient navigation menu with filters and sliders.
Let’s begin without further ado!
Do you want to get advanced filtering options for only $99? Take a look at Price Slider & Filters!
• Fast AJAX filtering;
• Handy multiselect;
• Vertical scrolling;
• Mobile devices compatibility;
• Price slider and more.
Boost your sales with smart navigation filters!
Default Magento has built-in layered navigation. It allows you to set filters by any product attribute, such as category or price. Let’s look into the matter.
How to change filters in your Magento?
#1. Say, your customer wants to find blue shorts. To activate filtering by colors (or any other attribute) you need to go to Stores>Attributes>Product:
#2. Then find a “color” attribute on the grid:
#3. As you can see, it’s not used in the navigation system. Let’s turn in on. Click on it to edit and go to Attribute Information>Storefront Properties. There you will see the next settings:
#4. Choose one of two options: Filterable (with results) or Filterable (no results) – in the Use in Layered Navigation line. The first option shows only those filters for which matching products can be found and the second shows all the possible filters. Set Yes in Use in Search Results Layered Navigation and configure the Position of this attribute in the navigation block.
#5. After that, you need to make the category an anchor. For this, go to Catalog>Category and select the needed category from the category tree.
#6. In the Display Settings section find the Anchor line and set Yes:
Save the changes and go to the frontend to test the result. You will get a similar result:
Magento offers 3 types of price navigation:
- Automatic (Equalize Price Ranges);
- Automatic (Equalize Product Counts);
The first two methods calculate navigation steps automatically by price ranges or by product number. And the Manual method allows you to set the value of the navigation step.
#1. Go to Stores>Settings>Configuration:
#2. Choose Catalog in the Catalog tab:
#3. Open the Layered Navigation tab and set the options you need:
Save the configurations.
But what if you want more advanced configurations?
Price Slider & Filters is the module that expands default Magento 2 settings. What are the benefits?
• It uses AJAX filtering to provide fast browsing of the results. Say, your customer is searching for the white hoodie. Usually, if they choose the white color, the page reloads. But with AJAX technology only the part that changes will be reloaded.
• This module provides multiple choice of filters. For instance, a user is looking for a sweatshirt from cotton or fleece. So they can choose both materials in the filter section and get relevant results:
• Price Slider & Filters has the advanced design. Say, you have a long list of available materials. So you can add vertical scrolling to make this filter compact. Also, it shows the number of items that are available in your shop and is fully compatible with mobile devices.
• Let your customers set the price range filter. This plugin allows you to create a handy price slider in Magento.
And you can easily set all these useful features in your Admin Panel. Go to Stores>Configuration>Amasty Extensions>Price Slider & Filters:
There you can turn on AJAX technology and scrolling on top after results refreshing. Choose the filters for which you want to set the multiselect. Enable the price slider and configure how it will be shown by setting the price step. Add Vertical Scrolling for blocks that are higher than a certain size in pixels.
Allow your customers to find exactly what they want and increase your revenue!
If you are looking for some additional navigation features, we can offer you 2 more advanced solutions. Take a look at these extensions:
• Add brand filter to the navigation menu;
• Create more from this brand block;
• Add brands dropdown to the top menu;
• Make all brands page with the search box;
• Add brands slider to the category page.