Shopify Filter Snippets

custom.filter.buttons.tags.liquid

Tag Filter:
<ul class="subnav clearfix">
  <li{% unless current_tags %} class="active"{% endunless %}>
    {% if collection.handle %}
    <a href="/collections/{{ collection.handle }}{% if collection.sort_by %}?sort_by={{ collection.sort_by }}{% endif %}">All</a>
    {% elsif collection.current_type %}
    <a href="{{ collection.current_type | url_for_type | sort_by: collection.sort_by }}">All</a>
    {% elsif collection.current_vendor %}
    <a href="{{ collection.current_vendor | url_for_vendor | sort_by: collection.sort_by }}">All</a>
    {% endif %}
  </li>
  {% for tag in collection.all_tags %}
  {% if current_tags contains tag %}
  <li class="active">
    {{ tag | link_to_remove_tag: tag }}
  </li>
  {% else %}
  <li>
    {{ tag | link_to_tag: tag }}
  </li>
  {% endif %}
  {% endfor %}
</ul>

custom.filter.buttons.vendors.liquid

Sort By Vendor:
<ul class="subnav clearfix">
{% assign vendor_list = '' %}
{% for product in collection.all_products %}
{% if vendor_list contains product.vendor %}
{% else %}
  <li>
{% comment %}
   
  <a href="/collections/{{ collection.handle }}{% if collection.sort_by %}?sort_by={{ collection.sort_by }}{% endif %}">All</a>
     {% endcomment %}
<a title="{{ product.vendor }}">{{ product.vendor }}</a>
  
  </li>
{% capture temp %}{{ vendor_list }}{{ product.vendor }}{% endcapture %}{% assign vendor_list = temp %}
{% endif %}
{% endfor %}
</ul>

custom.filter.list.types.liquid

Shop:
<!-- https://sunnyradios.com/collections/types?q=Antennas -->
<ul>
  {% for product_type in shop.types %}
  {% assign type_handle = product_type | handleize %}
  {% assign type_collection = collections[type_handle] %}
  <li class="{% if product.type == product_type %}current{% endif %}">
    {% if type_collection == empty %}{{ product_type | link_to_type  }}
    {% else %}{{ type_collection.title | link_to: type_collection.url }}
    {% endif %}
  </li>
  {% endfor %}
</ul>

custom.filter.list.vendors.liquid

{% if collection.url != blank %}
<h4>Shop by vendor:</h4>
<ul>
	{% for product_vendor in collection.all_vendors %}
	<li>
		{% if current_tags contains product_vendor %}
		<a class="active" href="{{ collection.url }}">{{ product_vendor }}</a>
		{% else %}
		<a href="{{ collection.url }}/{{ product_vendor | handle }}">{{ product_vendor }}</a>
		{% endif %}
	</li>
	{% endfor %}
</ul>
{% endif %}

filter-script.liquid

<script>
/* Product Tag Filters - Good for any number of filters on any type of collection page. */
Shopify.queryParams = {};
if (location.search.length) {
  for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
    aKeyValue = aCouples[i].split('=');
    if (aKeyValue.length > 1) {
      Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
    }
  }
}
var collFilters = jQuery('.coll-filter');
collFilters.change(function() {
  var newTags = [];
  var newURL = '';
  collFilters.each(function() {
    if (jQuery(this).val()) {
      newTags.push(jQuery(this).val());
    }
  });

  if (newTags.length) {
    Shopify.queryParams.constraint = newTags.join('+');
  }
  else {
    delete Shopify.queryParams.constraint;
  }
  location.search = jQuery.param(Shopify.queryParams);

});
</script>

How to use.

1. Add the filter-script.liquid
   script to the bottom of the collections.liquid Page.

2. Then create new snippets using the following titles (e.g. custom.filter.list.vendors.liquid - full path will be snippets/custom.filter.list.vendors.liquid)

3. Include it in your collection.liquid by using the {% include 'SNIPPET FILE NAME' %} syntax.

Button Filter Example

For instance the follow provides the following image bellow

{% include 'custom.filter.buttons.vendors' %}
{% include 'custom.filter.buttons.tags' %}

Also see this helpful link

Thanks so much for this cole. Can I ask, will this work in Brooklyn sections? Also, if I want to pre-determine just a list of tags as we use too many to show, where could I put this in the code? Appreciate any help for this new Liquid guy!

Nice!Thanks for sharing. This is actually the first Code I got to make to work on my theme, finally making it able to filter according to several conditions!However...it doesn't look as good as in your example. It's vertically spreads all over the webpage, and not next to the collection but in top or at the bottom. Obviousy I still need to find a way to beautifully hide them in drop down menus close to the Collection...but no idea how to achieve that haha

i want to add the color and size variant option .