How to Setup Layered Navigation in Magento 2

• What is Layered Navigation for Magento?

• Setting Up Layered Navigation in Magento 2

• How to Customize Layered Navigation Filter Attributes?

• How to Enable Layered Navigation for a Selected Category in Magento 2?

• How to Disable Layered Navigation in Magento 2?

• Price Navigation Methods in Magento 2

• Configure Price Navigation

• Best Magento 2 Layered Navigation Extensions

• FAQs

• Summary

What is Layered Navigation for Magento?

Layered Navigation in Magento 2 simplifies product browsing. Customers can filter search results based on attributes like size, color, and price. It enhances user experience and boosts conversion rates. It also reduces page load times. Magento 2 offers customization options. Store owners can tailor the navigation system to their brand and audience preferences.

Improved User Experience: Layered Navigation simplifies product browsing. Users can efficiently narrow search results, enhancing the shopping experience.

Enhanced Search Functionality: Users can filter products to match preferences. This results in more accurate search results beyond basic keyword searches.

Increased Conversion Rates: Simplifying product discovery increases conversion rates. Customers can quickly find products that meet their requirements, boosting sales and revenue.

Faster Loading Times: Layered Navigation reduces page load times. It updates product listings with selected filters. It enhances website performance and user satisfaction.

Customization Options: Magento 2 provides extensive customization options for Layered Navigation. Store owners can customize filtering experiences by configuring attributes, layout, and advanced options. It allows them to tailor the experience to suit their brand and audience.

Setting Up Layered Navigation in Magento 2

Step 1: Accessing the Magento 2 Admin Panel

1. Open your web browser and go to your Magento Admin Panel.

2. Login with your administrator Username and Password.

Step 2: Navigating to the Layered Navigation settings

1. Once logged in, you'll see the admin dashboard.

2. In the admin dashboard, click Stores > Settings > Configurations.

3. In the Configuration menu, expand the Catalog section and select Catalog.

Step 3: Enabling layered navigation

1. Scroll down to find the Layered Navigation section.

2. Expand this section to see the layered navigation settings.

Step 4: Configure the product settings as required

1. By default, the Display Product Count is set to Yes.

2. If needed, uncheck the Use system value checkbox to disable layered navigation.

How to Customize Layered Navigation Filter Attributes?

1. Go to Store > Attributes > Product.

2. Choose the attribute you wish to incorporate into the layered navigation, such as the Cost Attribute.

3. Navigate to the Storefront Properties section of the Attribute Information.

4. From the Use in Layered Navigation dropdown, choose Filterable (with results). This option will display the product count within the associated category for this attribute.

5. Ensure that Use in Search Results Layered Navigation is set to Yes for this attribute to appear on search results pages.

6. Click Save Attribute to implement the changes.

How to Enable Layered Navigation for a Selected Category in Magento 2?

1. Start by going to the Catalog and then click on Categories.

2. From the Category Section on the left side, select the particular category where you want to show layered navigation.

3. Within the Display Settings of the selected category, switch the Anchor option to Yes. This will enable layered navigation for that category.

4. Once you've made changes, save by clicking the Save button.

5. To confirm your modifications, go to the front store and review the outcomes.

How to Disable Layered Navigation in Magento 2?

Method 1: Hide Product Attributes in Layered Navigation

1. Go to Store > Attributes > Product.

2. From a list of attributes, pick the one you wish to hide from layered navigation.

3. On the left side, select Storefront Properties to reveal them.

4. Find Use in Layered Navigation and change it to No.

5. Save your changes by clicking the Save Attribute button.

Method 2: Remove Layered Navigation From Category Pages

1. Go to Catalog > Categories.

2. Access the Display Settings tab from the right menu. Verify the Anchor option is set to No.

3. Save your changes by clicking the Save button.

Method 3: Using catalog_category_view.xml

1. Locate the File: Navigate to the directory app\design\frontend[theme]\Magento_Catalog\layout.

2. Open catalog_category_view.xml: Access the file named catalog_category_view.xml.

3. Insert Code: Copy the following code snippet and paste it into the file.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="catalog.leftnav" remove="true"/>
</body>
</page>

Price Navigation Methods in Magento 2

1. Automatic Method

This default method automatically calculates price navigation steps based on the price range.

2. Automatic Method

This method calculates the price navigation step based on the number of products. If chosen, extra fields will appear:

