How to add a div container that will hold my badge Image in debutifly theme 4.10.0

Store Design
, ,
1

Hello everyone, I’m trying to add a container to hold my store badge to the product page and checkout page via custom code. But the image is overlay on other element this is the image of what I’m trying to say

C5E0B334-9EB5-4387-B4EE-2D946931A242.png
C5E0B334-9EB5-4387-B4EE-2D946931A242.png1170×2532 271 KB

Capture.JPG
Capture.JPG467×416 15.7 KB

And here is the code I used

.secondBadge{
    position: absolute;
    content: '';
    background: transparent url(https://cdn.shopify.com/s/files/1/0620/1144/1352/files/vestra_Guarantee.png?v=1658502629) no-repeat center/contain;
    width: 100%;
    height: 10%;
  display: flex;
 
}

<div class="secondBadge"></div>

I put the css in theme.scss.liquid of the assets and the html in the product-template.liquid of the snippet

1 Like
2

Hi @Alphex ,

You can also do it as what you already set up but since your .secondBadge is a position absolute. We have to make sure you have the right position relative. Do you mind sharing your website so we can provide an appropriate code for you?