Layered Navigation | Multi-Tag feature in Shopify

Contact our Shopify Experts for Queries

What is layered Navigation:- In Shopify layered navigation is also known as collection page sidebar multi-tag filter, layered navigation filter the large collection of products as per user requirement.
We have layered navigation solutions on the collection page without using any app It creates the theme in separate files into the liquid code format without affecting any functionality.
When users click on the Tag the collection page updates and shows the products in the selected tag criteria once the tag is selected the other tags are clear.
We Filter All products of the collection page only using Tags.

What do We Provide?

Multi Tag filter is a great way to user filter the products by a variety of criteria for eg.Color, Size, Price Range, Product Tag, etc…

We have three types of solution into the filtering

  • Filter By Tag Group
  • Filter by multiple Tag Section
  • Filter By Tag
This all three types manage by the dynamic way you can select this into the customize on collection page

Filter By Tag Group

In this type of filtering, products are filtered by the group of tags. All Filter are show there particular category for ex All colors are show in to the color heading
Example :- If we have Women Cloths Site and Apply some filters Like select Bottom (category) -> Red(color) -> L(size) -> 500-1000(price). Products are filtered and show as per our selection.

Steps To Apply Filters

Step 1:- Select collection
Step 2:- Select any Category into the sidebar filters for ex. Kurta after selecting all the products into the kurtas are filtered.
Step 3:- Select Black(Color) -> 500-1000(Price) -> L (Size)
then products are shown as per our selections

Filter by multiple Tag Section

In this type of filter at a time select multiple tags for particular products into the collection.
When we select any filter tag, unselected filter tags are hidden. View part is not group wise it shows all filter tags without any group but the filter process is the same like the tag group.
Example:- View part is not group wise it shows all tags without any group but the filter process is the same like the tag group for ex. If we have a clothes shopping site and multiple products there then we apply some filters like this. Bottoms -> Green -> L Products are filtered and show as per our selection.

Steps to Apply Filter

Step1:- Select Collection
Step 2:- All filters are shown combine Select any filter in that collection like Bottoms -> Green -> L.
Products are filtered and show as per our selection.

Filter By Tag

Filter By Tag shows the normal filtering, in this type all filter tags show in one format its simple filtering.
“At a time only one filter is applied”. And that filter, filters the products in the selected collection, it’s not like the metatag filter and tag group filter.
Example:- If we have a Women Clothes site and have some different products like Bottom, Kurtas, Tops… When we select “Top” products are filtered in that collection and shown all Top products.

Steps to apply filter

Step 1:- Select Collection
Step 2:- All filters are shown combinely, Select any filter in that collection like Top after selection All Tops Products are show on the screen

How To Check Our Demo Link.

Now Group filters Are shown in our demo on the collection page.

Steps to use Demo

Step 1:- Copy the above Demo-solution url and past it in your browser after past you are on Home screen
Step 2:- Click on collection in to the menu after click on collection you are on collection page
Step 3:- Select any Category Like Top
Step 4:- Then select color, Price and Size.

Notes:-

  • All products on the collection page are filtered by Tag only.
  • Multi Tag filter sidebar only shows the tags that are assigned to the products if a tag does not assign a particular collection of products it won`t show.
  • For filtering Color, it adds through the tag at the time of product creation.
  • For filtering price-range it adds through the tag at the time of product creation
  • Multi Tag filter by default shows on all collection pages.

screenshots

Please click on the picture to have a better view of them.
Step 1
Step 2
Step 3
Sctep 4
Step 5
Step 6
Step 7
Step 8
Step 9
Step 10
Step 11
Step 12
Step 13
This website or its third party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the privacy policy. By tapping on "I accept" you agree to the use of cookies.