Categories

Featured templates

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

Alice Weasley January 3, 2020
Rating: 4.5. From 2 votes.
Please wait...

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

Another method of dealing with all the technical details is entrusting all the tasks to the experts. Template Monster has prepared a general solution to all your problems and challenges related to launching the business project with Shopify. Meet the Shopify Business Startup Kit, which is equipped with everything you need to begin the flawless operation of your store.

This is a complete set of Shopify store development services, which includes the creation and configuration of the store, content installation, and necessary apps. Thus, professionals will register and transfer the store to your Shopify account upon your request, set up a store, and make all the necessary customization processing. Also, they’ll take care of the content, namely install the products, visuals, navigation, blog posts, etc. Finally, they’ll install all must-have apps, such as SEO Image Optimizer, email, Product Reviews, Oberlo, GDPR Cookie Consent Banner, and Privy-exit pop-ups.

What’s important, after getting the kit and a theme for your store, all you’ll need to do is tell us the major information about your store and its goods, and after three days, you will get the end professionally devised shop customized upon your needs. In case you will have some issues or would like to change something, it’s not a problem as there will be a month of premium technical support.

Thus, for getting a ready-to-go Shopify store, you should get the TM kit and a theme. You don’t even have to buy a theme as we have free options for you. If you’re looking for a cool free template to sell clothes on your site, consider Apparelix. It’s important that you can customize it to sell any goods you plan to distribute via your store. Apparelix has basic features and plugins that you will need to run a site, and you don’t require coding skills as everything is managed easily with the intuitive editor. It is fast and SEO-friendly, which is important if you want to attract visitors and appear in Google search. What’s more, the template is adaptive to various screen types, which is critical as many clients look through the goods via their smartphones. You’ll be able to set up several languages and currencies, which increases your audience.

In this way, if you don’t want to deal with the technical issues or don’t want to spend your time on them, all you need is to take the theme and Shopify Business Startup Kit, and you’ll be able to get your first clients after just three days.

Shopify Responsive Themes
This entry was posted in Shopify Tutorials and tagged collection, filter, page, Shopify, tag. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket