how can i add a custom picture to my homepage MOTION THEME

[richardlrnz]

can anybody explain me how i can add a custom photo to my homepage. and i dont mean a photo to my hero banner, i mean a custom photo right in the middle of my homepage between the hero banner and the product section?

need your help please 

[BSS-Commerce]

Hi @richardlrnz ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[richardlrnz]

https://barsenz.com/

thanks a lot 

[BSS-Commerce · Accepted solution]

Please follow these steps:
Step 1: Access Shopify Admin => Select Online Store => Edit code
Image:

Step 2: Find the theme.liquid file => Create a tag <script></script>. Image:

Then insert this code:

window.onload = () => {
 let hero_banner = document.querySelector(`[data-section-type="testimonials"]`);
 if(hero_banner){
    hero_banner.parentNode.insertAdjacentHTML("afterend", `<div class="bss-custom-img" style="margin: 100px auto; width: 1220px; height: 400px;"><img style="width: 100%; object-fit: cover; height: 100%;" src="https://cdn.pixabay.com/photo/2023/04/29/09/51/polana-kalatowki-7958161_640.jpg"></div>`); 
 }
}

You can manually adjust the image link in the <img></img> tag with the attribute "src" and image height and size if desired.
And here is the illustrative result after achieving it. Hope it helps you
Illustrating images: