Filtering Shopify Collections By Certain Product Tags In The Debut Theme


Shopify is a complete ecommerce solution that allows you to set up an online store to sell your goods. It lets you organize your products, customize your storefront, accept credit card payments, track and respond to orders — all with a few clicks of the mouse.

What are Shopify product tags?

Product Tags are searchable keywords associated with our product. An ecommerce stores with large inventories and many variations of a product type may benefit from the use of a filtering system. Many Shopify themes include the option to enable a drop-down menu to filter collections based on product tags. By default any product tag added to a product will be visible to the customer.

In some cases you may not want to display all product tags to your customers. Why? We might use them for internal purposes, and do not need the customer to see them on the collection pages.

This approach is customized for the Debut Theme, based on the article How to hide Shopify product tags from collection filters

We will need to edit our theme file: collection-template.liquid

{% if section.settings.tags_enable or section.settings.sort_enable %}
      <div class="filters-toolbar-wrapper">
        <div class="page-width">
          <div class="filters-toolbar">
            {% if section.settings.tags_enable %}
              <div class="filters-toolbar__item">
                <label for="SortTags" class="label--hidden">{{ 'collections.filters.title_tags' | t }}</label>
                <select class="filters-toolbar__input filters-toolbar__input--filter hidden" 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>
              </div>
            {% endif %}

We need to assign tags we would like to exclude, separated by commas. (In our example we are excluding these tags: Saddleseat, Huntseat, Western).

 {% assign exclude_tags = "Saddleseat,Huntseat,Western" | split: ',' %}

Next we check if the tag we are looking at in the loop is in the exclusion list. If it is, the continue will cause the loop to skip this tag.

{% if exclude_tags contains tag %}
       {% continue %}
{% endif %}

This code is an updated original code with added custom code (highlighted in yellow) to excluding certain product tags.

{% if section.settings.tags_enable or section.settings.sort_enable %}
      <div class="filters-toolbar-wrapper">
        <div class="page-width">
          {% assign exclude_tags = "Saddleseat,Huntseat,Western" | split: ',' %}
          <div class="filters-toolbar">
            {% if section.settings.tags_enable %}
              <div class="filters-toolbar__item">
                <label for="SortTags" class="label--hidden">{{ 'collections.filters.title_tags' | t }}</label>
                <select class="filters-toolbar__input filters-toolbar__input--filter hidden" 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 %}
                     {% if exclude_tags contains tag %}
                        {% continue %}
      	             {% endif %}
                    <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>
              </div>
            {% endif %}

3 comments:

  1. Hi Andrea,
    I’ve just read your post on ‘Filtering Shopify Collections By Certain Product Tags In The Debut Theme’. I would like to know if there is a way to exclude certain tags for each collection variant or not? For example, when I tried the code you mentioned, it would exclude the tags from both my Engagement and Wedding Collection, but The Wedding Collection is the only collection I want to exclude (for example)Tag A for. While in the Engagement collection, I would want to include tag A, but exclude Tag B. How will I be able to do this?

    1. Hi Julie,
      Thank you for reading my post. I usually work with WordPress platform. Designing a website with Shopify was my one time project when I had to get used to the new “Liquid template language” and exclude certain product tags. I looked it up on multiple forums, watched youtube videos and found a solution which worked great for my requirements. Unfortunately I didn’t come across your situation where I needed to exclude tags for collection variant. Shopify has “Experts” who could probably help you with your question. Have a good day!

Leave a Reply

Your email address will not be published. Required fields are marked *