Advanced Layered Navigation for Magento 2 — Faster Filtering, Better Product Discovery

Your Customers Cannot Find Products in Your Magento 2 Catalog

A customer lands on your Magento 2 store, navigates to a category with 400 products, and needs to narrow the results. They want a red shirt under $50, available in size medium. The default layered navigation shows filter options in the left sidebar — Color, Price, Size. The customer clicks "Red." The entire page reloads. Then they click the $40–$50 price range. Another full page reload. Then "Medium." Another reload.

Three filter selections. Three page reloads. Each reload takes 1.5 to 4 seconds on a typical Magento 2 store. The customer has spent 4.5 to 12 seconds waiting for pages to reload just to narrow a product list. On mobile, the experience is worse — each reload fetches the full page even though only the product grid and filter state actually changed.

Research from the Baymard Institute shows that 67% of ecommerce site search and navigation interactions end in abandonment when the experience feels slow. Customers who cannot quickly narrow a catalog to find what they want either use site search (which has its own limitations) or leave. For stores with 500+ products, the layered navigation sidebar is the primary product discovery mechanism. If it is slow, the entire store feels slow.

The root cause is Magento 2's default layered navigation behavior. Each filter click triggers a full HTTP request-response cycle. There is no mechanism for updating the product grid in place. There is no price slider — Magento 2 renders price ranges as text links. There is no multi-select — each attribute click replaces the previous selection. The default is functional but was not designed for modern shopping expectations.

What Is Advanced Layered Navigation (and Why Your Magento 2 Store Needs It)

Advanced layered navigation replaces Magento 2's default filter-and-reload pattern with a faster, more interactive approach. Instead of full page reloads, filter selections are processed in the background via AJAX requests. The product grid updates in place. The filter sidebar updates to reflect the new state. The URL updates using the browser's History API. The customer never sees a blank loading screen.

When a customer clicks a filter option — say, "Blue" under Color — the extension sends an AJAX request to the server. The server returns the updated product listing and navigation HTML as JSON. The extension's JavaScript replaces the old product grid with the new one and updates the filter sidebar to reflect the new counts and available options. The URL changes via pushState, so the filtered view is bookmarkable. The entire process happens in under a second.

Beyond AJAX, the extension introduces interface patterns Magento 2 lacks. A price slider replaces text-based price range links. Multi-select filters allow combining multiple values within a single attribute — selecting both "Blue" and "Red" under Color. Product counts show how many results match before the customer commits. More/Less links collapse long filter lists to keep the sidebar clean.

The psychology is straightforward. Filtering is exploratory — customers are narrowing a large set down to relevant options. Every page reload interrupts that exploration. The customer has to re-orient on the page, find where they were, and decide what to click next. AJAX filtering removes the interruption. Results update instantly, encouraging more filtering and deeper exploration.

Stores that implement AJAX-based layered navigation typically see lower bounce rates on category pages, higher pages-per-session, and higher add-to-cart rates from category pages. The improvement is most pronounced for stores where filtering is not optional — it is the only way to navigate.

Advanced navigation is not the right fit for stores with tiny catalogs. If you sell 15 products, your customers do not need layered filtering. But for any store where category pages show enough products to warrant pagination — generally 20+ — better filtering directly improves the shopping experience.

For building out your entire site navigation, see our guide to creating powerful mega menus in Magento 2. Mega menus handle top-level navigation structure, while advanced layered navigation handles in-category product filtering — together they cover the full navigation experience.

Key Features of MageRa Advanced Navigation for Magento 2

MageRa Advanced Navigation enhances Magento 2's layered navigation with AJAX-powered filtering, interactive controls, and configurable display options. Every feature is designed to help customers find products faster.

AJAX Filtering Without Page Reload. The core capability. When a customer clicks a filter option, the extension sends an AJAX GET request to the server. The server returns updated product listing and navigation HTML in a JSON response. The JavaScript widget replaces the content in place. The URL updates via pushState so the filtered page is bookmarkable. If the AJAX request fails, the extension falls back to standard page navigation.

Interactive Price Slider. Replaces Magento 2's text-based price range links with a dual-handle slider. Customers drag the minimum and maximum handles to define their exact range. The slider supports mouse drag, touch drag, and keyboard navigation (arrow keys). Current price values display in real time. Instead of choosing between predefined brackets like "$40–$50" and "$50–$60," customers can set a range of "$42–$57."

