Adding product tags on the product page is an important part of Shopify store optimization. In this video, we’ll show you how to add product tags on the product page
Product tags on the product page of Shopify is a great way to help your customers find what they are looking for, and also helps you to organize your products. In this video I show you how to add product tags on the product page of Shopify, using the Dawn theme.
Add code in main-product.liquid
Add the following code in main-product.liquid file
<div class="product-tags">
{% for tag in product.tags %}
<span class="tag"><a href="/collections/all/{{ tag | handleize }}">{{ tag }}</a></span>
{% endfor %}
</div>
Add code in base.css file
Add the following code in base.css file
.product-tags {
width:90%;
}
.product-tags span{
background-color: white;
padding: 5px 15px 5px 15px;
border-radius: 15px;
border: 1px solid grey;
display: inline-block;
margin-top: 4px; }
4 thoughts on “How To Add Product Tags On Product Page of Shopify”
Is there a way to use this but exclude certain tags – EG any that begin with a character like an underscore? Then we can still use tags for other purposes without them showing up on the product page?
Hmm… will have to check but I think we can do that using JS Code
Thanks for this snippet! I was so helpful! Wondering if you can help me with how to change the font colour? I’ve already changed the background colour easily by just swapping out the hex code but can’t seem to figure out the text colour. Much appreciated!
A few more lines of CSS code will do that