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

Store Design
,
1

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
add pill.png508×393 93.1 KB

Thank you to anyone who can help!

2

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 {% endif %}