Adding badge to first image on product page

[matthewconroy]

Im trying to add a badge to my product page on the first image in the gallery. I’ve identified if I add the css to the product__modal-opener class in the product-thumbnail.liquid file i get the image to display in the perfect spot. But how do i limit it to the first image only.

Any better ways of going about this open to suggestions. Im running dawn theme

.product__modal-opener:after{
position: absolute;
content:‘’;
background: transparent url(https://cdn.shopify.com/s/files/1/0626/1941/8882/files/EXPRESS_DELIVERY_CIRCLE_1_1.png?v=1649246558) no-repeat center/contain;
width: 15%;
height: 15%;
top: 1px;
left: 1px;
pointer-events:none;
}

[SetuBridge_1]

Hello @matthewconroy

Please try this, it defiantly works, just replace your code with this

follow the below steps,

1. Online store->themes->Actions->edit code->assets->base.css

2. Paste this below code

.product__media-item:first-child .product__modal-opener:after {
   position: absolute; 
   content: ''; 
   background: transparent url(https://cdn.shopify.com/s/files/1/0626/1941/8882/files/EXPRESS_DELIVERY_CIRCLE_1_1.png?v=1649246558) no-repeat left/contain; 
   width: 100%; 
   height: 15%; 
   top: 1px; 
   left: 0; 
   pointer-events: none; 
}

Output :