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…

Shopify tag filter groups

  {% 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 %}

Thanks for this! Works just as described!

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

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

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

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

<!-- /* Font Definitions */ @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {margin:0in; font-size:11.0pt; font-family:"Calibri",sans-serif;} a:link, span.MsoHyperlink {mso-style-priority:99; color:blue; text-decoration:underline;} .MsoChpDefault {mso-style-type:export-only;} @page WordSection1 {size:8.5in 11.0in; margin:1.0in 1.0in 1.0in 1.0in;} div.WordSection1 {page:WordSection1;} -->Wow ! Excellent Keith! Thanks a lotJohn Sent from Mail for Windows 10 From: KeithSent: Tuesday, March 16, 2021 2:21 PMTo: darrynCc: Saji John; CommentSubject: Re: darryn/Shopify tag filter groups @KeithBradley commented on this gist.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/fragranceThanksKeith—You are receiving this because you commented.Reply to this email directly, view it on GitHub, or unsubscribe.