What are filters?

Through filters customers are able to choose the product according to their references for eg: there are filters like colour, sizes, prices etc. If customer A wants a red colour dress then they will choose red colour from colour filter. Same goes with size. If a customer wants an x size dress they will filter it from a size filter.

Why do we need filters?

The reason behind having filters on the site is that sometimes sites are dealing in various products and they have different variants like if you owned a clothes store then you must have different dresses available in different colours and different sizes. So to make the customers easily select the products from your store you should have filters on your site. This allows the customer to select easily about their preferences and to be honest it will be a good user experience too.

Where can we have filters on the site?

The best way to have filters is on the collection page where customers see different collections of your site and can easily filter the products from the collection according to their preferences. The best developers can help you to place the filters on your site.

Wondering how we can have filters on the site?
Basically there are two methods to achieve the functionality of filters.
1. App
2. Custom code

Filters with app :

1. We can have filters through the app and it will work absolutely fine with the app too. There are various apps which can help you to have filters on the collection page with this sometimes app provides you those options as well which filter through custom code can not make.  The major drawbacks of the apps is you can not have a design as per your requirement. Through custom code we can make the design of the filter the same as per our requirement.  You can hire an experienced Shopify developer for making the filter through tags.

Filters through custom code:

Second option you can have is to make these filters with the help of custom code. A Professional developer can make the filters through tags and show these filters through code into your collection page on your site.

How will filters work through tags?

Through custom code filters are managed and created through tags. You just need to assign the tags to the products manually for which you want the filter to appear.

Example:

If there are colour name filters in which options such as red, orange, yellow are showing on the frontend then in backend there must be tags such as red_colour, yellow_colour, orange_colour and you need to assign this tags to the products which you want to display on the selection of the red colour, orange colour, yellow colour etc.

The product which has tags related to that filter then that product will appear on the selection of that particular filter.

Steps to include in this:

1)  Basically we have to work only on the five code files.

A) collection-filter-sidebar.liquid
B) advanced-tag-loop.liquid
C) advanced-collection-filter.liquid
D) json
E) Collection-template.liquid

A ) Collection-filter-sidebar.liquid

We have to create a new snippet file. This file will work to display the filters on the frontend.

 

B) advanced-collection-filter.liquid
This snippet file worked based on the tag categories.

C) advanced-tag-loop.liquid
This snippet file is used for advanced tagging.

D) settings_schema.json
In this file we have worked to display the filter settings in the customizer.

E) collection-template.liquid
In this file, where we want to show the filter, we have to render 'collection-filter-sidebar.liquid' in this file.

Steps for the customizer and admin:

1) Now go to the theme customizer , and open the Theme settings, and you will see here the    collection filter sidebar option which we have created in the setting_schema.json file.  And here choose the option and fill the title and tags for the filter

2) Follow these steps for any product on which you want to show the filters.

a) Go to the admin and click on the product option.
b) After that click on any product which you have to show in the filter. And give the tag of product which you have mentioned in the customizer collection filter settings

9.) Final output:

 

---