Hello so I’ve recently finished building my website and now I’ve noticed the product image whenever I click to zoom it occupies the whole screen and I don’t want it to happen could someone help code wise? Thank you Store - Vanbesky.com

@Vanbesky Sorry about that, please follow the instructions below instead. From your Admin store, go to Online store > Themes > Click Actions > Edit code Open the Section folder, and find the main-product.liquid file. Find the code below and delete it. Same in feature-product.liquid, still at…

@Vanbesky oh sorry for that issue can you please disable on click zoom can do hover enable if you theme allow

Hi @Vanbesky , What do you want to happen instead? You can adjust the width of the product modal by using the code here. From your Admin store, go to Online store > Themes > Click Actions > Edit code Open the Asset folder, and find the base.css file. Add the code below. .product-media-modal__dia…

That fixed it on the desktop version but ruined it on the mobile version, any way to make that command desktop specific? thank you

Hi @Vanbesky , Yes just add the media call. @media only screen and (max-width: 750px) { .product-media-modal__dialog { width: 50%; margin: auto; } }

Sadly that one just introduced the problem back again to both mobile and desktop. Honestly I’d just like to disable zoom overall but the theme Ride doesn’t have that option

Hi @Vanbesky , You can simply hide the modal by using the code below. span.product__media-icon.motion-reduce.quick-add-hidden { display: none !important } .product-media-modal { display: none !important }

Unfortunately that did not work :confused: after using that code, if I click the product image, page freezes and no way to undo.. Sorry to bother :disappointed_face:

Fantastic, that worked! Thank you :slightly_smiling_face:

Hello there, I’ve been trying this solution for myself, but don’t have an equivalent of the code in the feature product liquid Snippet. I did the other steps without but nothing has changed. Any ideas?

I tried this but would like to put it back again. Does the code I took out need to go back in a certain place?

How can I adjust the zoom size of product images on my website?

Store Design

Vanbesky July 19, 2022, 11:53am 10

Fantastic, that worked! Thank you

Topic		Replies	Views
How can I stop product images from zooming on mobile and desktop? Store Design customizations , css , product-page	1	70	January 23, 2024
Product Image Zooming in a lot when clicking on it Shopify Discussion troubleshooting	6	111	September 8, 2024
Image Zoom Spotlight Theme Store Design product-page	7	103	July 7, 2024
Reduce size of popup zoom product DAWN theme Store Design	15	142	December 17, 2022
How To Make The Zoom-in Product Images on Product Page Smaller Store Design design , customizations , css , shopify-themes , troubleshooting , product-page	2	206	January 17, 2024

How can I adjust the zoom size of product images on my website?

Related topics