Shopping cart

Configure Layered Navigation with Filterable Attributes in Magento 2

magento-2-tutorial
how-to
configure
layered-navigation
filterable
attributes
Configure Layered Navigation with Filterable Attributes

Configure Magento 2 Layered Navigation from Magento 2 default is designed as a convenient sitemap on your Magento 2 store. The Layered Navigation is usually placed on the left of the category page with list of categories and price range. Thus, instead of going around your store, the customers only need to describe their demands through the criterias filter, and they will get the desired items very quickly. However, if you want to give more criterias for the searching as well as enhance customer’s experience on your site, you can refer to Magento 2 Layered Navigation ULTIMATE, an advanced filter from Mageplaza.

Magento 2 Layered Navigation ULTIMATE

With the default Layered Navigation, the customers can filter by product attributes or price, meanwhile the configuration of product count is mentioned in this topic.

Table of contents

What is Magento 2 Layered Navigation with Filterable Attributes?

Magento 2 Layered Navigation with Filterable Attributes allows your customers to filter product by category or by attribute. For example, when a visitor goes shopping on your clothes store, the first step can be selecting a category he needs such as women, men, or sandals. At this time, all products classified into these groups will appear on the result page. Next, he can filter product attributes to narrow the suggestions by styles, colors, price range and so on. These attributes are called filterable attributes and they are hidden in each criteria section.

What is Magento 2 Layered Navigation with Filterable Attributes

Keep your eyes on the following guides to configure the layered navigation with filterable attributes in Magento 2

How to Configure Layered Navigation with Filterable Attributes

Step 1: Create the Navigation Attribute Properties

  • On the Admin Panel, Stores > Attributes > Product
  • Under Attributes column, enter the attribure name in the search box or find it manually, and then go to the Edit mode.

Magento 2 Layered Navigation Create the Attribute Properties

  • On the left panel, select Storefront Properties and set Filterable (with results) or Filterable (no result) for Use in Layered Navigation.
  • Enable to search results in layered navigation by choosing Yes in the Use in Search Results Layered Navigation field.
  • Repeat the above steps if you want to include any other attributes in layered navigation.

magento 2 Layered Navigation Create the Attribute Properties 2

Step 2: Make the Category an Anchor

  • On the Admin Panel, Products > Inventory > Categories.
  • From the categories tree, choose the category as you need to apply layered navigation.
  • Tap the Display Settings tab, choose Yes in theIs Anchor field.
  • Save Category to complete.

Magento 2 Layered Navigation Make the Category an Anchor

Step 3: Test your Layered Navigation

Just go to your store and hover over the category in the top navigation. Immediately, the selection of filterable attributes is displayed in the layered navigation section of the category page.

Recommend solutions:

Better solutions for Magento 2 Layered Navigation

If you are still confused with the effectiveness of the above manual configuration, please consider about equipping your store with Magento 2 Layered Navigation extension. Let’s see what this module is able to help you out.

Mageplaza Layered Navigation - A brief description

Magento 2 Layered Navigation ULTIMATE by Mageplaza is a must have extension which plays a role as a filter engine working on your site to aid shoppers in searching for their wanted products.

This extension is especially necessary for e-stores which feature and sell a large number of products which contain various attributes or come from different brand names. Since an digital store offers a great diversity of product choices, online buyers may be overwhelmed; in addition to this, the real struggle to find appropriate stuff cause a customer to leave your site with an empty shopping cart. Hence, having Mageplaza Layered Navigation for Magento 2 gives customers no excuses but to check out with a cart full of their favourable products.

Do you really need a better Layered Navigation?

If you’ve just started your online store and have sold not many items, it may not be urgent to equip Mageplaza Layered Navigation at the moment. However, when it exceeds to over 5 varieties of each product and the number of products being sold on your Magento 2 store is not under 5, you should consider to have a better filter system. Let’s look at an example below:

Do you really need a better Layered Navigation?

Priceline is a well-known online store which sells a wide variety of products. The number of items they sell on their website may reach to thousands and without an efficient layered navigation, their customers could no way find what they want to look for.

If you find either your current store or your future one in Priceline, it’s high time to install Magento 2 Layered Navigation.

What solutions Mageplaza Layered Navigation offer?

