Enhancing your Magento 2 store's user experience is crucial for fostering a positive shopping journey. One powerful tool is the Improved Layered Navigation extension, a feature-rich navigation module designed to add convenience to your website. This extension provides a flexible vertical and horizontal navigation menu, allowing customers to filter the store catalog based on various product attributes.
In this guide, we will walk you through the process of configuring layered navigation in your Magento 2 store. We'll explore essential settings, enabling you to boost the value from layered navigation for an improved customer shopping experience.
Why Layered Navigation is Essential in Magento 2
Navigating through a vast array of products on an e-commerce site can be a daunting task for customers. Thanks to layered navigation in Magento 2, the challenges of product exploration are elegantly met, allowing users to filter and refine their searches based on specific product attributes.
Streamlining the Search Process
Layered navigation simplifies the search process by introducing a dynamic way to filter products. You can help customers effortlessly narrow down their choices by offering filters such as brand, price range, or any custom attribute relevant to your store. You can even create a custom product collection with layered navigation in your Magento 2 store. This not only saves time but also enhances the overall shopping experience.
Improved User Experience and Satisfaction
With the Improved Layered Navigation extension, users gain access to a user-friendly interface that seamlessly integrates vertical and horizontal navigation menus. This not only adds a visually appealing aspect to your website but also ensures that customers can easily find the products they're looking for.
Increased Conversion Rates and Sales
An efficient navigation system directly contributes to higher conversion rates. By empowering customers to quickly locate their desired products, you reduce bounce rates and encourage more purchases. The Improved Layered Navigation extension becomes a catalyst for turning casual browsers into satisfied customers, thereby boosting your online sales.
Now, let’s look at the step-by-step instructions for configuring layered navigation to maximize its impact on your online business.
Key Settings
To harness the full potential of the Improved Layered Navigation extension in Magento 2, begin by navigating to the Stores → Configuration → Improved Layered Navigation. Here, you'll find all the options to tailor the extension to meet your specific needs.
Magento 2 Product Filter: Submission Options
You can choose different filter application modes for desktop and mobile. Select "Instantly" mode if you want users to see filters get applied one by one, on the fly. Alternatively, go for "By Button Click" if you prefer to give users the freedom to choose all the filters without interruptions and have them applied in bulk by clicking an Apply button.
Customizing Scroll and Sidebar Behavior
Enabling AJAX is crucial for a seamless shopping experience. Amasty’s Layered Navigation allows your customers to select multiple filter options while the page dynamically loads, eliminating the need for page reloads and making the entire shopping process fast and efficient.
Configure the behavior after AJAX loads by enabling the "Scroll to Top after AJAX Load" setting. Choose from three options:
- Yes (to Listing Top)
- Yes (to Page Top)
- No
To enhance user experience, add vertical scrolling to the filter block after specifying the maximal filter size (in pixels) that will be displayed without vertical scrolling. For desktop users, enhance the user experience by choosing "Enable Sticky Sidebar". This pins the sidebar with filters, ensuring that it remains in the user's sight as they navigate your online store.
Highlighting Selected Filters
You can also customize the appearance of selected filters in the Category Tree by choosing default settings or specifying a custom color for the text. See how it looks if you set the custom color to #EF4DEE.
Note that this functionality is part of an active product subscription or support subscription and is temporarily unavailable for the Hyvä Theme.
Applying Filters on Desktop/Mobile with Varnish
If you want to use diverse cache types for mobile and desktop devices, insert the following code into the section vcl_hash within 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");
}
Slider Settings for Price Range
In the "Slider Settings" section, you can manually choose the style and color for a Price Slider from five available options:
- Default
- Improved
- Volumetric Gradient
- Light
- Dark
Such rich customizations of the slider color and its transparency levels allows you to align the Layered Navigation with your website's design.
Visibility Settings for Single-Select and One Available Option Filters
Our Layered Navigation allows you to leave single-select filters visible after selection or hide them based on your preferences. Similarly, you can hide filters with only one available option by setting "Hide Filters with One Available Option" to 'Yes'. You can also specify the number of unfolded options, requiring customers to click the 'More' button to see additional filter choices.
Excluding Out-of-Stock Configurable Options
Optimize search results by excluding out-of-stock configurable product options. Set this option to 'Yes' and ensure its visibility by configuring Stock Options in Stores → Configuration → Catalog → Inventory, verifying that the option "Display Out of Stock Products" is set to 'Yes'.
Filters Configurations
Configuring filters is a pivotal aspect of tailoring Improved Layered Navigation to meet your specific needs. The extension provides a comprehensive set of configurations to fine-tune the behavior and appearance of various Magento filters.
Magento 2 Category Filter
By navigating to Stores → Configuration, you can fine-tune the behavior and presentation of category filters. First, determine whether the filter should be enabled and toggle to 'Yes' to activate it. Then, set the filter's position (numerical) to define its place in the category tree. Finally, hit the 'Category Filter Settings' button to access additional configurations of the Magento 2 layered navigation category filter.
Vertical and Horizontal Magento 2 Layered Navigation
Leverage the flexibility of the Magento 2 Layered Navigation extension to display each filter block in a vertical, horizontal, or both orientations. To adjust filter positions, navigate to Stores → Attributes → Product, select the relevant attribute, proceed to the Improved Layered Navigation tab, and choose one of the three modes in the "Show in the Block" field. See the storefront examples for vertical and horizontal navigation block configurations.
Stock Filter
Enable the In Stock/Out of Stock filter by toggling the "Enabled" option. You have the flexibility to preselect a label, determine its position, and select the preferred display mode.
Consider the product's salable quantity within the filter by activating the corresponding option. When enabled, the salable quantity is factored into the "In Stock" filter, displaying relevant information on the front end.
Choose where the filter appears by selecting from the following options:
- Sidebar
- Top
- Both
Additionally, you can enhance the user experience by adding a tooltip, specifying text that will be displayed when users hover over the stock filter.
The "Expand" option allows for automatic expansion of the filter immediately after the page is loaded. You can tailor this behavior further by choosing 'Expand for desktop only' to expand only for desktop users or allowing it to work dynamically based on the custom theme functionality (option ‘Auto’).
Price & Decimal Filters
Price filters represent the cost of products, and Decimal attributes refer to any price-related attribute except for the actual product price itself. They are commonly used for storing values such as size, length, and weight, offering the flexibility of specifying any type of value in decimals rather than selecting from predefined variants.
Various display property settings are available for this filter type, including:
- Display Mode (Dropdown / Ranges / Slider / From-To Only)
- Minimum and Maximum Slider Values – offer control over the slider's limits, ensuring convenient and precise filtering.
- Slider Step – allows specifying the step of the slider, whether integer or fractional.
- Measure Units
- Unit Label
If you want to hide zero decimals in your filter, a straightforward configuration can be made by navigating to Stores → Product → Select 'Price' attribute → go to the Improved Layered Navigation tab and set 'Hide Zero Decimal' to 'Yes'.
Note that in Magento 2 layered navigation, the multiselect option is unavailable for both Price and Decimal filters.
Swatch Filters
The presentation of attributes from Catalog Input Type for Store Owner = Visual Swatch / Text Swatch in Magento takes a distinctive approach, showcasing them as either images or pictograms accompanied by texts. Consequently, the configuration settings in Improved Layered Navigation cater to this unique display.
Within the Display Properties section, users can access a range of settings to tailor the appearance of swatch filters:
- Display Mode (Labels / Images / Images & Labels / Text Swatches)
- Show in the Block
- Sort Options By (Position / Name)
- Show Product Quantities (only applicable for Labels, Dropdown, Images & Labels mode)
- Show Search Box (only applicable for Labels and Images & Labels)
- Number of unfolded options (excluding Magento Layered Navigation Dropdown mode)
- Expand, Tooltip, Visible In Categories, etc.
‘On Sale’ Filter
The 'On Sale' Magento 2 filter considers Special Price and Catalog Price Rules. Configure settings for the 'On Sale' filter by simply choosing to display it on the left sidebar, top menu, or in both positions.
Experiment, Monitor, and Adjust
Configuring layered navigation in Magento 2 is a crucial step in optimizing your online store for a seamless and user-friendly experience. The Improved Layered Navigation extension provides a comprehensive set of tools to tailor your navigation system, ensuring it aligns with your brand identity and meets the diverse needs of your customers.
Incorporate these features wisely, and the Improved Layered Navigation extension will not only enhance your customers' journey but also contribute to the long-term success of your Magento 2 store. Explore the possibilities, refine your settings, and monitor user journeys to provide the best shopping experience.
