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>

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 .