Skip to content

Instantly share code, notes, and snippets.

@jonathanmoore
Last active June 9, 2021 15:24
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jonathanmoore/671035399d96d1362121bfc0679a182b to your computer and use it in GitHub Desktop.
Save jonathanmoore/671035399d96d1362121bfc0679a182b to your computer and use it in GitHub Desktop.
Add the following Liquid snippet to a product template (Sections/product-template.liquid) to show tags on a Shopify product page. The tags will correctly link back to the current product collection with the tag filters applied.
{% if product.tags %}
{% if collection.handle %}
{% assign collection_scope = collection.handle %}
{% else %}
{% assign collection_scope = 'all' %}
{% endif %}
<ul class="product-tags">
<li>Tags: </li>
{% for tag in product.tags %}
{% capture url %}/collections/{{ collection_scope }}/{{ tag | handleize }}{% endcapture %}
<li>{{ tag | link_to: url }}</li>
{% endfor %}
</ul>
<style media="screen">
ul.product-tags {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.product-tags li {
display: inline-block;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
}
ul.product-tags li a {
text-decoration: none;
}
</style>
{% endif %}
@telanpo
Copy link

telanpo commented Jun 9, 2021

This was written specifically for the District theme however it should work for any Shopify theme.

thanks a lot jonathanmoore, i used it on the Simple theme and it works great, a little styling and its fine. As i am new to shopify liquid staff, i called a render command on the new liquid file i created from your code and added it on the bottom of the product template.
Cheers

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment