How to add/remove tag filter in Collections pages in Shopify

How to add/remove tag filter in Collections pages in Shopify

Perform the steps below to add the dropdown filter by tags.

  1. Navigate to Admin > (Online Store) > Themes > Customize theme > Theme Options > Edit HTML/CSS > Templates > collection.liquid.

     

     

     

  2. Paste this code to the area where you want the “Browse by tag” section to appear:
    <div class="clearfix filter">
    <p>Browse by tag:</p>
    <select class="coll-filter">
    <option value="">All</option>
    {% for tag in collection.all_tags %}
    {% if current_tags contains tag %}
    <option value="{{ tag | handle }}" selected>{{ tag }}</option>
    {% else %}
    <option value="{{ tag | handle }}">{{ tag }}</option>
    {% endif %}
    {% endfor %}
    </select>
    </div>
      <script>
        /* Product Tag Filters - Good for any number of filters on any type of collection pages */
        /* Brought to you by Caroline Schnapp */
        var collFilters = jQuery('.coll-filter');
        collFilters.change(function() {
        var newTags = [];
        collFilters.each(function() { 
        if (jQuery(this).val()) {
        newTags.push(jQuery(this).val());
        }
        });
        if (newTags.length) {
        var query = newTags.join('+');
        window.location.href = jQuery('{{ 'tag' | link_to_tag: 'tag' }}').attr('href').replace('tag', query);
        } 
        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>

    We strongly recommend backing up the file before editing it.

  3. Save the changes and refresh the site.

     

If your theme already has the tag filter and you want to remove it, please perform the following steps.

 

  1. Navigate to Admin > (Online Store) > Themes > Customize theme > Theme Options > Edit HTML/CSS > Templates > collection.liquid.

     

     

  2. Use Ctrl F keyboard combination to locate the code for the “tag” and delete it. Usually, you will see the comment section stating this is a tag code.

     

    We strongly recommend to back up the file before editing it.

  3. Save the changes and refresh the page:

Was this article helpful?

Related Articles

Leave A Comment?