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 your Customize theme page and navigate to a collection page in the theme preview. When you are viewing a collection page in the theme preview, you will see the Collection pages tab in the theme editor:
Collection pages tab
  1. Click Collection pages. If your theme includes the option to enable filtering by tag, then you will see a Enable filtering by tag checkbox in the theme editor:
Enable tag filtering
  1. Check Enable filtering by tag.

  2. Click Save.

If your theme does not 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.

Edit your theme.liquid file

In this step, you will add some JavaScript to your theme.liquid file.

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

  2. In the Layout directory, click theme.liquid.

  3. Find the closing </body> tag, near the bottom of the file. Paste the following code on a new line before the closing </body> tag:

    <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. Click Save.

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 this step, you will add the drop-down menu code to your theme. The file that you add the code to will depend on your theme:

    Brooklyn

    If you use Brooklyn, then click collection-template.liquid in the Snippets directory. Find the closing </header> tag in the file. On a new line above it, 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>
    
    

    Jumpstart

    If you use Jumpstart, then click collection-template.liquid in the Sections directory. Find the opening <div class="wrapper wrapper--margins"> tag in the file. On a new line below it, paste the following code:

    
    <div class="clearfix filter tag-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>
    
    

    Other themes

    If you use another Shopify theme, then click collection.liquid in the Templates directory. Find the {% section 'collection-template' %} tag in the file. On a new line above it, 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>
    
    
  2. Click Save. If you use a theme other than Jumpstart, then you are done. If you use Jumpstart, then continue to edit the drop-down menu styling.

Add radio buttons to 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 this step, you will add the following radio button code to your theme:

    
    <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>
    /* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
    .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 file that you add the radio button code to will depend on your theme:

    Brooklyn

    If you use Brooklyn, then click collection-template.liquid in the Snippets directory. Find the closing </header> tag in the file. On a new line above it, paste the radio button code shown above.

    Jumpstart

    If you use Jumpstart, then click collection-template.liquid in the Sections directory. Find the opening <div class="wrapper wrapper--margins"> tag in the file. On a new line below it, paste the radio button code shown above.

    Other themes

    If you use another Shopify theme, then click collection.liquid in the Templates directory. Find the {% section 'collection-template' %} tag in the file. On a new line above it, paste the radio button code shown above.

  2. Click Save.

Edit drop-down menu styling for Jumpstart

If you use Jumpstart and have added the code for a drop-down menu, then follow the next steps to edit the CSS for your menu:

  1. If you use Jumpstart, then in the Assets directory, click theme.scss.liquid. At the very bottom of the file, paste the following code:

    div.tag-filter {
      svg, .arrow  {
        display: none;
      }
      text-align: center;
      margin-bottom: $gutter * 2;
    }
    
  2. Click Save.

Check your theme settings

Many 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 your Customize theme page and navigate to a collection page in the theme preview. When you are viewing a collection page in the theme preview, you will see the Collection pages tab in the theme editor:
Collection pages tab
  1. Click Collection pages. If your theme includes the option to enable filtering by tag, then you will see a Enable filtering by tag checkbox in the theme editor:
Enable tag filtering
  1. Check the Enable filtering by tag checkbox.

  2. Click Save.

If your theme does not 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 a drop-down menu to filter your collections. If you want to use radio buttons instead, then skip to the next section.

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

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

  3. 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 */
      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>
    
    

    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.

  4. 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. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

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

  3. In the place that you want your new drop-down menu 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>
    /* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
    .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 drop-down menu appears on a collection page of your online store.

  4. Click Save.

Want to discuss this page?

Visit the Shopify Community