Good day! I hope you can help on my problem on zooming my product when you point the mouse cursor it zooms to much, I badly needed to fix this because will be having a big sale, Hope you can help me thanks!
https://faxcable.com.ph/collections/ict/products/apple-macbook-pro-16-inch-pre-order-only
Hi there,
I believe this is because you are giving the zoom image the master image which is a very high resolution (2000x1290), here’s what it would look like if you gave it a smaller image:
https://monosnap.com/file/ctKDOWUIK788LdOrSouQ3xbczOEOiI
You’d need to look in the product template and find the element with a class of zoomImg (you can use the chrome extension in my signature to do a code search for this). You’ll probably see some code like src={{ imagevariable | image_url : ‘master’ }}. Changing the ‘master’ to ‘500x’ or similar number should resolve this. This should also be better for page speed as you’ll be loading a much smaller image.
@iDoThemes Will it fix also other products?
Also where can I find it on the code in shopify? @iDoThemes
Go to snippets > media.liquid file and find “data-zoom=”. Change code: {{ media | img_url: image_zoom_size, scale: image_scale }} => {{ media | img_url: ‘800x’ }}
Refer https://i.imgur.com/r6MOihu.png
Hope it clear to you.
Did you turn off zoom?
If it still doesn’t change, you can send the staff account, I will check it quickly.
@LitExtension I mean reduce the zoom effect. it zoom to much.
This was the code that can be seen under media.liquid @LitExtension
You just need to change this, it will display fine: https://i.imgur.com/wH9WmLy.png
Change:
{{ image | img_url: ‘1024x1024’, scale: 2 }} => {{ image | img_url: ‘800x’ }}
Hope it clear to you.
Just wanted to say thanks for this! I’m on a different theme but this helped me solve a similar issue on my store.
I feel like the best way to do this is in the product-template.liquid file:
Near the top of the file, change:
{%- assign product_image_scale = '2' -%}
to
{%- assign product_image_scale = '1.5' -%}