Solved

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

Vanbesky
Excursionist
12 0 5

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 

Accepted Solution (1)
made4Uo
Shopify Partner
3821 716 1148

This is an 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
}

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

Replies 12 (12)

KetanKumar
Shopify Partner
36854 3637 11976

@Vanbesky 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

made4Uo
Shopify Partner
3821 716 1148

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

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
Vanbesky
Excursionist
12 0 5

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
Shopify Partner
3821 716 1148

Hi @Vanbesky,

 

Yes just add the media call.

 

@media only screen and (max-width: 750px) {
.product-media-modal__dialog {
    width: 50%;
    margin: auto;
}
}
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
Vanbesky
Excursionist
12 0 5

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
Shopify Partner
3821 716 1148

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
}
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
Vanbesky
Excursionist
12 0 5

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
Shopify Partner
3821 716 1148

This is an 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
}

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
Vanbesky
Excursionist
12 0 5

Fantastic, that worked! Thank you 🙂

LucyW1315
Tourist
10 0 1

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
Shopify Partner
10 1 1

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

 

opentobeing
Visitor
1 0 0

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?