Product Tags

Displaying tags on the collection page is a piece of cake, but showing them on the product page always tends to baffle people. Thank goodness for the flexibility of Liquid though, which makes this quite an easy task.

All Products Collection
Before getting into the actual code, we need to create a collection that holds all the products. We can accomplish this by creating a smart collection titled All with conditions set to product price is greater than 0. Go ahead and do this now by clicking the “Collections” tab, then create a new smart collection.

The Tags
Now that we have a way to iterate through all the products, we can easily grab the tags for each product and dynamically show all products containing the specified tag(s) when clicked. Open product.liquid and locate the following code towards the end of the page…

Browse more {{ product.type | link_to_type }} or additional 
{{ product.vendor | link_to_vendor }} products.

This would be an ideal place to add the tags, so go ahead an replace the previous code with the following…

Browse more {{ product.type | link_to_type }}, additional 
{{ product.vendor | link_to_vendor }} products, or items tagged 
{% for tag in product.tags %}
<a href="/collections/all/{{ tag }}">{{ tag }}</a>{% unless forloop.last %}, 
{% endunless %}{% endfor %}.

Save and test it out. That’s it!