• Display Price Interval as One Price: Toggle to Yes to display the price interval when all prices in a specific interval are equal.

• Interval Division Limit: Set the number of products that won't be divided into subintervals (default is 9).

3. Manual Method

This method enables you to specify a division limit for price intervals. If selected, new fields will appear:

• Default Price Navigation Step: Determines the number of products included in each step.
• Maximum Number of Price Intervals: Sets the maximum number of price steps.

With the first two methods, navigation steps are automatically calculated. The manual method allows you to set a division limit for price intervals.

Configure Price Navigation

1. Choose one of the mentioned methods for Price Navigation Step Calculation.

2. If you wish to display the Category Filter, set Display Category Filter to Yes.

3. Click on Save Config once you've finished.

4. To confirm your settings, go to a category page on your store's front end that shows layered navigation and test them out.

Best Magento 2 Layered Navigation Extensions

1. Amasty Improved Layered Navigation

Amasty's extension provides robust filtering options.

It includes price sliders, multi-select checkboxes, and advanced attribute choices. It provides customizable templates, Ajax-based navigation, and SEO-friendly URLs for optimized performance.

Pricing: Amasty offers flexible pricing based on your store's needs. They provide options ranging from single-site licenses to unlimited licenses for larger enterprises. Pricing starts at around $399 for a single-site license.

Benefits: Merchants using Amasty can enhance the user experience. They can do this by offering advanced filtering options and boosting site performance. The extension's SEO-friendly features contribute to better search engine visibility. It also helps increase traffic to your website.

2. Mageplaza Layered Navigation

Mageplaza's extension prioritizes user-friendly navigation with intuitive interfaces and advanced filter options. It offers customizable filter layouts, attribute sliders, and compatibility with various product types. The extension includes features such as infinite scrolling, which is aimed at improving performance. It incorporates Ajax technology loading to enhance user experience.

Pricing: Mageplaza offers competitive pricing. They provide options for single-site licenses, multi-site licenses, and enterprise solutions catering to various business needs. Prices start at $149 for a single-site license. Extra costs apply for extended support and installation services.

Benefits: Mageplaza's Layered Navigation extension offers a cost-effective solution. It enhances navigation and filtering on Magento 2 stores. With advanced features and customizable options, merchants can create a seamless browsing experience. It helps in boosting customer engagement and conversions.

FAQs

1. How can I configure layered navigation in Magento 2?

To configure layered navigation in Magento 2, go to your admin panel. Then, navigate to Stores > Configuration > Catalog section > Catalog > Layered Navigation. Here, you can toggle filters, adjust the price navigation display, and more.

2. What is the purpose of layered navigation in a Magento store?

Layered navigation enhances the user experience. It enables customers to filter products by attributes such as price, color, and size. This streamlines search results and improves product discovery.

3. How does AJAX play a role in layered navigation for Magento 2?

AJAX allows for dynamic filtering of products without the need to reload the entire page. It provides a seamless experience for users. It enhances efficiency when using layered navigation in Magento 2.

4. Can I set up advanced layered navigation with filterable attributes in Magento 2?

Yes, Magento 2 allows you to define filterable attributes for products. These attributes can then be used in advanced layered navigation. It helps in refining search results based on specific product attributes.

5. How does layered navigation impact the category tree and catalog navigation?

Layered navigation enhances the category tree and catalog navigation. It offers users an extra method to filter and navigate products within specific categories. This makes it easier to find relevant products.

6. Is it possible to install a Magento 2-layered navigation module?

Yes, there are various Magento 2 layered navigation extensions available. These extensions offer additional features and customization options. They aim to enhance the default layered navigation functionality in your store.

7. What are the benefits of using layered navigation with filterable attributes in Magento 2?

By utilizing layered navigation, you can offer users a refined and personalized filtering experience. It makes it easier for them to locate desired products within your store's catalog.

Summary

Discover how layered navigation can transform your Magento 2 store into an exceptional shopping destination. Here's a brief of what this article covered:

1. Enhanced search functionality and faster loading times.

2. Customizable navigation filters and advanced options.

3. Access the admin panel and navigate to settings.

4. Configuring layered navigation options and enabling filters.

Transform your e-commerce journey with layered navigation in Magento 2. From accessing the admin panel, we've got you covered. Explore top extensions for an enhanced browsing and search experience.

Streamline your customer's shopping experience with effortless navigation using managed Magento hosting.