What is Layered Navigation in Magento
The Layered Navigation feature in Magento gives customers a comfortable and efficient way to search the store catalog by providing filters for product category, price range, color, brand or any other available attribute
Above is Layered Navigation view on Magento default theme in "Shoes" category page.
Magento native Layered Navigation can be displayed on anchor category and on quick search results pages only.
Attribute Setup
It is important to understand how Layered Navigation works in Magento before making attribute setup as some changes are hard (if possible at all) to do and change later.
Understanding Filter Counting
Layered Navigation is not just some simple block with links which allows you to filter. All these filters are dinamic and depend directly on products in current category.
Each filter option is checked and counted against every product in category and options having no products are not shown (there is Filterable (no results)
option to show filter options with no products associated to it).
Filters having no visible options are hidden too.
Consider an example. There is attribute Color
with options Red
, Blue
and Green
and in current category there is a single product Red dress
. In layered navigation Color
filter only option Red
will be shown (with Filterable (with results)
setting).
If there is no product in category with Color
attribute assigned, Color
filter will not be shown at all (with Filterable (no results)
setting it still be be displayed if Color
filter is in attribute set of any product of that category).
Understanding Attribute Types
Second important thing to understand before attribute setup - what attribute types to use.
You cannot change attribute type after creating attributes!
Not all attribute type can be used in Layered Navigation in Magento, only dropdown, multiple select and price types. Considering you are going to use Layered Navigation extension from MANAdev, we recommend using
- price type for any numeric filters like width or carats, especially for slider filters.
- dropdown type and multiple select type for all other filters. Obviously, use dropdown for all attributes unless more than one option is required to be assigned to a product.
How Many Attributes You Need
At last it is improtant to decide how many attributes to create.
We do recommend having as little attributes as you possibly need, for example have one Color
attribute for all product types, not Apparel color
, Furniture color
etc. Anyway, in category pages you customer will have only options associated to products, not all options. So for size in apparel customer will get sizes like s, m l, xl and in category like shoes it will get shoe sizes like 37, 38, 49 etc.
Having less attributes firstly is better for store performance and also it looks nicer on Quick search pages (you do not get few colors or sizes in Layered Navigation there).
Anchor and non anchor category pages
Categories in Magento can be anchor and non anchor (set to Is Anchor
= Yes
in category management or not). For layered navigation, based on attributes, to work in Magento it is mandatory to set category and all its subcategories Is Anchor
to Yes
.
Above: To make category
Anchor
in Magento admin panel selectCatalog
->Manage Categories
menu, select some category and openDisplay settings
tab.
Non Anchor Category
- contains only products directly assigned to it. By default only block of categories is displayed and products cannot be filtered with Layered Navigation.
Anchor category
- differently from non anchor category it contains products assigned to it and to all subcategories. Also Layered Navigation is shown.
Above is typical non anchor Magento category page example
There are 2 typical store setups:
- All categories are anchor. In this case all categories can be filtered with layered navigation.
- First level or two of category tree is non-anchor and deeper categories are anchor. In this setup top categories typically do not show products, and instead they show thumbnails for deeper subcategories, and deeper subcategories show both layered navigation and products.
Either way, when some category is anchor, all its subcategories should be anchor too.
Steps to Show Layered Navigation
Create attribute and set it to be used in Layered navigation and in quick search (optional). Let’s say it is
Gender
and has four optionsBoys
,Girls
,Mens
,Womens
.
Assign attribute to attribute set. Let’s say to
Default
Create product based on this attribute set and fill. Let it be t-shirt. And set value for attribute Gender to Female.
- Add product to some category in product management or in category management. Let’s say it is category T-Shirts which has subcategories Polo and Funny
- Make sure your categories/subcategories are set to anchor=yes in category management.
- You should see Layered Navigation it in frontend T-Shirt category page now
- If our extension is installed then you should be able to pick few options of the same filter.