If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

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

This tutorial shows how to add/remove tag filter in collection pages in Shopify.

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

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:

    How_to_add-remove_filter_tag_in__collection_pages_in_Shopify_1a

    How_to_add-remove_filter_tag_in__collection_pages_in_Shopify_1b

    How_to_add-remove_filter_tag_in__collection_pages_in_Shopify_1c

  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:

    How_to_add-remove_filter_tag_in__collection_pages_in_Shopify_1

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

How_to_add-remove_filter_tag_in__collection_pages_in_Shopify_2

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

    How_to_add-remove_filter_tag_in__collection_pages_in_Shopify_1a

    How_to_add-remove_filter_tag_in__collection_pages_in_Shopify_1b

  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:

    How_to_add-remove_filter_tag_in__collection_pages_in_Shopify_3

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

  3. Save the changes and refresh the page:

    How_to_add-remove_filter_tag_in__collection_pages_in_Shopify_4

Feel free to check the detailed video tutorial below:

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