Are you trying to figure out how to Add Collection Filters in Shopify?
Customers may find it easier to find the products they want by adding collection filters Feature in shopify, which may ultimately result in higher sales.
We’ll talk you through the process of adding a collection filters feature to your Shopify store in this article.
What are Collection Filters?
It’s critical to comprehend what collection filters are and how they operate before moving on to the process of adding them. Customers can filter their search results by many factors, such as product kind, size, color, and price range, using collection filters. You may improve consumers’ shopping experiences and boost sales by introducing collection filters to your Shopify store, which will make it simpler for customers to find the products they desire.
How to Add Collection Filters in Shopify?
Shopify provides two methods for adding Collection Filters Feature, first via code and second via an application.
Let’s go over how to add collection filters to your Shopify store now that we understand what they are and their significance with App.
Step 1: Create Product Tags
The creation of product tags is the initial step in adding collection filters. To assist categorize your products, you may add product tags, which are labels or keywords, to them. Use product tags like “men’s clothing,” “women’s clothing,” “shoes,” “accessories,” etc. as an illustration. Follow these steps to generate product tags in Shopify:
- Visit your Shopify store and sign in
- View All Products under Products.
- Pick the item you wish to add tags to by clicking it.
- Enter your selected product tags in the Tags area.
- Press “Save”.
- For each product in your store, repeat this procedure.
Step 2: Create Collections
The following step is to establish collections. Collections are groups of goods with comparable qualities or traits. You might, for instance, have collections for “shoes,” “accessories,” “women’s clothing,” “men’s clothing,” etc. Follow these steps to create collections in Shopify:
- Visit your Shopify store and sign in.
- Click on Products > Collections.
- To create a collection, click.
- Give your collection a name.
- Select the criteria for the products you wish to include in the collection in the Conditions area (such as product tags, product category, seller, etc.).
- Press “Save”.
For each collection in your store, follow the same procedure.
Step 3:Install a collection filter app
You must set up a collection filter feature in order to display the filters on your store now that you have created product tags and collections. The Shopify Store offers a wide variety of collection filter feature, including the following:
- Filter, Search, and Merchandising Power Tools
- Collection Filter & Search Bar with Smart Product Filter
- Install the feature from your store after selecting the one that best suits your needs.
Step 4: Configure the Collection Filter Feature
You must set up the collection filter feature to display the filters on your store after installing it. Depending on the feature you use, the precise processes will change, however the following are some broad principles:
- Visit your Shopify store and sign in
- Access the Your Collection Filter.
- To customize the filters, follow the feature’s instructions (e.g., select which collections to display filters on, select the filter criteria to use, etc.).
- Save your preferences
Step 5: Preview and test your collection filters
Once you’ve set up the collection filter feature, check to see if the filters are appearing properly by previewing your store. To make sure the filters are functioning properly, try using alternative criteria.
Another Way to Add Collection Filters Feature in Shopify via code:
Step 1: Create Product Tags
The creation of product tags is the initial step in adding collection filters. To assist categorize your products, you may add product tags, which are labels or keywords, to them. Use product tags like “men’s clothing,” “women’s clothing,” “shoes,” “accessories,” etc. as an illustration. Follow these steps to generate product tags in Shopify:
- Visit your Shopify store and sign in
- View All Products under Products.
- Pick the item you wish to add tags to by clicking it.
- Enter your selected product tags in the Tags area.
- Press “Save”
- For each product in your store, repeat this procedure.
Step 2: Create Collections
The following step is to establish collections. Collections are groups of goods with comparable qualities or traits. You might, for instance, have collections for “shoes,” “accessories,” “women’s clothing,” “men’s clothing,” etc. Follow these steps to create collections in Shopify:
- Visit your Shopify store and sign in.
- Click on Products > Collections.
- To create a collection, click.
- Give your collection a name.
- Select the criteria for the products you wish to include in the collection in the Conditions area (such as product tags, product category, seller, etc.).
- Press “Save”
For each collection in your store, follow the same procedure.
After that you can follow the below code to Add Collection Filters Feature in Shopify:
<form id="sidebar-filter-form">
{%- for filter in collection.filters -%}
<div class="fillter-block">
<button
class="accordion-button py-2 fw-bold shadow-none"
type="button"
data-bs-toggle="collapse"
data-bs-target="#filter-collapse-{{ forloop.index }}"
aria-expanded="true"
aria-controls="filter-collapse-{{ forloop.index }}"
>
{{ filter.label }}
{% render 'icons', icon: 'arrowdown' %}
{%- if filter.active_values.size > 0 -%}
<span class="badge bg-secondary ms-2">
{{ filter.active_values.size }}
</span>
{%- endif -%}
</button>
<div id="side-filter-collapse-{{ forloop.index }}" class="collapse show">
<div class="py-2 px-1">
{%- case filter.type -%}
{%- when 'list' -%}
<ul class="list-unstyled">
{%- for filter_value in filter.values -%}
{% assign filterlabel = filter.label | downcase %}
<li class="form-check{% if filterlabel == 'color' or filterlabel == 'colour' %} color-filter{% endif %}">
<div class="filter-checkbox">
<input
type="checkbox"
id="side-Filter-{{ filter.label }}-{{ forloop.index }}"
class="side-bar-collection-filter"
name="{{ filter_value.param_name }}"
value="{{ filter_value.value }}"
{% if filter_value.active -%}
checked
{%- endif %}
{% if filter_value.count == 0 and filter_value.active == false -%}
disabled
{%- endif %}
>
<span>{% if filterlabel == 'color' or filterlabel == 'colour' %}<span style="background:{{ filter_value.value }};"></span>{% endif %}</span>
</div>
<label class="form-check-label" for="Filter-{{ filter.label }}-{{ forloop.index }}">
{{ filter_value.label | escape }} ({{ filter_value.count }})
</label>
</li>
{%- endfor -%}
</ul>
{%- when 'price_range' -%}
<div class="filter-price-group d-flex">
<div class="col-6 px-1">
<div class="d-flex align-items-center">
<div class="flex-grow-1">
<input
id="side-Filter-min-{{ filter.label }}-{{ forloop.index }}"
class="side-bar-collection-filter form-control"
name="{{ filter.min_value.param_name }}"
{% if filter.min_value.value -%}
value="{{ filter.min_value.value | money_without_currency | replace: ',', '' }}"
{%- endif %}
type="number"
placeholder="0"
min="0"
max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
>
<label for="Filter-min-{{ filter.label }}-{{ forloop.index }}">
{{ 'collection.filter.from' | t }}
</label>
</div>
</div>
</div>
<div class="col-6 px-1">
<div class="d-flex align-items-center">
<div class="flex-grow-1">
<input
id="Filter-max-{{ filter.label }}-{{ forloop.index }}"
class="side-bar-collection-filter form-control"
name="{{ filter.max_value.param_name }}"
{% if filter.max_value.value -%}
value="{{ filter.max_value.value | money_without_currency | replace: ',', '' }}"
{%- endif %}
type="number"
placeholder="0"
min="0"
max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
>
<label for="Filter-max-{{ filter.label }}-{{ forloop.index }}">
{{ 'collection.filter.to' | t }}
</label>
</div>
</div>
</div>
</div>
{%- endcase -%}
</div>
</div>
</div>
{%- endfor -%}
</form>
Conclusion
Customers may locate the products they desire more easily by using collection filters on your Shopify site, which will eventually improve their shopping experience and boost sales. You can quickly and easily add collection filters to your business by following the instructions provided in this article.
To guarantee that the filters display effectively, choose the appropriate collection filter features for your store and configure it correctly. Once you’ve introduced collection filters, be sure to thoroughly test them to make sure they’re functional and giving your customers the best shopping experience possible.
If you face any problem while performing this code you can visit our site or contact us.
In addition, if you want full js code which will be used to access this code you can contact us.
Click here to Get More Information….
Hazel is an experienced content writer with a passion for creating compelling stories that resonate with readers. She has a proven track record of producing high-quality content for websites, blogs, and social media platforms across a range of industries.
Nowadays, it is essential to incorporate filters in order to enhance the overall user experience significantly. I have successfully implemented this feature, thanks to your guidance on the steps.
Good article, Collection Filters saves time and effort by presenting only the relevant items.
Thanks for using code. I’m working on filters. Found Helpful
Nice blog, creation of product tags is necessary step to categorize & manage your products easily.
I have added the liquid part to filter snippet , now the issue is am facing with js part will you please help me with the javscript part thanks.
Hi Birsen, you can checkout our code snippet regarding the collection filters.
https://theshopzila.com/code-snippets/collection-filters/