How to add icon over top of images in the featured product carousel

How to add icon over top of images in the featured product carousel

Sapphire_Energy
Visitor
1 0 0

I am hoping someone can help me with a feature for my store.  I am looking to add an image icon over top of some images, based on a product tag.

 

I have a featured products carousel, and in that are some of my battery products.   When I have the "compare at" price set in the product details, it automatically adds a little blue pill with the word "SALE" in it.   Similar to when things are out of stock.

 

Is there a way for me to add another little pill that shows an image (or text if image is too difficult).
I would like to highlight features like Bluetooth, by adding the little icon over the image.  I can edit it into the product photos, but I would like to find a way to do this through tagging and automation, so I can apply it to other features later.

 

I'm using the DAWN 15.2.0 theme.   website is sapphirebattery.ca

 

Like the "SALE" pill, I want to add another one maybe in the bottom right, or top left, etc.

add pill.png

 

Thank you to anyone who can help!

Reply 1 (1)

cromedia
Shopify Partner
545 86 168

Basically very high level guide, find the product card liquid, there add check {% if product.tags contains 'whatever' %} <span class="custom-badge' style="position:absolute; bottom: 16px; right: 16px;">badge  </span>{% endif %}