All Tutorials

Filter collections with product tags

All Tutorials

Filter collections with product tags

Filter collections with product tags

You can let customers filter your collections with product tags by editing your theme code. This customization shows you how to add either a drop-down menu or a set of radio buttons that lists all of the product tags in a collection. When a customer selects a product tag, only products with that tag will be shown.

Filter collections with tags

Check your theme settings

Most themes include the option to enable a drop-down menu to filter collections by product tag. To check if your theme has this option:

  1. Go to the theme editor.

  2. From the drop-down menu at the top of the page, or from the Templates menu on mobile, select Collection pages.

  3. Click Collection pages or Collection. If your theme includes the option to enable filtering by tag, then you will see a Enable filtering by tag or Enable filtering by product tag checkbox in the theme editor.

  4. Select Enable filtering by tag or Enable filtering by product tag.

  5. Click Save.

If your theme doesn't include the option to enable a drop-down menu to filter collections by product tag, then you can add one by editing your theme code. Continue to follow the next steps.

Add a drop-down menu to collection pages

Filter collections with tags

Follow these steps to add a drop-down menu to filter your collections. If you want to use radio buttons instead, then skip to the next section.

  1. In the Templates directory, click collection.liquid.

  2. In the place that you want your new drop-down menu to appear on the collection page, paste the following code:

    <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 */
      const collFilters = document.querySelectorAll('.coll-filter');
    
      if (collFilters.length > 0) {
        collFilters.forEach((collFilter) => {
          collFilter.addEventListener('change', function(){
            var newTags = [];
            collFilters.forEach((collFilter) => {
              for(var i = 0; i <= collFilter.length-1; i++){
                if(collFilter[i].selected == true && collFilter[i].value != "") {
                  newTags.push(collFilter[i].value);
                }
              }
            });
    
            if (newTags.length) {
              var query = newTags.join('+');
              window.location.href = '/collections/{{ collection.handle }}/' + 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>

    The exact placement of the code will vary from theme to theme, and also depends on personal preference. You can experiment with putting the code in different places, then checking to see where the drop-down menu appears on a collection page of your online store.

  3. Click Save.

Add radio buttons to your collection pages

Filter collections with tags

Follow these steps to add radio buttons to filter your collections. If you want to use a drop-down menu instead, then skip to the previous section.

  1. In the Templates directory, click collection.liquid.

  2. In the place that you want your new radio buttons to appear on the collection page, paste the following code:

    <ul class="subnav clearfix">
      <li{% unless current_tags %} class="active"{% endunless %}>
        {% if collection.handle %}
        <a href="/collections/{{ collection.handle }}{% if collection.sort_by %}?sort_by={{ collection.sort_by }}{% endif %}">All</a>
        {% elsif collection.current_type %}
        <a href="{{ collection.current_type | url_for_type | sort_by: collection.sort_by }}">All</a>
        {% elsif collection.current_vendor %}
        <a href="{{ collection.current_vendor | url_for_vendor | sort_by: collection.sort_by }}">All</a>
        {% endif %}
      </li>
      {% for tag in collection.all_tags %}
      {% if current_tags contains tag %}
      <li class="active">
        {{ tag | link_to_remove_tag: tag }}
      </li>
      {% else %}
      <li>
        {{ tag | link_to_tag: tag }}
      </li>
      {% endif %}
      {% endfor %}
    </ul>
    <style>
      .clearfix:before, .clearfix:after { content: ""; display: table; }
      .clearfix:after { clear: both; }
      .clearfix { zoom: 1; }
      /* Subnavigation styles */
      .subnav { clear: both; list-style-type: none; margin: 35px 0; padding: 0; }
      .subnav li { display: block; float: left; }
      .subnav li a {
        display: block;
        height: 28px;
        line-height: 28px;
        padding: 0 7px;
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        border-radius: 7px;
        background: #eee;
        margin: 0 7px 7px 0;
        color: #666;
      }
      .subnav li a:hover, .subnav li.active a {
        background: #666;
        color: #fff;
      }
    </style>

    The exact placement of the code will vary from theme to theme, and also depends on personal preference. You can experiment with putting the code in different places, then checking to see where the radio buttons appear on a collection page of your online store.

  3. Click Save.