Logo image overlay

Highlighted
New Member
2 0 0

Hi there

I am looking to add a small logo to the top right corner of a product image. The tricky bit is that I only want it to appear on product images that correspond to a given product tag. For example: Only Show overlay "a.jpg" over product image "b.jpg" when product has the tag "c".

I would really appreciate this help.

Thank you.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
93 0 23

Hey Justin,

This is Oswald, a Guru here at Shopify!

You can use the following code to display the desired content based on a product tag.

Per the example below, if my product contains the tag "orange" the text "insert your image link here" will appear. 

{% if product.tags contains "orange" %}
  Insert your image link here
{% endif %}

Below you will find 2 links to some examples you may want to check out! :)

https://help.shopify.com/themes/liquid/tags/control-flow-tags

https://help.shopify.com/themes/liquid/basics/operators

Hope the information above helps! If you have any other questions, feel free to reach out to the Guru team. :)

Cheers!

Oswald | Shopify Guru

0 Likes
Highlighted
New Member
2 0 0

Hi Oswald

Thank you so much for your reply. Your solution looks quite straight forward. However. I am very new to html and css. Could you let me know where I would paste this coding? ie. Do I paste it into the snippet for products, or on the liquid? I really have no idea where it should go.

To explain more. I need this small logo to show on 1) the product page and 2) the thumbnail in the grid view when you view a collection.

Thanks again!

0 Likes
Highlighted
Excursionist
36 0 5

Hi Oswald

As per Justin's message, where does this code (below) get pasted for it to work?!

CODE >> {% if product.tags contains "outdoor" %} This product is great for using outdoors! {% endif %}

Thanks

Steve

0 Likes