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.
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.
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
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.
Something like this should get you started.
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 %}
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!
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!
Hmmm it seems this code does not work properly for tags with spaces in them. Is there a way to correct that?
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!
Taking a little bit of both pieces of code shared here I ended up with this solution which worked fine for me:
**Product Attributes:**
{% for tag in product.tags %}
{{ tag }}{% unless forloop.last %},{% endunless %}
{% endfor %}
This go in the same Template ?
Yes, it goes in Sections / product-template.liquid
This helps and works well for me. Thank you!!!
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!
oh, never mind I figured it out modified a few other things for my liking.
**tags:**
{% for tag in product.tags %}
{{ tag | handleize }}{% unless forloop.last %}{% endunless %}
{% endfor %}
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.
This worked a treat! Thank you!!!