gistfile1.html

<!-- Step 1: Add your filters -->
<!-- The collection filter is entirely optional -->
<!-- You can have as many as 3 of the product tags filters --> 

<ul class="clearfix">
  <li class="clearfix filter">
    <p>Shop by category</p>
    <select class="coll-picker">
      <option value="all">All</option>
      {% for c in collections %}
      {% unless c.handle == 'all' %}
      {% if collection.handle == c.handle %}
      <option value="{{ c.handle }}" selected>{{ c.title }}</option>
      {% else %}
      <option value="{{ c.handle }}">{{ c.title }}</option>
      {% endif %}
      {% endunless %}
      {% endfor %}
    </select>
  </li>
  <li class="clearfix filter">
    {% assign tags = 'Red, Green, Blue' | replace: ' ,', ',' | replace: ', ', ',' | split: ',' %}
    <p>Shop by color</p>
    <select class="coll-filter">
      <option value="">All</option>
      {% for tag in tags %}
      {% if current_tags contains tag %}
      <option value="{{ tag | handle }}" selected>{{ tag }}</option>
      {% elsif collection.all_tags contains tag %}
      <option value="{{ tag | handle }}">{{ tag }}</option>
      {% endif %}
      {% endfor %}
    </select>
  </li>
  <li class="clearfix filter">
    {% assign tags = 'Small, Medium, Large' | replace: ' ,', ',' | replace: ', ', ',' | split: ',' %}
    <p>Shop by size</p>
    <select class="coll-filter">
      <option value="">All</option>
      {% for tag in tags %}
      {% if current_tags contains tag %}
      <option value="{{ tag | handle }}" selected>{{ tag }}</option>
      {% elsif collection.all_tags contains tag %}
      <option value="{{ tag | handle }}">{{ tag }}</option>
      {% endif %}
      {% endfor %}
    </select>
  </li>
</ul>

<!-- Step 2: Add this at the bottom of collection.liquid -->

<script>
  /* Product Tag & Collection Filters - Good for any number of filters on any type of collection pages */
  /* Give you product tag filter select element a class of coll-filter */
  /* Give your collection select a class of coll-picker */
  /* Brought to you by Caroline Schnapp */
  var allFilters = jQuery('.coll-filter, .coll-picker');
  allFilters.change(function() {
    var newTags = [];
    jQuery('.coll-filter').each(function() { 
      if (jQuery(this).val()) {
        newTags.push(jQuery(this).val());
      }
    });
    if (newTags.length) {
      var query = newTags.join('+');
      if (jQuery('.coll-picker').length) {
        window.location.href = '/collections/' + jQuery('.coll-picker').val() + '/' + query;
      }
      else {
        window.location.href = '{{ 'tag' | link_to_tag: 'tag' | split:'href="' | last | split:'">' | first }}'.replace('tag', query);
      }
    } 
    else {
      if (jQuery('.coll-picker').length) {
        window.location.href = '/collections/' + jQuery('.coll-picker').val();
      }
      else {
        {% if collection.handle %}
        window.location.href = '/collections/{{ collection.handle }}';
        {% elsif collection.products.first.type == collection.title %}
        window.location.href = '{{ collection.title | url_for_type }}';
        {% elsif collection.products.first.vendor == collection.title %}
        window.location.href = '{{ collection.title | url_for_vendor }}';
        {% endif %}
      }
    }
  });
</script>