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

Solved

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

M07H3R5H1P
Tourist
5 0 10

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)

KarlOffenberger
Shopify Partner
1873 184 903

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.

View solution in original post

Replies 27 (27)

KarlOffenberger
Shopify Partner
1873 184 903

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.

M07H3R5H1P
Tourist
5 0 10

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 10

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 903

Something like this should get you started.

M07H3R5H1P
Tourist
5 0 10

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

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

ZEDI
Visitor
1 0 1

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
Visitor
1 0 0

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
Visitor
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
Visitor
1 0 1

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 16

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
Visitor
1 0 0

This go in the same Template ?

soymarketing
Shopify Partner
11 0 16

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

pillboxmalaysia
New Member
5 0 0

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

Jarkendal
Visitor
1 0 1

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
9 0 2

Hi  

You can not solve your problems with the same level of thinking that created them.
playcode3
Tourist
9 0 2

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>   
You can not solve your problems with the same level of thinking that created them.
CrystalCompany
Tourist
3 0 1

This worked a treat! Thank you!!! 

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.

Hugo333
Tourist
4 0 1

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
Shopify Partner
30 2 3

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 attachedmultiple tags.png

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

Madawcisrich
Tourist
3 0 1

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
Visitor
1 0 0

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

Arloz
Shopify Partner
1 0 0

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

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

Tukano
Visitor
1 0 0

Thanks for improving my work!