Disable Zoom (Not Hide) On Product Image On Mobile Dawn Theme 11.0

Store Design
,

Topic summary

A user needs to disable the zoom feature on product images for mobile devices in Shopify’s Dawn theme version 11.0.

Initial Solution Attempts:

  • A CSS code snippet was provided to add to the Custom CSS of the Product information section, targeting media queries for mobile viewports (max-width: 767px)
  • The code hides zoom-related elements like .product__media-icon--lightbox and .product__media-toggle::after
  • An updated version with !important flag was suggested when the first attempt didn’t work

Root Cause Identified:

  • After testing on the user’s store, it was discovered the zoom was actually a device-level function, not a theme feature
  • Browser cache was initially suspected, with suggestions to check in incognito mode

Final Solution:

  • To disable device-level zoom, add specific markup code to the theme.liquid file after the <head> tag
  • The code uses conditional logic to target only product template pages

Confirmation:

  • Another user confirmed this solution worked well for adjusting zoom size on mobile in the free Taste theme, applying it via the product template’s custom CSS field
Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

Need to disable zooming feature in product page in mobile, if possible need to disable on every page shopify Dawn theme 11.

2

Hi @basically

You can do that by adding this CSS code to Custom CSS of Product information section in your product template

Screenshot 2023-10-23 at 10.04.21.png
Screenshot 2023-10-23 at 10.04.21.png1895×1108 300 KB

@media (max-width: 767px) {
  .product__media-toggle:after,
  .product__media-icon--lightbox {
    display: none;
  }
}
3

Seems not working :thinking:

4

If you don’t mind, can you share your store link so I can check?

5

Or please update code to this

@media (max-width: 767px) {
  .product__media-toggle:after,
  .product__media-icon--lightbox {
    display: none !important;
  }
}
1 Like
6

https://thebasically.in/products/the-everyday-tshirt-supima%C2%AE

7

Image zoom is disabled as I have checked on my side. Did you try to reload your page to check after adding the code?

8

Yes, it’s still there for me…is it because of the browser? im using chrome.

You checked on mobile only right? what device?

9

I have checked both on mobile, chrome, safari browsers. Please try to use Incognito browser and check again

10

Please check attached screen recording file.

11

This is zoom function of device, not zoom function of theme. If you want to remove this, please add this code to your theme.liquid file after tag

{%- if template.name == 'product' -%}

{%- endif -%}
12

Thanks! This code worked very wel for me to adjust the zoom size on mobile. I pasted the code in the custom css field of the product template. I am using the free shopify Taste theme.