Display TAGS on product page, and have those tags link to relevant COLLECTION page

[M07H3R5H1P]

I'm setting up a site to sell stock photos/graphics and I want a block of the products input tags from its product page listed beneath the item like on this separate shopify store that also sells graphics. (https://rulebyart.com/collections/graphics/products/black-and-white-spotted-paint-texture)

Beneath the product is a group of tags that when you click on them, link to the rest of the collection using those tags. 

How do I get this to work on Venture theme I am using. 

[KarlOffenberger · Accepted solution]

Hi there,

You'd need to edit your theme code for that. Go to Online Store > Themes and first create a backup by doing Actions > Duplicate. That's just in case something messes up. Now let's code by Actions > Edit code. In the editor's left pane, open Sections / product-template.liquid and depending where you want this to show add something like

<ul class="product-tags">
  {% for tag in product.tags %}
  <li><a href="/collections/all/{{ tag | handleize }}">{{ tag }}</a></li>
  {% endfor %}
</ul>

Please note though, this assumes you have a default all collection. If you have some other collection scheme, change appropriately. Also, doesn't need to be a unordered list. Can be anything you prefer in HTML. The .product-tags CSS class doesn't exist - you'd need to style that up as you want and visually prefer.

[M07H3R5H1P]

Thank you very much, I got it to work, but now like you said they're just in a list which adds length to the page. Would you happen to have any recommendations for how to style these into a simple block of buttons with rounded corners like my reference? I'd like them to be the pink accent color of my theme

[M07H3R5H1P]

I'd really love if they were either like button 3, or button 6 when it comes to the appearance of each listed tag, and then to be listed side by side until they wrap to the next line, instead of a list. 

[KarlOffenberger]

Something like this should get you started.

[M07H3R5H1P]

thank you. a little too advanced for me at the moment but i got a different technique to display them. 
I added this to my product template !

{% if product.tags.size > 0 %}
  <div class="product-single__tags">
    <p>
      Tags:
      {% for tag in product.tags %}
      {% assign tag_coll = '/collections/all/' | append: tag %}
        {{ tag | capitalize | link_to: tag_coll }}{% unless forloop.last %},{% endunless %}
      {% endfor %}
    </p>
  </div>
{% endif %}

[M07H3R5H1P]

[ZEDI]

Cool tks for sharing!

anyway to code a condition for the tag to show results ONLY for products inside the same menu/collection instead of ALL products from all collections?

cheers!

[developer1993-5]

Hello there,

found your solution very helpful. how can i change the color of the tags to what i like without hover and when i hover over it. want to show 2 different colors

[Printmyposters]

Hmmm it seems this code does not work properly for tags with spaces in them. Is there a way to correct that?

---

@M07H3R5H1P wrote:

thank you. a little too advanced for me at the moment but i got a different technique to display them. 
I added this to my product template !

{% if product.tags.size > 0 %}
  <div class="product-single__tags">
    <p>
      Tags:
      {% for tag in product.tags %}
      {% assign tag_coll = '/collections/all/' | append: tag %}
        {{ tag | capitalize | link_to: tag_coll }}{% unless forloop.last %},{% endunless %}
      {% endfor %}
    </p>
  </div>
{% endif %}

---

[gumptionco]

I'm also having trouble with tags that have spaces. For example, I have a tag called kitchen + bar, which launches /collections/all/kitchen%20+%20bar, instead of /collections/all/kitchen-bar, which would work. I tried changing the tag to kitchen+bar, which launches /collections/all/kitchen+bar, but that didn't work either. Anyone know how to create linkable tags with spaces that work? Thanks!

---

@Printmyposters wrote:

Hmmm it seems this code does not work properly for tags with spaces in them. Is there a way to correct that?

---

@M07H3R5H1P wrote:

thank you. a little too advanced for me at the moment but i got a different technique to display them. 
I added this to my product template !

{% if product.tags.size > 0 %}
  <div class="product-single__tags">
    <p>
      Tags:
      {% for tag in product.tags %}
      {% assign tag_coll = '/collections/all/' | append: tag %}
        {{ tag | capitalize | link_to: tag_coll }}{% unless forloop.last %},{% endunless %}
      {% endfor %}
    </p>
  </div>
{% endif %}

---

---

[soymarketing]

Taking a little bit of both pieces of code shared here I ended up with this solution which worked fine for me:

      <div class="product-tags">
      <p><strong>Product Attributes:</strong> 
      {% for tag in product.tags %}
      <a href="/collections/all/{{ tag | handleize }}">{{ tag }}{% unless forloop.last %},{% endunless %}</a>
      {% endfor %}
      </p>
      </div>

[w33ty]

This go in the same Template ?

[soymarketing]

Yes, it goes in Sections / product-template.liquid 

[pillboxmalaysia]

This helps and works well for me. Thank you!!!

[Jarkendal]

Thank you, this made my day!!

I put it here, easy to search for similar tagged pictures

[playcode3]

Hi    soymarketing,

Thanks! Your code works perfect! Do you know how to have the results sort by; for example to have it sort Best selling instead of the default of A-Z. Thanks again!

[playcode3]

oh, never mind I figured it out modified a few other things for my liking.

 <div class="product-tags">
      <p><strong>tags:</strong> 
      {% for tag in product.tags %}
      <a href="/collections/all/{{ tag | handleize }}?sort_by=best-selling">{{ tag | handleize }}{% unless forloop.last %}{% endunless %}</a>
      {% endfor %}
      </p>
      </div>   

[CrystalCompany]

This worked a treat! Thank you!!! 

[violetas]

This is just what I needed! How can I filter the tags to just colors and not include the first part of the word Color_Red? For example Colors: Red, Blue Green.

[Hugo333]

You should add the parameter 'replace: ' ', '-''  and the solution will look like this:

{% if product.tags.size > 0 %}
<div class="product-single__tags">
<p>
Tags:
{% for tag in product.tags %}
{% assign tag_coll = '/collections/all/' | append: tag | replace: ' ', '-' %}
{{ tag | capitalize | link_to: tag_coll }}{% unless forloop.last %},{% endunless %}
{% endfor %}
</p>
</div>
{% endif %}

[Denise_Glezer-J]

Sorry to jump in here, but this helped me to display tags on the product page using the Empire theme. I was wondering is it at all possible to display the product tags together with the product image on collections pages?

I know there is a way to add a filter-on-tags to the collections pages, however, iideally I would like my customers to be able to select MULTIPLE tags to filter on, but that does not work so the best way for me to show my customers the multiple benefits of each product, would be to display the tags to them.

Please see the example of what I would like to achieve attached

[LOH]

Hi, I am not quite clear on where exactly to put this code.  Where I have tried thus far as not worked.   Can you tell me where?

Thanks!

[Madawcisrich]

Hello, thank you for this. However in my theme, all the product templates are .json files. Your code cannot be added there. What should I do in this case? Thank you in advance.

[seenemo]

Hi, this worked great. Is there a way to modify this to only show certain tags? 

[Arloz]

Hello Karl

I use the "Translate & Adapt" app for localized content.  And I would like the product tag links (collections) also link to the language the people choose.

The .com shop has english as default language /collections/all/

/es/collections/all/
/fr/collections/all/
/nl/collections/all/

Thanks in advance,

Arloz

[springsun99]

how to put those tags at the bottom of each product page?

[Tukano]

Thanks for improving my work!