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 and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. 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 🙂

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 and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. 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 and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. 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 and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. 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