Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an 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:
If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
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, marking it as a solution, or donating here ☕.
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
This is an 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:
If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025