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

Solved
New Member
5 0 0

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. 

0 Likes

Success.

Shopify Partner
1838 173 601

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.

I turn coffee in to code - since 1998
1 Like
New Member
5 0 0

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 themeScreen Shot 2019-01-19 at 1.54.00 PM.png


0 Likes
New Member
5 0 0

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. 

Screen Shot 2019-01-19 at 1.59.21 PM.png

0 Likes
Shopify Partner
1838 173 601

Something like this should get you started.

I turn coffee in to code - since 1998
1 Like
New Member
5 0 0

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 %}

 

0 Likes
New Member
5 0 0

Screen Shot 2019-01-19 at 3.42.22 PM.png

0 Likes
New Member
1 0 0

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!

 

0 Likes
New Member
2 0 0

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!

0 Likes
New Member
1 0 0

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 %}

 


 

0 Likes