Displaying tags on product pages as images.

Owen_Jinks
New Member
2 0 0

Hi, I've figured out how to display the tags on my product pages. However I'm wondering is there a way to get the tags themselves to display as predefined images? 

For example can I assign a tag to a particular image and each time that tag is used on a product it will display the little image icon linked to that tag instead of the name of the tag?

Thanks.

0 Likes
Jason
Shopify Expert
10041 119 1877

Hey Owen,

Instead of showing the text "foo" (for example) you wan't to see an image like foo.png. Is that right?

If we're only talking about a couple of tags you can just add some code to check for the tag, and then show an associated image. For example:

{% if product.tags contains 'foo' %}
  <img alt="foo" src="{{ 'foo.png' | asset_url }}" />
{% endif %}

The image would be uploaded into your themes asset folder. 

There's fancier ways this could be handled, but for a small amount of tags this is pretty easy to add in.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Owen_Jinks
New Member
2 0 0

Ah, so simple! Works perfectly. Thankyou Jason.

0 Likes
David_Shave
New Member
3 0 0

Jason - I have tons of tags! Whats the fancier way? We need a loop based solution as doing them individually is getting unmanageable.

If a product has tags: 'xboxlive', 'nintendo' and I upload xboxlive.png and nintendo.png to the assets folder can I call these images based on tag?

Or is there a easier way of calling an image based on the tags?

0 Likes
tim
Shopify Expert
2865 119 942

Hi David,

the loop may look like this:

    {% for tag in product.tags %}
        {% assign tag-file = tag | append: ".png" %}
        <img src="{{ tag-file | asset_img_url: "32x" }}" 
             onError="style.display = 'none';"
        >
    {% endfor %}

Cool thing here is the onError part -- it will hide the broken link pic if there is no file uploaded for this tag. 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
David_Shave
New Member
3 0 0

Tim, thanks so much for your reply.

What would be really cool is if there was someway to prepend a string to the image filename. For example 'icon-image_' so I can build filenames like 'icon-image_nintendo.png'.

Also, I really need to be able to stop the image size identifier, eg "x32" or "small" from being added to the end of the filename.

Is it possible?

0 Likes
David_Shave
New Member
3 0 0

(Simpsons Homer): doh!

I amswered my own question!!

just go 

{% assign tag-file = tag | prepend: "icon-image_" | append: ".png" %}

thanks for the initial direction tho!

0 Likes
JoanaTGBC
New Member
2 0 0

Hi Tim!

 

I know it has been a couple of years since you have posted this :)

 

But I am trying to add this to my product pages, and although I have been able to add it, it repeats a lot (see image below) Is there any way to make the icons appear only once?

 

Icons.PNG

0 Likes
jrltrend
Excursionist
42 0 11

Hello! I have tried and tried... How can i get picture insteed of text on this tags

brands.png

 

0 Likes