What's your biggest current challenge? Have your say in Community Polls along the right column.

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

Solved

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

Mohamed_Evisu
Tourist
9 1 1

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;
}

Accepted Solution (1)
Mohamed_Evisu
Tourist
9 1 1

This is an 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 %}

View solution in original post

Replies 5 (5)

PageFly-Noah
Shopify Partner
1317 233 277

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Mohamed_Evisu
Tourist
9 1 1

00.jpgThank you Noah for your reply,

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

Mohamed_Evisu
Tourist
9 1 1

This is an 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
Shopify Partner
36 1 12

Thanks for the solution! It worked for me.

nutmegbooks
Visitor
1 0 0

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?