Full width product images on dawn theme. Version 10.0.0

MickVenekamp · ‎03-14-2024

Hi!

I would like to have my product images to be flush with the header and the sides on mobile view. This to reduce whitespace on my website.

Is there anybody who can help me with this? Help would be much appreciated.

I would also like a dotted slider as an overlay on the pictures. I will attach an image of what kind of design im looking for.

Thanks in advance!

Dan-From-Ryviu · ‎03-14-2024

Please add this code to theme.liquid file, after <head>

<style>
@media (max-width: 749px) {
.slider.slider--mobile {
scroll-padding-left: 0 !important;
}
.slider.slider--mobile .slider__slide {
padding-top: 0px !important;
width: 100% !important;
}
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Liquid_xPert_SJ · ‎03-14-2024

@MickVenekamp welcome to the Shopify Community,

Can you please share the store url?

thanks

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee ☕ for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee ☕ for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
- Need THEME UPDATES but have custom codes? No worries, for an affordable price.

MickVenekamp · ‎03-14-2024

My url is: https://thelightsupplier.com/

Dan-From-Ryviu · ‎03-14-2024

Hi @MickVenekamp

Please share your store URL so I can help you to make image full width.

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

MickVenekamp · ‎03-14-2024

Hi, my url is: https://thelightsupplier.com/

Dan-From-Ryviu · ‎03-14-2024

Please add this code to theme.liquid file, after <head>

<style>
@media (max-width: 749px) {
.slider.slider--mobile {
scroll-padding-left: 0 !important;
}
.slider.slider--mobile .slider__slide {
padding-top: 0px !important;
width: 100% !important;
}
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

MickVenekamp · ‎03-14-2024

That worked perfectly! Thank you very much!

Dan-From-Ryviu · ‎03-14-2024

Happy I could help

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

kne603 · ‎11-06-2024

Hi Dan, I just used this code on my dawn theme and it worked great for removing the padding around the image however i noticed that the mobile slider below is displaying more images than I have uploaded. For example, I only uploaded 4 images for the product but the slider is showing "< 1/5 >". Are you able to help with an updated code for this? Would really appreciate it. Thanks!

Full width product images on dawn theme. Version 10.0.0

Full width product images on dawn theme. Version 10.0.0

Community Blog Articles