Solved

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

richardlrnz
Excursionist
35 0 1

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 

Richard Lorenz
Accepted Solution (1)
BSS-Commerce
Shopify Expert
3477 461 516

This is an accepted solution.

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

view - 2024-03-25T093147.972.png

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

view - 2024-03-25T094022.609.png

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:

view - 2024-03-25T094124.309.png 

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

View solution in original post

Replies 3 (3)

BSS-Commerce
Shopify Expert
3477 461 516

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.

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

richardlrnz
Excursionist
35 0 1

https://barsenz.com/

 

thanks a lot 

Richard Lorenz
BSS-Commerce
Shopify Expert
3477 461 516

This is an accepted solution.

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

view - 2024-03-25T093147.972.png

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

view - 2024-03-25T094022.609.png

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:

view - 2024-03-25T094124.309.png 

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