Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Dawn Theme adjust the zoom function

Dawn Theme adjust the zoom function

Jules81
Excursionist
12 0 10

We have an issue with the Dawn theme's zoom feature on the product detail page. 

If you click on a product image the zoom feature kicks in as it should. However, the zoom is over the entire screen width. We would like to adjust this and to control the max. width / size of the zoom.

In the chrome editor we found the spot in the HTML code where this happening. But we cannot find the place in the Dawn theme code to control it. 

We looked in all the .js files - but we couldn't spot the code that would help us to control the max. width of the zoom function.  

For the moment we switched it off completely via CSS - but we would like to use it in the future. 

Jules81_1-1634132571221.png

Anyone an idea how to fix this? 

 

 

Replies 8 (8)

Jules81
Excursionist
12 0 10

The solution was actually super easy. 

You can adjust the zoom settings via a CSS class. 

So just change the width of the class below in the picture as you prefer. 

 

image (3).png

Jacquline
Excursionist
48 0 7

@Jules81 

Hey Jules, that was super helpful!

Any idea how to also change the zoom in on mobile? Still zooms way too much there..

 

This change worked great for dekstop though! 

 

Would appreciate it! 

Jules81
Excursionist
12 0 10

The fix for mobile should be relatively easy.

You need to create a respective media command to control it on mobile. 

If you have a bit of knowledge regarding CSS this should be no problem for you. 

 

Jules81_0-1640597129241.png

 

 

Jules81
Excursionist
12 0 10

Here are the lines of codes you can add at the end of the respective CSS (section.main-product.css) file to adjust the zoom for mobile and desktop.

 

what bothers me though is that the picture quality is not optimal. not sure how to fix that since we uploaded all pics in high quality. some compression is at work here. 

 

/* Zoom Adjustment 
================================================== */ 
/*desktop*/ @media screen and (min-width: 750px) {
 .product-media-modal__content > * { width: 600px; } 
}
 /*mobile*/ 
@media only screen and (max-width: 749px) { 
.product-media-modal__content > * { width: 600px; } 
} 
/* END Zoom Adjustment 
================================================== */

 

Jules81_0-1640775583585.png

 

Jacquline
Excursionist
48 0 7

Thank you so much! Finally normal zooming on both mobile and desktop! Super grateful 

sheaskin
Visitor
1 0 0

Thank you so much!!!

abbenbrooke
Visitor
2 0 0

Unfortunately this isn't working for me in regards to the mobile zoom images being way too large.  I'm guessing something has changed in the last couple of years since this solution was posted?

Thanks

diego_ezfy
Shopify Partner
2969 571 915

@Jules81 

In case you or anyone else still needs help with this, it's possible to both fix the zoomed image's width so it looks fine on mobile, plus add arrows to it - here is a detailed guide.

Kind regards,
Diego