Filter collections by tag
You can use product tags to filter a collection into smaller subsets of products.
How tag filtering works
Anchor link to section titled "How tag filtering works"Tag filters are applied by appending /[tag-handle]
to the collection URL, where [tag-handle]
is the handleized version of the desired product tag.
For example, if you only wanted to show products from the frontpage
collection that are tagged with new
, then you could use the following URL structure:
You can also filter by multiple tags by combining the handleized tags with a +
:
- The
all_tags
attribute of thecollection
object - The
current_tags
object - The
link_to_add_tag
URL filter - The
link_to_remove_tag
URL filter
Implementing tag filtering
Anchor link to section titled "Implementing tag filtering"Tag filtering is applied based on alterations to the collection URL. However, you should provide customers with a way to interact with this functionality so that they don't need to manually alter the URL.
The tag filter display should be included in the collection
template, or through a section that's included in the collection
template.
To implement a tag filtering feature, you can loop through all of the product tags in the collection using the all_tags
attribute of the collection
object. For each tag, you can check for its presence in the current_tags
object, and then output a link to add or remove it accordingly.