Dawn Theme adjust the zoom function

Retired Boards Appdev Store Design
1

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
Jules81_1-1634132571221.png1833×908 231 KB

Anyone an idea how to fix this?

1 Like
2

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
image (3).png1679×849 63.2 KB

1 Like
3

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

4

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_0-1640597129241.png1415×769 49.3 KB

5

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
Jules81_0-1640775583585.png699×755 33.6 KB

7 Likes
6

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

1 Like
7

@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

8

Thank you so much!!!

9

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