How do i add an overlay image to products based on product tags?

[Mohamed_Evisu]

Hello,

I need to add an image on my products, but only if the tags meet specific names, I already have the CSS code but i do need the way to make it conditional or with statement, below  is the CSS code but when i use it the image appeared on all products, I'm using Dawn theme.

Thanks in Advance

.product__media-item modal-opener{
position: relative;
}
.product__media-item modal-opener:after{
content: '';
position: absolute;
top: 5px;
left: 5px;
width: 15%;
height: 15%;
background-image: url('https://cdn.shopify.com/s/files/1/0634/5061/1897/files/free.png');
background-size: contain;
background-repeat: no-repeat; 
z-index: 2;
}

[PageFly-Noah]

Hi @Mohamed_Evisu 

This is Noah from PageFly - Shopify Page Builder App

Please add this condition with the tags like this

{% for tag in product.tags %}

  {% if tag contains 'your-tag' %}
    .product__media-item modal-opener{
position: relative;
}
.product__media-item modal-opener:after{
content: '';
position: absolute;
top: 5px;
left: 5px;
width: 15%;
height: 15%;
background-image: url('https://cdn.shopify.com/s/files/1/0634/5061/1897/files/free.png');
background-size: contain;
background-repeat: no-repeat; 
z-index: 2;
}
  {% endif %}

{% endfor %}

You should put this code in a product page. For that can check all the tags

Hope this can help you solve the issue 

Best regards,

Noah | PageFly

[Mohamed_Evisu]

Thank you Noah for your reply,

Unfortunately the code not working properly, please check the image.

[Mohamed_Evisu · Accepted solution]

I added style to your code and it is working now, thank you Noah

{% for tag in product.tags %}

{% if tag contains 'ROYALFORD' %}
<style>
.product__media-item modal-opener{
position: relative;
}
.product__media-item modal-opener:after{
content: '';
position: absolute;
top: 5px;
left: 5px;
width: 20%;
height: 20%;
background-image: url('https://cdn.shopify.com/s/files/1/0634/5061/1897/files/2ywarranty.png');
background-size: contain;
background-repeat: no-repeat; 
z-index: 1;
}
</style>
{% endif %}

{% endfor %}

[JPCancino]

Thanks for the solution! It worked for me.

[nutmegbooks]

This has worked perfectly on the product pages themselves but is there any way to make the overlay appear on the thumbnails when browsing collections as well?