sarhov
11/3/2015 - 9:29 AM

Create tag filter groups in Shopify. This snippet is designed to group and separate out collection tags. It requires the tags to share a

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 longer than it needs to be so feel free to fork and develop.

Hope this helps others out there :)

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