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!

[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!

[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>   

[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.

[CrystalCompany]

This worked a treat! Thank you!!!