Better searching with multi-filters in Layered Navigation

While in default Magento 2, only single filtering is allowed which means customers have to select different product attributes multiple times until they find what they want. Having this happen again and again causes frustration for customers while time is wasted, yet the results may end up with less precision.

Mageplaza Layered Navigation for Magento 2 allows shoppers to filter as many product attributes as they want and all these chosen filters are enabled to help customers find the best results for their wanted products. Let’s look at the screen gif below:

Mageplaza - Magento 2 Layered Navigation searching with multi-filters

Layered Navigation Flexible price selections with price slider

Customers can be very price conscious. Restricting their shopping budget may be the first thing when they come visit your e-store, so just equip a price slider and let your shoppers play with it. Customers can pull the slider up and down to adjust the price to perfectly fit their budget. See the gif below:

Magento 2 Layered Navigation Flexible price selections with price slider

More precise searching results with extra filters

Magento 2 Layered Navigation of Mageplaza allows shoppers to filter products which are New, In-stock, On-sale or filter by Product ratings and filter by Product status. This feature helps customers remove unsuitable products from the result product page in order to save more shopping time.

Mageplaza - Magento 2 Layered Navigation More precise searching results with extra filters

Shop by brands more easily with Mageplaza Layered Navigation

To many, some certain brand names are always on their Wishlist. To help customers save time surfing around to find their favorite brands, Layered Navigation of Mageplaza allows them to pick one or some names and all filtered products will only come from these selected brands. This special feature goes with Magento 2.x Layered Navigation Ultimate version.

Shop by brands more easily with Mageplaza Layered Navigation

Save shopping time with quick lookup

It’s really common when a product comes with so many attributes. Take colors or styles as examples, in these cases, you should allow your customers to quickly manually type in a product attribute in the quick lookup box. Magento 2 Layered Navigation not only enables this feature but also auto-suggests the attribute after one or two characters are entered. Watch the gif below:

Mageplaza - Magento 2 Layered Navigation Save shopping time with quick lookup

Layered Navigation boost your CX with Ajax loading and Infinite scrolling

Ajax loading seems to be a must-have feature of Layered Navigation. This loading method enhances UX for your site yet cuts down site loading time. While customers don’t have to wait long for all filtered products to be shown, the visual effect it brings is really fascinating.

Layered Navigation provide SEO-friendly URLs and prevent duplicate content

Our Layered Navigation for Magento 2 displays SEO-friendly URLs which are not only healthier in search engines but also human-readable. For example, the following link is for a product which is filtered by its style being “jacket” and “windbreaker” and its color being red or yellow:

Mageplaza Layered Navigation ULTIMATE Provide SEO-friendly URLs and prevent duplicate content

Extra features which help enhance shopping experience

Scrolling to top after each filter

After each filter is applied, the current page will be automatically scrolled to top so customer do not have to do it manually.

Product count

The number of products available for each filter will be noticed by a number displayed in parentheses.

All-product page

All products which are filtered will be featured on one page only so customers do not have to jump from page to page to see all available items. The infinite scrolling feature will automatically load more products when the shopper goes to the end of page.

Apply-filter option

The Apply filter button can be enabled so customers can click on to search all possible products after multiple filter selections.

Full feature list of Layered Navigation

All features of 3 versions of Layered Navigation are presented below:

Magento 2 Layered Navigation ULTIMATE Full feature list

GET Layered Navigation Ultimate

How to install Layered Navigation in Magento 2

To install Magento 2 Layered Navigation, please follow our standard installation guide. According to this instruction, there are three possible ways to get your module installed on your site and if you have any problems in installation, please contact Mageplaza support to get the service as soon as possible.

Configure Mageplaza Layered Navigation

To configure every single feature of Magento 2 Layered Navigation extension, you can check out our Layered Navigation User guide. To help you have a close-up on some outstanding features’ configuration beforehand, it’s provided below some notes of Mageplaza Layered Navigation user guide

How to Enable Layered Navigation

To access the configuration panel of Mageplaza Layered Navigation in all three versions, from your admin panel, go Stores > Settings > Configuration, right on the left sidebar, find Mageplaza > Layered Navigation. In General configuration > Module Enable, select Yes to start the module.