Multi-Select Filters. Allows selecting multiple values within a single attribute. A customer looking for shirts can select both "Blue" and "Red" to see products in either color. Default Magento 2 treats each click as a new single selection. Multi-select matches how customers think about attributes — they often have multiple acceptable options for color, size, material, or brand.

Product Counts Per Filter Option. Displays the number of matching products next to each option. "Blue (23)" tells the customer exactly what to expect before clicking. Counts update dynamically with each selection, so customers always see accurate numbers.

More/Less Toggle for Long Filter Lists. When an attribute has many options — a brand list with 30 entries — the extension shows a configurable number (default: 5) and hides the rest behind a "More" link. Clicking reveals the full list with a smooth slide animation. This keeps the sidebar compact and scannable.

Expand and Collapse Filter Sections. Each filter section (Color, Size, Price, etc.) can be expanded or collapsed individually. Customers focus on the filters they care about and hide the rest. The "Expand All Filters by Default" admin setting controls whether sections start expanded or collapsed.

Selected Filters Display. Shows currently applied filters as a list at the top of the sidebar. Each filter can be removed individually, or all can be cleared at once using the reset button.

Reset Button. A single-click button that clears all active filters. Without it, customers who have applied five filters must remove each one individually to start over.

Loading Indicator. During AJAX requests, a loading overlay with a spinner appears. This provides clear feedback that the filter action is being processed.

Mobile Responsive. All filter elements — price slider, multi-select checkboxes, more/less links, loading indicator — work on touch devices and smaller screens. The price slider handles support touch drag events. The extension works with any Magento 2 theme that follows the standard layered navigation layout structure.

Screenshot of the MageRa Advanced Navigation admin configuration panel in Magento 2, showing settings for AJAX filtering, price slider, multi-select, product counts, and display options.

Screenshot showing the MageRa Advanced Navigation layered filters on the Magento 2 storefront, with AJAX-powered filter options, price slider, product counts, and active filter indicators in the left sidebar.

How to Set Up Advanced Navigation in Magento 2

Step 1: Check Prerequisites

MageRa Advanced Navigation requires Magento 2.4.6 or higher (compatible through 2.4.9), PHP 8.1, 8.2, or 8.3, and two MageRa shared libraries: MageRa_Base and MageRa_FrontendUi. If you are already using other MageRa extensions, these shared libraries may already be installed in your app/code/MageRa/ directory. Verify by checking for MageRa/Base and MageRa/FrontendUi directories, or run composer show | grep magera if you installed via Composer.

Step 2: Install the Extension

Install via Composer (recommended) or manual file upload.

Via Composer:

composer require magera/module-advancednavigation
php bin/magento module:enable MageRa_AdvancedNavigation
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento cache:flush

Manual installation: Download the extension files and upload them to app/code/MageRa/AdvancedNavigation/ in your Magento 2 root directory. Then run the setup commands starting from module:enable.

After installation, verify the module is active:

php bin/magento module:status | grep MageRa_AdvancedNavigation

The output should show the module as enabled. If you are installing manually, also run php bin/magento setup:static-content:deploy -f to deploy the frontend JavaScript and CSS assets.

Step 3: Configure General Settings

Navigate to Stores > Configuration > Catalog > Advanced Navigation. The settings live under the Catalog section because the extension enhances Magento 2's native layered navigation rather than creating a separate settings area.

The first setting is Enable AJAX Filtering. Set to "Yes" to activate AJAX-powered filter updates. When enabled, filter clicks post to the extension's advancednavigation/ajax/filter endpoint (route frontName advancednavigation), which returns the refreshed product grid and filter state as JSON instead of forcing a full page reload. When disabled, other features (price slider, more/less, product counts) still work, but filter clicks follow Magento 2's default reload behavior.

Next, Show Loading Indicator. Set to "Yes" (the default) to display a spinner overlay during AJAX requests.

Step 4: Configure Filter Display Options

In the same configuration panel, set the following display options:

• Expand All Filters by Default: Set to "Yes" to show all filter sections expanded when a customer first loads a category page. Set to "No" to start with sections collapsed, letting customers open only the filters they need.
• Show Product Count: Set to "Yes" to display the number of matching products next to each filter option (e.g., "Blue (23)"). This is strongly recommended — it helps customers make informed decisions about which filters to apply.
• Show More/Less Options: Set to "Yes" to enable the collapsible More/Less toggle for filter attributes with many values.
• More Options Limit: Number of filter options to show before the "More" link appears. Default is 5. For attributes with many values, a lower number keeps the sidebar compact. Increase to 8 or 10 for stores with fewer options per attribute.
• Enable Price Slider: Set to "Yes" to replace the default text-based price range links with the interactive dual-handle slider. This works on any category page where the Price attribute is configured as filterable in Stores > Attributes > Product (search for "price" and check the "Use in Layered Navigation" setting).
• Allow Multi-Select Filters: Set to "Yes" to allow customers to select multiple values within a single filter attribute simultaneously. When disabled, filter clicks follow the default single-select behavior.
• Show Reset Button: Set to "Yes" to display a reset button that clears all active filters at once.
• Show Selected Filters: Set to "Yes" to display a summary of currently applied filters at the top of the sidebar.

