Displaying tags on product pages

Highlighted
New Member
1 0 0

Hello, I'm using the Debut theme and would like my tags to be visible on the product page, maybe under the product images? Looking for a simple way to do this, thanks!

0 Likes
Highlighted
New Member
2 0 0

I am also having trouble doing this. Other threads include the code that works, but they render in the wrong way (ie - just random text that doesn't look clickable). Any assistance would be wonderful.

0 Likes

Hi

Add below code in your sections/product-template.liquid file where you display tags :

<div class="product-single_tags">
<ul class="product-tags">
{% for tag in product.tags %}
<li>{{ tag }}</li>
{% endfor %}
</ul>
</div>

Now add below css in assests/theme.scss file :

.product-single_tags .product-tags li {
    display: inline-block;
    border: 1px solid #CCC;
    padding: 0px 10px;
}

Let me know if it doesn't work for you.

Thank you

Want to modify or custom changes on store hire me.
Shopify Developer | Email:pinkal.beladiya2911@gmail.com | Skype ID: live:f9802098aa87af33 | Skype Name: Pink@l Bel@diy@
0 Likes
Highlighted
New Member
2 0 0

Thanks for that, Pinkal. While adding the css part super broke things. I'm using Debut and the css theme says

 

" You cannot use native CSS/Sass @imports in this file without a build script."

Plus, I wanted my tags to be links to their tags or collections and not just words. Here's how i ended up solving it (sort of)...

 

I added this to the product-template.liquid:

 

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

Which renders tags nicely below the product description. BUT now my problem is that not all my tags actually go to their tag collection page. For example, "chocolate" goes to "/collections/all/chocolate" but "Available for Nationwide Shipping" goes to "/collections/all/Available For Nationwide Shipping" when the actual link is /collections/all/Available-for-Nationwide-Shipping" and now I'm in the process of trying to figure that out.

 

Thoughts?

0 Likes
Highlighted
New Member
1 0 0

Thanks for the inspiration. I resolved the bad link by handleizing the tag as follows:

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

I hope this helps someone out.

0 Likes