How can I modify product tag display on my product page?

Store Design
1

Hi

I have below code where it shows list of product tags on top of product page.

Search by Tags:
{% for tag in product.tags %} {{ tag }} {% unless forloop.last %} | {% endunless %} {% endfor %}

currently the design is like image 1.

what I want is to be like image 2.

could anyone help.

2

IMAGE 1

22.png
22.png1180Ă—120 9.06 KB

IMAGE 2

23.png

3

Hi @amazezones

It’s very hard to give exact code as there is not enough info but this will get you close to the result:

  • Go to Admin>Online Store
  • Click Actions>Edit Code on the theme you want to edit
  • In the Layout folder, open theme.liquid
  • Copy this code before the closing tag

Also, you should replace the code you provided with this code:


---

         
  
                  

               {% for tag in product.tags %}
                 
                   {{ tag }}
                 
               {% endfor %}

  
          

---
2 Likes
4

this is wonderful thank you, i can’t find where to put this code in the theme (newbie)
Other articles said product-template.liquid but i don’t see that anywhere.
I tried creating it, with some success but it doesn’t show any other product info, just the tags.
Can you give me a clue of where to place this code in my shop to display product tags with the buttons? Thank yoU!

5

YOu have a type “lable” should be “label”