All ten settings can be configured at the Default, Website, or Store View scope level, giving you control over different stores in a multi-site setup.

Step 5: Test the Configuration

After saving the configuration, flush the Magento cache:

php bin/magento cache:flush

Then test the full flow on your storefront:

1. Navigate to a category page that has filterable attributes configured. You should see the enhanced layered navigation sidebar.
2. Click a filter option. The product grid should update without a full page reload. The URL should change to reflect the filter parameter.
3. Test the price slider (if enabled) by dragging the handles. The price values should update in real time.
4. Test multi-select (if enabled) by clicking multiple values within the same filter attribute. The results should combine both selections.
5. Verify the More/Less toggle works on attributes with more options than your configured limit.
6. Click the reset button to verify it clears all filters.
7. Test on a mobile viewport to confirm touch interactions work on the price slider and filter sections.

If the AJAX filtering does not work after configuration, check that JavaScript and CSS assets are deployed (php bin/magento setup:static-content:deploy -f) and that the browser cache is cleared. If the extension settings do not appear in the admin panel, verify the module is enabled and run php bin/magento cache:clean config.

MageRa Advanced Navigation for Magento 2

MageRa Advanced Navigation is built for Magento 2.4.6 through 2.4.9, running on PHP 8.1 through 8.3. It supports both Open Source and Commerce editions.

The extension differentiates itself on three points: zero-code integration, plugin-based architecture, and granular control. It works immediately after installation — no frontend code changes, no theme modifications, no block overrides. The extension uses Magento 2's plugin (interceptor) system to enhance the native FilterRenderer block, injecting data attributes and configuration into the existing layered navigation markup. This means it is compatible with any theme that uses Magento 2's standard layered navigation layout, including custom themes. And the ten admin configuration options give you precise control over every aspect of the filtering experience — each feature can be toggled independently at the Default, Website, or Store View scope level.

The module depends on MageRa_Base (for shared utility functions and admin interface components) and MageRa_FrontendUi (for the frontend JavaScript widget and CSS). If you use other MageRa extensions like MageRa AJAX Add to Cart or MageRa Mega Menu, these dependencies are likely already satisfied.

For frontend customization, the extension follows standard Magento 2 conventions. Templates can be overridden in your theme by copying files from MageRa_AdvancedNavigation/view/frontend/templates/ to app/design/frontend/{Vendor}/{Theme}/MageRa_AdvancedNavigation/templates/. The JavaScript widgets (filter.js and price-slider.js) can be extended or customized using Magento 2's RequireJS mixin and widget extension mechanisms.

Visit magera.ca/magento-2-advanced-navigation.html for documentation and live demos.

5 Tips for Better Layered Navigation in Magento 2

Installing the extension is the first step. These five practices help you get the most from your layered navigation and improve product discovery across your store.

1. Configure your filterable attributes deliberately. The layered navigation sidebar only shows attributes that are configured as filterable in Magento 2. Go to Stores > Attributes > Product, open each attribute, and check the "Use in Layered Navigation" setting under the Storefront Properties section. Not every attribute should be filterable — showing too many filter options overwhelms customers and clutters the sidebar. Focus on the attributes customers actually use to make purchase decisions: price, color, size, material, and brand are the most common. Avoid making low-value attributes like "tax class" or "country of manufacture" filterable unless your customers specifically search by those criteria.

2. Set the right "More Options Limit" for your catalog. The default limit of 5 works well for most attributes, but consider your catalog structure. If you carry 40 brands and set the limit to 5, customers have to click "More" and scan a long list. If you carry only 3 brands, the More/Less toggle is unnecessary noise. Audit your filterable attributes, count the number of options in each, and set the limit accordingly. Attributes with fewer than 8 options do not need the More/Less toggle. Attributes with 15+ options benefit from a limit of 8-10 so customers can scan a reasonable number before deciding whether to expand.

3. Use product counts to guide filter decisions. Product counts next to filter options are not just informational — they shape customer behavior. A customer who sees "XL (2)" knows that clicking that filter will show very few results and may decide to look at Large or Medium instead. Without counts, customers click blindly and may end up on empty result pages. Keep "Show Product Count" enabled. If your catalog changes frequently, counts stay accurate automatically because they are calculated dynamically based on the current product collection and applied filters.

4. Combine advanced navigation with SEO-friendly URLs. Filtered category pages generate unique URLs that search engines can index. Use the MageRa SEO Suite Ultimate extension to manage meta tags, canonical URLs, and schema markup on filtered pages. Without proper SEO management, filtered pages can create duplicate content issues (the same products appearing under different filter combinations) or waste crawl budget on low-value filter combinations. SEO Suite Ultimate gives you control over which filtered pages get indexed and how their meta data is managed.

5. Pair AJAX filtering with AJAX add to cart for a seamless experience. When a customer finds the right product through layered navigation, the next action is adding it to their cart. If that action triggers a page reload, the smooth filtering experience you just built is immediately undermined. The MageRa AJAX Add to Cart extension handles this — products are added to cart without a reload, so the customer stays on the filtered category page and can keep browsing. Together, AJAX filtering and AJAX add to cart create a continuous, reload-free shopping experience from product discovery to cart.

Wrapping Up

Magento 2's default layered navigation works. It filters products. But it does so with full page reloads between every filter selection, text-based price ranges instead of sliders, and single-select limitations that do not match how customers actually shop. For stores with catalogs of 20 or more products per category, these limitations slow down the shopping experience and increase abandonment.

MageRa Advanced Navigation fixes each of those problems. AJAX filtering removes page reloads. The price slider gives customers precise control over price ranges. Multi-select allows combining filter values within the same attribute. Product counts, More/Less toggles, expand/collapse sections, selected filter displays, and reset buttons add up to a layered navigation experience that feels designed rather than default.

The extension installs without code changes, configures from a single admin panel under Stores > Configuration > Catalog, and works with any standard Magento 2 theme. Each feature is independently toggleable at the Default, Website, or Store View scope level.

Ready to give your customers a faster, more intuitive way to find products? Try MageRa Advanced Navigation for Magento 2 and transform your category pages from static lists into dynamic, filterable product discovery experiences.

FAQ

Q1: Does MageRa Advanced Navigation work with my custom Magento 2 theme? Yes. MageRa Advanced Navigation uses Magento 2's plugin system to enhance the native FilterRenderer block rather than overriding it. It injects data attributes into the existing layered navigation markup and initializes the JavaScript widget via data-mage-init. This approach works with any theme that uses Magento 2's standard layered navigation layout (catalog_category_view_type_layered.xml). If your custom theme has heavily modified the layered navigation templates, you may need to adjust the template overrides, but the extension provides its own templates that follow standard Magento 2 conventions. You can also copy the extension's templates into your theme directory and customize them.

Q2: Will the AJAX filtering conflict with Varnish, Redis, or full-page cache? MageRa Advanced Navigation handles AJAX requests through a dedicated controller (/advancednavigation/ajax/filter/) that returns JSON responses. These AJAX requests bypass full-page cache because they are dynamic — the response depends on the specific filter combination the customer has selected. The initial category page load (before any filter interaction) is still served from full-page cache normally. The extension's AJAX requests are separate from the cached page and do not interfere with Varnish or Redis configurations. If you experience issues, verify that your Varnish VCL allows POST/GET requests to the advancednavigation route, or add the route to your cache bypass list.

Q3: Can I configure different navigation settings for different store views? Yes. All ten configuration settings in MageRa Advanced Navigation support scope-level configuration — Default, Website, and Store View. In a multi-store setup, you can enable AJAX filtering on your primary store while keeping the default behavior on a secondary store. You can set different "More Options Limit" values for different store views based on their catalog sizes. You can enable the price slider on one store and disable it on another. To configure per-store-view settings, switch the scope selector in the top-left of the admin configuration page to the target store view, uncheck "Use website" for the settings you want to override, and save.

Internal Links

• /blog/creating-powerful-mega-menus-magento-2 (Mega Menu — handles top-level site navigation; pair with advanced navigation for complete navigation coverage)
• /blog/magento-2-seo-guide-meta-tags-schema-sitemaps (SEO Suite Ultimate — manage meta tags and canonical URLs on filtered category pages)
• /blog/magento-2-ajax-add-to-cart-ux (AJAX Add to Cart — pair with AJAX filtering for a fully reload-free shopping experience)