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

Store Design
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 Likes
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.

2 Likes
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;}
3 Likes
6

That worked, thank you!!

1 Like
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