The navigation menu plays an important part in the customer funnel effectiveness, 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.
- How to edit the default Magento 2 navigation menu?
- How to create a custom layered navigation menu in Magento 2?
- Useful links
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.
The top menu of your Magento 2 website represents the structure of the catalog. It can have up to 4 levels of nesting:
The 1st level is the default category. Its name doesn’t appear in the menu.
The 2nd level is the main menu displayed on the frontend. In the default Luma theme, this level includes categories like “What’s New”, “Women”, “Men”, “Gear”, “Training”, and “Sale”.
At the 3rd level, you can split the main categories into several sections. For example, household appliances can include washing machines and dishwashers.
The 4th level gives even narrower subcategories. For example, washing machines can be segmented by brands.
To configure the depth of your top menu, follow these steps:
#1. Log in to the admin panel and navigate to Stores > Settings > Configuration.
#2. In the Catalog tab, choose Catalog and go to the Category Top Navigation section.
#3. In the Maximal Depth field, enter the number of subcategories that you want to show in the top navigation.
#4. Save the changes.
How to change default filters in your Magento?
#1. Say, your customer wants to find blue shorts. To activate filtering by colors (or any other attribute) 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 it 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?
If you want to extend the default Magento 2 settings, you can use one of our solutions. Let’s consider them in detail.
Layered Navigation Lite is the module that extends 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:
• Layered Navigation Lite has 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.
The pro version of this plugin includes all the features we have described above, and advanced options.
• The extension has 5 display modes for your filters: labels, drop-down, images, images and labels, text swatches. With their help, you can improve user experience.
• If you have multiple filtering options, you can use dependencies to display only the needed filters and hide the others.
• To make your filters even more convenient, you can create attribute mapping. For example, if you have goods with a similar color but different shades, you can combine them in one filtering option by mapping them up in the admin panel:
• Advanced category tree gives you the freedom to display subcategories most conveniently by choosing between the drop-down and labels modes. Add “See more”/less” buttons, slider with subcategories, let buyers choose multiple subcategories, and more.
• Use advanced filters like “New”, “On Sale”, “Rating”, “In Stock” or create custom ones:
• Moreover, the extension includes all the features of the Shop By Brand module like:
- brands slider
- CMS pages with the brand content
- brand filters in the navigation
- “More from this label” block
You can promote specific products, brands, or groups of products, use drag-and-drop to sort and pin products on a page according to your needs, enable sorting by name, stock, price, newest. Make product selection as smooth as possible by autoloading search results. Add “Back to top” and “Load More” buttons.