How can I adjust the zoom in size of product images?

Store Design
, ,

Topic summary

A user seeks to reduce the zoom-in size of product images on their Shopify store, which currently appears too large.

Solution Provided:

  • Add CSS code to assets/section-main-product.css at the bottom of the file
  • The code targets .product-media-modal__content with a media query for screens min-width 750px
  • Sets width to 50% with !important flag to override existing styles

Outcome:

  • The solution successfully resolved the issue
  • Brief clarification provided about the !important CSS declaration being used to override existing code

The discussion reached a complete resolution with the CSS modification working as intended.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
1

Hi,

Is there anyone who might know how to change product picture “zoom in” size?

Tried to look around but couldnt find any earlier post about this.

Right now its getting huge and would like to see it a bit smaller. See example picture down below.

Dispomal_0-1687352537310.png
Dispomal_0-1687352537310.png1909×924 205 KB

MY STORE URL : https://qqf6l55jka4kat2h-56470536270.shopifypreview.com

Thanks!!

2

@Dispomal

Please share your store URL!

Thanks!

3

Srry saw that ive missed that here it is :

https://qqf6l55jka4kat2h-56470536270.shopifypreview.com

1 Like
4

@Dispomal

Please add the following CSS code to your assets/section-main-product.css bottom of the file.

@media screen and (min-width: 750px){
.product-media-modal__content>* {
    width: 50% !important;
}
}

Thanks!

5

Thanks for the reply, might be a stupid question but should " !important;" be in it as well?

6

It worked thanks so much for the help!

7

@Dispomal

This is not a stupid question “!important;” use for override CSS code. otherwise provided code not working.

If helpful then please Like Solution