How can I disable image drag and zoom in my product catalog?

Store Design
,

Topic summary

A user seeks to disable image dragging and zooming functionality in their product catalog and collection pages.

Two solutions proposed:

Solution 1 (EBOOST):

  • Navigate to Online Store → Theme → Edit Code
  • Access Layout → theme.liquid file
  • Add specific code before the closing </body> tag
  • Includes a screenshot reference for guidance

Solution 2 (Transcy):

  • Go to Online Store → Themes → Actions → Edit Code
  • Open Sections → product-template.liquid file
  • Insert provided code snippet
  • To disable zoom: locate and comment out the zoom-related code by wrapping it in {% comment %} and {% endcomment %} liquid tags
  • Save and preview changes

Note: Both responses include code snippets and implementation steps, though some text appears corrupted or reversed in the original posts. The solutions involve theme customization through Shopify’s code editor.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

Hello, I’m wondering if there’s a way to remove the ability to drag the image on catalogs and other places such as collections, etc. Additionally, I also want to remove the ability to zoom in on products in the product catalog.

My shop is artfinia.com

adsfsdfds.jpg
adsfsdfds.jpg938×672 55.2 KB

12321321321321321.jpg
12321321321321321.jpg1321×808 124 KB

2

Hi @David123123 ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code

EBOOST_1-1689216131452.png
EBOOST_1-1689216131452.png1103×739 94.9 KB

  1. Layout/theme.liquid

  2. Add code below to end of file and before tag

EBOOST_0-1689219201929.png
EBOOST_0-1689219201929.png1653×905 70.6 KB

3

Hello @David123123 ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Sections → product-template.liquid file

Add this following code

To disable the ability to zoom in on product images, you’ll need to find the code responsible for the zoom feature.

Commenting out the code involves wrapping it in {% comment %} and {% endcomment %} liquid tags, which will disable its execution. For example:

{% comment %}

{% endcomment %}

Save and preview

Hope this can help.

Transcy