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 lon…

Shopify tag filter groups for individual collection search

{% if collection.all_tags.size > 1 %}

  {% comment %}
    Get all of the filter groups
  {% endcomment %}
  {% for tag in collection.all_tags %}
    {% if tag contains '_' %}
      {% assign splitTag = tag | split: '_' %}
      {% unless filterTags contains splitTag.first %}
        {% capture filterTags %}{{ filterTags }}+{{ splitTag.first }}{% endcapture %}
      {% endunless %}
    {% endif %}
  {% endfor %}
  {% assign filterTags = filterTags | slice: 1, filterTags.size | split: '+' %}

  {% comment %}
    Define a checkbox form for the filters
  {% endcomment %}
  <form id="custom-collection-filter" action="/collections/{{ collection.handle }}">
    {% comment %}
      Loop through the main filter groups for the titles
    {% endcomment %}
    {% for tag in filterTags %}
      <h4>Filter by {{ tag | capitalize }}</h4>
      <ul>
        {% comment %}
          Add checkboxes for each filter group
        {% endcomment %}
        {% for aTag in collection.all_tags %}
          {% assign tempTag = aTag | split: '_' %}
          {% if tag == tempTag.first %}
            <li><label>{{ tempTag.last }}
            {% if current_tags contains aTag %}
              <input type="checkbox" checked name="{{ tempTag.first }}" value="{{ aTag }}">
            {% else %}
              <input type="checkbox" name="{{ tempTag.first }}" value="{{ aTag }}">
            {% endif %}
            </label></li>
          {% endif %}
        {% endfor %}
      </ul>
    {% endfor %}
    <button type="submit" class="btn">Filter</button>
  </form>

  <script type="text/javascript">
    /*
      We are searching a specific collection
      so we will use the /collections/collection-handle for the search
    */
    $('#custom-collection-filter').submit(function(event) {
      event.preventDefault();
      var filterUrl = '';
      var data = $(this).serializeArray();
      for (var i = 0; i < data.length; i++) {
        filterUrl += data[i].value;
        if (i !== (data.length - 1)) {
          filterUrl += '+';
        }
      }
      document.location.href = '/collections/{{ collection.handle }}/' + filterUrl;
    });
  </script>
{% endif %}

Love the check boxes, but this doesn't function completely: the URL is not modified properly.