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

Solved
M07H3R5H1P
Tourist
5 0 7

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. 

Accepted Solution (1)

Accepted Solutions
KarlOffenberger
Shopify Partner
1873 184 863

This is an 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.

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie

View solution in original post

Replies 19 (19)
KarlOffenberger
Shopify Partner
1873 184 863

This is an 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.

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
M07H3R5H1P
Tourist
5 0 7

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


M07H3R5H1P
Tourist
5 0 7

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

KarlOffenberger
Shopify Partner
1873 184 863

Something like this should get you started.

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
M07H3R5H1P
Tourist
5 0 7

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

 

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

 

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

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

 


 

gumptionco
New Member
1 0 0

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
Shopify Partner
11 0 11

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
New Member
1 0 0
soymarketing
Shopify Partner
11 0 11

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

pillboxmalaysia
New Member
5 0 0

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

Jarkendal
New Member
1 0 0

Thank you, this made my day!!

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

Skärmavbild 2021-01-04 kl. 19.26.09.png

playcode3
Tourist
6 0 0

Hi  

playcode3
Tourist
6 0 0

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
Tourist
7 0 0

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
New Member
3 0 0

This worked a treat! Thank you!!!