Tag Filter Collection​

You can use product tags to filter collections into smaller subsets of products.

How Tag Filtering Works​

Apply tag filters by appending /{tag-handle} to the collection URL, where {tag-handle} is the processed version of the desired product tag.

For example, if you only want to display products in the homepage collection with the "new" tag, you can use the following URL structure:

https://my-store.myshopline.com/collections/frontpage/summer

You can also filter by multiple tags by combining the processed tags with a plus sign:

https://my-store.myshopline.com/collections/frontpage/summer+winter

Resources​

• all_tags attribute in collection object
• current_tags object in collection object
• URL helper link_to_add_tag
• URL helper link_to_remove_tag

Implementing Tag Filtering​

Tag filtering is achieved by modifying the URL parameters of the collection page. However, you should also provide a way for users to interact with this feature so they don't need to manually edit the URL.

The tag filter display should be included within the collection template, or through a section included within the collection template.

To implement tag filtering functionality, you can iterate over all product tags in the collection object's all_tags attribute. For each tag, you can check for its existence in the current_tags object and output a link to add or remove it accordingly.

{{#if collection.all_tags.length > 0 }}
  <ul class="tag-filters">
    {{#for collection.all_tags as |tag| }}
      {{#contains current_tags tag}}
        <li class="tag-filters__item active">{{link_to_remove_tag tag title=tag}}</li>
      {{else}}
        <li class="tag-filters__item">{{link_to_remove_tag tag title=tag}}</li>
      {{/contains}}
    {{/for}}
  </ul>
{{/if}}