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. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

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

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

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

Want to discuss this page?

Visit the Shopify Community