A user reported that product images in mobile mode zoom in excessively when clicked, with no option to zoom out, forcing viewers to see only narrow details. Desktop mode functioned correctly with appropriate zoom behavior.
Solution provided:
product-thumbnail.liquidproduct__media-toggle quick-add-hidden{% comment %} and {% endcomment %} tagsOutcome:
The fix was successfully implemented. After applying the code modification, the mobile view now behaves like desktop view—clicking the image zooms to the clicked position rather than displaying an extreme close-up. The issue has been resolved.
Hi,
could you please help me again? I couldn’t find a solution…
If I click on a photo of one of my products in mobile mode (on desktop mode, it works just fine and slightly zooms in), the photo is shown very much zoomed in. Also you do not have the possibility to zoom in or out; you have to look at very narrow detail of the photo.
https://www.kanal-100.com/de/products/wandbild-bagni-nirvana
Hi @Kanal100 ,
Please follow these steps:
Step 1: Go to Themes → Edit code
Find file name “product-thumbnail.liquid”, find this code by search “product__media-toggle quick-add-hidden”
Step 2: Comment this code by comment tag
{% comment %}
<button class="product__media-toggle quick-add-hidden product__media-zoom-{{ section.settings.image_zoom }}" type="button" aria-haspopup="dialog" data-media-id="{{ media.id }}">
<span class="visually-hidden">
{{ 'products.product.media.open_media' | t: index: position }}
</span>
</button>
{% endcomment %}
The result will be like as desktop view, you click the image and the position clicked will be zoomed in:
**I hope it helps @Kanal100 **
That worked!
Thank you very much for your help!
