Collection filtering using tag in Shopify.

This blog post shows how to add/remove tag filters on collection pages.

Follow the steps below to add filter by tags.

1. From your Shopify admin, go to Online Store > Themes.

2. Select the theme which you want to edit and click Actions > Edit code.

3. Open collection.liquid and paste this code wherever you want to show filters.

{% if is_filter_by_available or section.settings.sort_enable %}
    <div class="filters-toolbar-wrapper{% if is_filter_by_available %} filters-toolbar--has-filter{% endif %}">
      <div class="page-width">          

        {% if section.settings.tags_enable %}
        {% unless collection.all_tags.size == 0 %}
        <div class="filters-toolbar__item-child">
          <label class="filters-toolbar__label select-label" for="FilterTags">{{ 'collections.filters.title_tags' | t }}</label>
          <div class="filters-toolbar__input-wrapper select-group">
            <select class="filters-toolbar__input hidden" name="FilterTags" id="FilterTags" aria-describedby="a11y-refresh-page-message a11y-selection-message" data-select-input>
              <option value="{{ collection.url }}">{{ 'collections.filters.all_tags' | t }}</option>
              {% for tag in collection.all_tags %}
              {%- assign new_url = tag | link_to_tag: tag | split: 'href="' | last | split: '"' | first -%}
              <option value="{{ new_url }}"{% if current_tags contains tag %} selected="selected"{% endif %}>{{ tag }}</option>
              {% endfor %}
            </select>

            <span class="down-icon">
              <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-chevron-down" viewBox="0 0 9 9"><path d="M8.542 2.558a.625.625 0 0 1 0 .884l-3.6 3.6a.626.626 0 0 1-.884 0l-3.6-3.6a.625.625 0 1 1 .884-.884L4.5 5.716l3.158-3.158a.625.625 0 0 1 .884 0z" fill="#fff"/></svg>
            </span>

          </div>
        </div>
        {% endunless %}
        {% endif %}          
      </div>   
    </div>
    {% endif %}

4. Save the changes and refresh your website. Collection filtering using tag in Shopify.

expoundsofttechsolution Collection filtering using tag in Shopify.