Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@darryn
Last active August 23, 2023 03:51
Show Gist options
  • Star 53 You must be signed in to star a gist
  • Fork 12 You must be signed in to fork a gist
  • 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 %}
@brihershberger
Copy link

Hey Darryn,

This is great! Thanks so much! Just curious: is there a way to modify this to include items that have either of the tags instead of both? For example, if I click "color_Purple" and "color_Blue", the way it's set up now will only give me items that are tagged with both. Is there a way to include it so that I see all items that are tagged with either of the tags? (e.g. Say I want to see all purple shirts as well as all blue shirts, not just shirts that are tagged with both purple and blue–is this possible?).

Best,
Brian

@shanesaravia
Copy link

Hi Darryn,

Is it possible to add a code to have an accordion menu for these filters. I want to be able to open and minimize these filters by clicking the heading of the filter. Please let me know if you can help me out with this.

Thank You,
Shane

@nehusharma
Copy link

Hi Darryn,

This is great! Thankyou Thankyou Thankyou :)

@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