How to Enable Magento 2 Layered Navigation

Ultimately, Mageplaza Navigation extension is integrated with these following themes:

  • Yourstore
  • Porto
  • Fastor

Layered Navigation Standard version

In the standard version of Layered Navigation, you don’t have to do the configuration as all are set up by default including the following features:

  • Filter multiple product attributes
  • Feature the price slider
  • The feature “Shop by” will be enabled

Layered Navigation Professional version

Beyond basic features in the Standard version, the Pro version of Layered Navigation supports the extra following features:

  • Turn on/off the Multi-filter feature
  • Scroll to top
  • Quick look-up box
  • Options to display “Out-of-stock” products
  • Product count
  • Expand product attributes by default
  • Apply Filter button
  • Filter by product status
  • Filter by product rating
  • Filter by decimal attributes

Magento 2 Layered Navigation ULTIMATE Professional version

To configure for these above features, all you need to do is selecting ‘Yes’ or ‘No’ and remember to click Save Config after setting.

To configure additional filters, please look at the screenshot below:

Magneto 2 Layered Navigation ULTIMATE configure additional filters

To allow customers filter products by their statuses, you should go to Stores > Settings > Configuration > Mageplaza > Layered Navigation > Additional Filters > Product State Filter. First, name the filter in the field ‘Group Label’. In the below screenshot, it’s named “Product status”.

If you want the filter section to be expanded as default, select Yes at the field ‘Expand by default’. If No, the section will drop down when it’s clicked.

Magento 2 Layered Navigation ULTIMATE Expand by default

Allow filtering by new products: Select Yes at Enable Product New Filter; feel free to name the filter in the next Product New label field.

Magento 2 Layered Navigation ULTIMATE filtering by new products

Allow filtering by products which are on sales: Select Yes at Enable On Sales Filter and you are able to rename the filter in the under box.

Magento 2 Layered Navigation ULTIMATE filtering by products which are on sales

Allow filtering by products which are out-of-stock: Select Yes at Enable Stock Filter and name the filter in the Stock label field. Remember that you have to enable Display out of stock product beforehand.

Magento 2 Layered Navigation ULTIMATE Allow filtering by products which are out-of-stock

If you want your customers to filter by product ratings, in the Rating filter section, you can turn on this feature by selecting Yes at Enable Rating Filter. Similarly, you can name the filter and expand it as default with some simple clicks as in the screenshot below:

Magento 2 Layered Navigation ULTIMATE Enable Rating Filter

Layered Navigation Ultimate version

Apart from available features in the standard and professional versions, the Ultimate one has some outstanding features as below:

  • Design slider/configuration tab
  • Ability to customize product page
  • Ability to customize product attributes
  • Shop by brand

Design configuration tab

You are able to choose one among five available slider types including Flat UI, HTML5, Modern, Nice white and Simple dark. Moreover, custom Css is also available to deploy when necessary. It’s important to be noticed that you should enable Slider in the Display type at Attribute Configuration > Color first to enable Design Configuration to work.

Magento 2 Layered Navigation ULTIMATE Design configuration tab

Let’s see how the slider can be displayed on the frontend below:

  • Default slider:

Magento 2 Layered Navigation Default slider

  • Flat UI:

Magento 2 Layered Navigation Flat UI

  • HTML5:

magento 2 Layered Navigation HTML5

  • Modern:

Magneto 2 Layered Navigation Modern

  • Nice White:

Magento 2 Layered Navigation ULTIMATE Nice White

  • Simple Dark:

Magento 2 Layered Navigation Simple Dark

Customize all-product page feature

This is the area for the settings of the All-product page feature. Once this is enabled, all filtered items will be displayed on one single page only so customers do not have to move from page to page to view all products. When a shopper surfs to the end of the All-product page, more items will be automatically shown.

To configure this feature, go Admin Panel > Mageplaza > Layered Navigation: Custom Products Pages. Choose a product page to edit.

Magento 2 Layered Navigation ULTIMATE Customize all-product page

After choosing/creating a specific Product page, choose Page Information and scroll down to see some essential information:

Magento 2 Layered Navigation ULTIMATE Customize all-product page step 2

Fill all required information for the page then go the Default Attributes

Magento 2 Layered Navigation ULTIMATE Customize all-product page step 3

In Default attributes, you are able to select default attributes for the all-product page. When a customer performs a filter and get a bunch of result products, items with default attributes will be displayed first.

Customize product attributes for Layered Navigation

Go to Admin Panel > Stores > Attributes: Product, then choose an attribute and go to Layered Navigation Properties tab.

Example of a specific attribution and its configuration in details

Magento 2 Layered Navigation ULTIMATE Customize product attributes

  • In Use in ProductsPage Navigation: Choose the possibility of being displayed on Layered Navigation.
  • In Use in Search Results ProductsPage Navigation: Choose the possibility of being filtered by Layered Navigation.
  • In Position: The attribute has a bigger position will be placed lower. 0 to set it in default as Magento 2’s principle.
  • In Allow Multiple Filter: If Yes, shoppers are able to filter by multi-options in this group attribute. For example: You can allow the shoppers to choose more than 1 filter in Color group attribute but can choose only 1 filter in Style group attribute.
  • In Display Style: Choose the display style of the group attribute. The specific design for each style is mentioned in the next section.
  • In Enable search option: Choose to enable/ disable the Quick Lookup Option in this attribute group.
  • In Expand by default: Choose to automatically expand this attribute group or not when the shoppers go to the collection page.

Shop by brand integrated inside Layered Navigation

A full module of Shop By Brand is integrated inside Mageplaza Layered Navigation Ultimate version. By utilizing this extension, shoppers are able to take advantage of the full features of Shop by Brand. See below:

Layered Navigation features for Store Admin

  • Easy to filter or search the brand
  • Add the brand detail: name, logo, banner, URL key, short description and detailed description
  • Add brands to Top menu, sidebar
  • Support WYSIWYG Editor to edit short and detailed description of the brand
  • Best SEO practices
  • Customizable the style
  • Display brand logo in the product page
  • Configure the meta tags for brand pages
  • Configure the brand page URLs
  • Limit the number of brands in sidebar
  • Insert featured brand block to any page and position with embedded code
  • Support product types: simple,downloadable,configurable,virtual, bundle
  • Bulk import Brands from CSV file
  • Opt to group brands by name or display in a continuous list
  • Support in customizing characters for the Alphabet filter
  • Supports in styling the Brand Mega Menu: in column and in row
  • Supports in styling the Brand List: listing and alphabet and allows displaying in 3 formats: Logo only, Label only, or Logo and Label
  • Supports popup quick view brand and related product list with ajax pagination page loading
  • Allows displaying Featured Brand, Brand List Thumbnail and Category Brand in the sidebar
  • Add noindex to pagination pages, meta title, meta keywords, meta robot for Category and Brand
  • Styles Featured Brand in the Brand page as a slider or as a list
  • Allows ajax filter brands by category
  • Allows showing brand names in the Product listing page
  • Displays product quantity with every brand in the Brand list page
  • Suggests related products with the same brand in the product page
  • Insert Widget: allows 3 widgets according to category, option ID (BrandID) or featured brand
  • Full responsive design which is perfectly compatible with each device

Layered Navigation features for Customers

  • Get all brands of all products
  • Get the featured brands
  • Ajax Loading for instant searching the brands
  • Get the brand details: name, logo, banner, description, featured products.
  • View all brands of all products listed in alphabetical order
  • View brands by category
  • View featured brand list
  • View brand list by name or logo
  • Access brand list from top link or main menu

To get the full instruction of how to configure Shop by Brand in the Ultimate version. Please go here

Layered Navigation Ultimate

Please leave comments if you have any questions, feedbacks.

Comments for Configure Layered Navigation with Filterable Attributes in Magento 2

You also may like these Magento 2 Extensions

One Step Checkout

$199
111 reviews

Layered Navigation

$99
59 reviews

Gift Card

$199
6 reviews

Reward Points

$99
4 reviews

Affiliate

$149
12 reviews

Shop By Brand

$99
16 reviews

People also searched for:

  • Configure Layered Navigation Magento 2
  • layered navigation
  • magento 2 layered navigation
  • magento 2 configure layered navigation
  • configure layered navigation magento 2 block module
  • layered navigation magento 2 configure