Filtering collections with product tags

If you want to make it easier for your customers to filter products in your collections, you can add in a drop-down that displays product tags. When your customers select a product tag, only products with that tag will be displayed.

Filter collection with tags

  1. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  2. Under the "Templates" folder, locate and click on collection.liquid to open it in the online code editor.

  3. In the online code editor, locate where you would like the drop-down menu to appear. Then, copy and paste the code below:

    
    <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 */
      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>
    
    
  4. Save your changes.

Want to discuss this page?

Visit the Shopify Community