How to Turn Off Zoom Photo on Product Pages in Dawn?

Store Design

AI-generated summary

Main issue: Disable the zoom/magnify effect on product images in the Shopify Dawn theme.

Key points and attempts:

  • Built-in setting suggested (Customize > Product Pages > Product Gallery > uncheck magnify on hover) is not available in Dawn 2.0 per the requester.
  • Code-based approach offered: edit product-thumbnail.liquid (replace modal-opener with div) and add CSS to hide the zoom icon and disable modal toggling.
  • Simpler CSS-only approach shared: add to base.css
    • .product__media-toggle { display: none !important; }
    • .product__modal-opener .product__media-icon { display: none !important; }

Outcomes:

  • The CSS-only solution was confirmed to disable zoom by multiple users.
  • A side effect was reported: with multiple images, this CSS can prevent clicking through other images (disables image toggling).

Current status:

  • Zoom can be disabled via CSS, but maintaining multi-image navigation remains unresolved in this thread.

Notes:

  • Code snippets are central to the solution; screenshots were referenced but details aren’t critical to follow the steps.
  • No final consensus on a method that disables zoom while preserving image switching.
1

Can someone please tell me how to turn off or disable the zoom function of photos on my product page? Please? :folded_hands: Thank you. (I’m using the theme Dawn.)

2

Hello there,
You can disable the zoom for your product pages images within the theme’s settings.
Head into Customize > Select “Product Pages” from the drop-down selector. Under Sections > Product > Product Gallery, uncheck the “magnify product images on hover” or “magnify on hover” setting.

link

3

No, this is not an option in Dawn. It was in previous themes I used and was an obvious choice, but it’s not there in this 2.0 theme, at least not in that section.

4

Hi @JeanetteQuillen ,

To change you follow the instruction:

  1. Go to Online Store->Theme->Edit code
  2. Snippet->/product-thumbnail.liquid-> Then, enter Clrl + F to search; modal-opener and replace by div

AvadaCommerce_0-1642080026897.png
AvadaCommerce_0-1642080026897.png1365×529 61.5 KB

It’s like:

AvadaCommerce_1-1642080079546.png
AvadaCommerce_1-1642080079546.png1365×471 52.1 KB

  1. Asset->/base.css>paste below code at the bottom of the file:
.product__modal-opener .product__media-icon {
    display: none !important;
}

.product__modal-opener--image .product__media-toggle {
    pointer-events: none;
}

I hope it would help you.

5

Hello there,

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file.
.product__media-toggle {display: none !important;}
.product__modal-opener .product__media-icon {display: none !important;}
6

That worked, thank you!!

7

Perfect, this worked for me. Thanks.

8

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.

9 
.product__media-toggle {display: none !important;}
.product__modal-opener .product__media-icon {display: none !important;}

This css does remove the zoom, however if I have multiple images, this css disables clicking on the other images. Is there a way for me to still click through the other images? Thank you!

10

its work for me thank you so much