Collection dropdown filter for Shopify

Home » Collection dropdown filter for Shopify

Heyo, I found this wasn’t too easy to find any help on so I just built my own function and thought I would put it up here. I needed a filter for the collections in Shopify.

//make sure this js code is added after the other theme scripts in theme.liquid!
//collection filter

var filterGoCollection = function(takenewterm){
var patha = window.location.protocol;
var pathb = window.location.host;
window.location.href = patha+'//'+pathb+takenewterm; };
jQuery("#SortTags").change(function(){
var selectedcollection = jQuery(this).children("option:selected").val();
filterGoCollection(selectedcollection);
});

Here’s the filter dropdown from the collection-filters.liquid file:

{% if section.settings.tags_enable %}
<div class="column is-one-third-tablet is-half-mobile">
<span class="select">
<label for="SortTags" class="is-hidden">{{ 'collections.filters.title_tags' | t }}</label>
<select class="select" name="SortTags" id="SortTags">
{% if current_tags %}
{% if collection.handle %}
<option value="/collections/{{ collection.handle }}">{{ 'collections.filters.all_tags' | t }}</option>
{% elsif collection.current_type %}
<option value="{{ collection.current_type | url_for_type }}">{{ 'collections.filters.all_tags' | t }}</option>
{% elsif collection.current_vendor %}
<option value="{{ collection.current_vendor | url_for_vendor }}">{{ 'collections.filters.all_tags' | t }}</option>
{% endif %}
{% else %}
{% if current_tags contains tag %}
<option value="">{{ 'collections.filters.all_tags' | t }}</option>
{% else %}
<option value="">{{ 'collections.filters.title_tags' | t }}</option>
{% endif %}
{% endif %}
{% for tag in collection.all_tags %}
<option value="/collections/{% if collection.handle != blank %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handleize }}"{% if current_tags contains tag %} selected="selected"{% endif %}>{{ tag }}</option>
{% endfor %}
</select>
</span>
</div>
{% endif %}