Skip to content

Instantly share code, notes, and snippets.

@darryn
Last active August 23, 2023 03:51
Show Gist options
  • Save darryn/8047749 to your computer and use it in GitHub Desktop.
Save darryn/8047749 to your computer and use it in GitHub Desktop.
Create tag filter groups in Shopify. This snippet is designed to group and separate out collection tags. It requires the tags to share a common value prepended to the tag with an underscore. E.g. to create a separate tag filter group for 'brands', each product will need to be tagged with 'brand_Nike' or 'brand_Reebok'. Some of this is probably l…
{% if template contains 'collection' and collection.all_tags.size > 1 %}
<!-- A recursive loop to catch and filter out the different tag categories -->
{% assign c = 0 %}
{% for t in collection.all_tags %}
{% capture cat %}{{ cat }}{% capture temp_cat %}{% if t contains '_' %}{% assign cat_grp = t | split: '_' %}{{ cat_grp.first }}{% endif %}{% endcapture %}{% unless cat contains temp_cat %}{% if t contains '_' %}{% assign new_cat_grp = t | split: '_' %}{{ new_cat_grp.first }}{% endif %}{% unless forloop.last %}+{% endunless %}{% assign c = c | plus: 1 %}{% endunless %}{% endcapture %}
{% endfor %}
<!-- create array of tag categories -->
{% assign cat_array = cat | split: '+' %}
<!-- loop through tag categories -->
{% for i in cat_array %}
<!-- ignore if tag category is empty -->
{% unless i == '' %}
<h5>Filter by {{ i }}</h5>
<ul class="nav">
<!-- loop through collection tags -->
{% for t in collection.all_tags %}
<!-- if tag contains the category title -->
{% if t contains i %}
<!-- strip out tag category prefix and add/remove link for tag filtering -->
{% if current_tags contains t %}
<li>{{ t | remove: i | remove: '_' | append: '&nbsp;x' | link_to_remove_tag: t }}</li>
{% else %}
<li>{{ t | remove: i | remove: '_' | link_to_add_tag: t }}</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
{% endunless %}
{% endfor %}
{% endif %}
@inklingsofreality
Copy link

Just to note, you can do this for Blogs, by changing Collections to Blogs and it works just as well.

@clauuudiu
Copy link

Hello,
I am pretty new to shopify, and I would like to ask.. where should I put this code, in order to get this functionality?
Thank you

@rlfrahm
Copy link

rlfrahm commented Oct 27, 2019

Thanks for this! Works just as described!

@couteauxcollection
Copy link

Hello,
I have a theme I really like but I really need to use a group filter. Supply make it but it not very nice. Where do I have to add this code please ? I tried in several places but it doesn't work

@KeithBradley
Copy link

hi - this is a great snippet, I ended up making a few modifications to it so filters can be drilled down when clicked and also appear as check boxes.

https://github.com/KeithBradley/Shopify_Collection_Filters

@SajiJohnMiranda
Copy link

SajiJohnMiranda commented Mar 13, 2021

Hi Darryn
Can I see it working on your website since I am not much a technical person to understand how this works.
Also, should I include the above code in the collection.liquid fie ?

Thanks
John

@KeithBradley
Copy link

Hi John,

I've just added a video to the https://github.com/KeithBradley/Shopify_Collection_Filters repo to show how it works.

An example site using this is https://bertieandminnie.co.uk/collections/fragrance

Thanks
Keith

@SajiJohnMiranda
Copy link

SajiJohnMiranda commented Mar 16, 2021 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment