When you build your store on Shopify, by default Enable image zoom is active. It allows you to zoom in Shopify when you hover over a product. However, some users like to disable zoom in Shopify and set the product image as it is displayed. It is possible to disable zoom in Shopify, however, the difficulty depends on the type of theme you are using for your Shopify store.
How to disable zoom in Shopify
To disable zoom in Shopify, it is possible to do it from your admin page. Under the Customize theme area of your page, go to the Product Page section. Uncheck the Enable image zoom feature checkbox. This should disable zoom in Shopify and set the product image size.
However, if you are using a custom theme, this option is probably not available to you. You can edit the HTML/CSS to work around this.
- Go to Admin page, and navigate to Online store → Themes.
- Choose Edit HTML/CSS option from the drop-down list.
- From the list in the left, find the Assets folder.
- Under the Assets folder, find the jquery.elevatezoom.js file.
- Find the function for image zoom, it looks like : $.fn.elevateZoom.options .
- Under the function, find the command line zoomEnabled: true,
- Change the value from true to false
zoomEnabled: true, change it to zoomEnabled: false,
- Save the changes.
The change will be made to your store and this will disable zoom in Shopify store. Some custom themes will not have that specific line, in those cases, it’s still similar. The code will still be similar and under the jquery.elevatezoom.js . Find the function related to elevateZoom and you may have to remove that function in some cases. As you can see, some custom themes are not easy to edit, so a little programming background is necessary to understand what needs to make changes.