Skip to content

Instantly share code, notes, and snippets.

@garrettmac
Last active March 15, 2023 00:10
Show Gist options
  • Save garrettmac/7a536ec1dd40c69bac9dffbb715902ac to your computer and use it in GitHub Desktop.
Save garrettmac/7a536ec1dd40c69bac9dffbb715902ac to your computer and use it in GitHub Desktop.
Shopify Filter Snippets
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>
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>
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>
{% 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 %}
<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>
@garrettmac
Copy link
Author

garrettmac commented Dec 20, 2016

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

Shopify Button Tag Filter Image

Also see this helpful link

Copy link

ghost commented Apr 2, 2018

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!

@SImoncellino
Copy link

SImoncellino commented Oct 8, 2019

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

@ersanjay5991
Copy link

i want to add the color and size variant option .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment