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

[Vanbesky]

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 

[KetanKumar]

@Vanbesky 

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

[made4Uo]

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

[Vanbesky]

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

[made4Uo]

Hi @Vanbesky,

Yes just add the media call.

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

[Vanbesky]

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

[made4Uo]

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
}

[Vanbesky]

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

[made4Uo · Accepted solution]

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

<script src="{{ 'product-modal.js' | asset_url }}" defer="defer"></script>

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

5. Find the code below and delete it. 

  <script src="{{ 'product-modal.js' | asset_url }}" defer="defer"></script>

6. Next, open the base.css under the Asset folder and paste the code below.

.product__modal-opener .product__media-icon {
    display: none !important
}

[Vanbesky]

Fantastic, that worked! Thank you 🙂

[LucyW1315]

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? 

[asia-acorn]

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?

[opentobeing]

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?