Dawn Theme adjust the zoom function

[Jules81]

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. 

Anyone an idea how to fix this? 

[Jules81]

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. 

 

[Jacquline]

@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]

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]

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 
================================================== */

[Jacquline]

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

[sheaskin]

Thank you so much!!!

[diego_ezfy]

@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