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

Store Design
1

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

2 Likes
2

@Vanbesky

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

3

Hi @Vanbesky ,

What do you want to happen instead? You can adjust the width of the product modal by using the code here.

  1. From your Admin store, go to Online store > Themes > Click Actions > Edit code
  2. Open the Asset folder, and find the base.css file.
  3. Add the code below.
.product-media-modal__dialog {
    width: 50%;
    margin: auto;
}
4

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

1 Like
5

Hi @Vanbesky ,

Yes just add the media call.

@media only screen and (max-width: 750px) {
.product-media-modal__dialog {
    width: 50%;
    margin: auto;
}
}
6

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

1 Like
7

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
}
8

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:

9

@Vanbesky

Sorry about that, please follow the instructions below instead.

  1. From your Admin store, go to Online store > Themes > Click Actions > Edit code
  2. Open the Section folder, and find the main-product.liquid file.
  3. Find the code below and delete it.

  1. Same in feature-product.liquid, still at the Section folder.

  2. Find the code below and delete it.
  1. Next, open the base.css under the Asset folder and paste the code below.
.product__modal-opener .product__media-icon {
    display: none !important
}
10

Fantastic, that worked! Thank you :slightly_smiling_face:

1 Like
11

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?

12

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?

13

This helped, but I can’t see the page behind the product, my users think they’re on a separate page. Is there any way to make the background transparent or semi-transparent so they can see they’re still on the product page?
More specifically, the white parts, can I make them like… 50% transparent?

asiaacorn_0-1706185191931.png
asiaacorn_0-1706185191931.png1919×930 102 KB