How do I add PNG icons over 2 sections and over an image?

LiefdeApparel
Excursionist
18 3 1

Hi, I am trying to add these 2 floral png's on the left and ride side of the site, anchored to the sides. How do I add them into both sections? I would like for them to be positioned how they are, where they overlap in between sections. The website is https://www.marlyngraceboutique.com/ and the password is "NoAccessYet"

Screenshot 2024-03-22 at 11.49.57 AM.png

Reply 1 (1)

BSS-Commerce
Shopify Expert
3477 461 520

Hi @LiefdeApparel ,

Go to Online store -> Themes -> Edit code -> search for the theme.liquid file

view - 2024-04-01T142915.041.png

Copy this code to the end of the file:

<script>
     window.addEventListener("load", (event) => {
        const flowerImage1 = document.createElement('img');
        const flowerImage2 = document.createElement('img');
        flowerImage1.src='https://cdn.pixabay.com/photo/2018/02/27/21/16/spring-3186641_1280.png'; //replace it with the link to your first flower image
        flowerImage2.src='https://cdn.pixabay.com/photo/2017/05/30/10/07/branch-2356442_1280.png' //replace it with the link to your second flower image
        flowerImage1.alt = 'Flower1';
        flowerImage2.alt = 'Flower2';

        const newsletterDiv = document.querySelector('.newsletter.center');
        newsletterDiv.appendChild(flowerImage1);
        newsletterDiv.appendChild(flowerImage2);
        newsletterDiv.style.position = 'relative'
        flowerImage1.setAttribute('width', '200px')
        flowerImage2.setAttribute('width', '200px')
        flowerImage1.style.position = 'absolute'
        flowerImage2.style.position = 'absolute'
        flowerImage1.style.left = '20px'
        flowerImage2.style.right = '20px'
        flowerImage1.style.top = '100px'
        flowerImage2.style.bottom = '-200px'
        flowerImage2.style.zIndex = 100
        flowerImage2.style.zIndex = 100
    });
</script>

 Result:

view - 2024-04-01T143000.699.png

Hope it helps @LiefdeApparel 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development