Reduce zoom level image in Warehouse theme

[nway]

Dear all,

        How can I reduce zoom level when hover on product image instead of changing image quality in Warehouse theme? cuz the image is blur when I hover the image. Please help me if someone know how to fix it.

Best,

[nway · Accepted solution]

I found my way of how to fix zoom level. There is two options, first is you need to upload your product image with high resolution (when I ask theme support they said you can't control zoom level you need high quality images). So I don't agree with that & there is no way to upload images again. So my Second option is if you uploaded your product so far & you can't uploading images again, try with my solution.

In product-gallery.liquid, search data-zoom & change {{ media | img_url:  '500x' }}

<img class="product-gallery__image lazyload image--blur-up" src="{{ media | img_url: '60x' }}" data-src="{{ image_url }}" data-widths="[{{ supported_sizes }}]" data-sizes="auto" data-zoom="{{ media | img_url: '500x' }}" alt="{{ media_alt | escape }}">

with {{ media | img_url:  'master' }} (master means keeping up with original image size) 

<img class="product-gallery__image lazyload image--blur-up" src="{{ media | img_url: '60x' }}" data-src="{{ image_url }}" data-widths="[{{ supported_sizes }}]" data-sizes="auto" data-zoom="{{ media | img_url: 'master' }}" alt="{{ media_alt | escape }}">

You can see the reference about image sizing in this link.  

[danman007]

The product photo zoom seems to only work on the desktop version, is there a way to zoom photos using the mobile version with the warehouse theme??