How do you remove the image zoom feature on the product pages in Dawn theme?

Store Design

Topic summary

Removing the image zoom on product pages in the Shopify Dawn theme. Initial fix: adding two CSS rules in section-main-product.css to hide the zoom toggle and icon; multiple confirmations that this removes zoom. Some users reported side effects from the CSS approach (home page banner ratio issues, inability to click product images, page content duplicated after the footer).

Alternative, cleaner fix: edit the product-thumbnail.liquid snippet to stop rendering the zoom icon for normal images while keeping play/3D icons for videos/models. Several confirmations, including working on the Sense theme. This approach avoids disabling other interactions.

Restoring zoom: remove the added CSS lines if previously used. If a custom product image slider (e.g., flickity-slider) is installed, it may conflict with Dawn’s zoom; guidance given that both cannot be used simultaneously without custom development. Suggested contacting Shopify support for custom solutions.

Status: core need (remove zoom) has working solutions. Some reported layout/interaction issues remain unresolved pending store URLs/screenshots. Applicability to the Athens theme was asked but not answered.

Summarized with AI on February 4. AI used: gpt-5.
1

Hi, I am looking to remove this zoom feature on the product listing images. How can I remove this? I am using Dawn theme

Screen Shot 2021-09-07 at 1.46.43 PM.png
Screen Shot 2021-09-07 at 1.46.43 PM.png1518×1500 287 KB

Screen Shot 2021-09-07 at 1.46.25 PM.png
Screen Shot 2021-09-07 at 1.46.25 PM.png1550×286 39.8 KB

2

@_hwi

Please share your store URL!

Thanks!

1 Like
3

https://decories.co/products/christmas-mug @dmwwebartisan

4

@_hwi

  1. Go to Online Store->Theme->Edit code

  2. Asset->/section-main-product.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;}

Thanks!

44 Likes
5

Great it worked! Thanks so much.

1 Like
6

You are a saver. Thank you very much!!

1 Like
7

Just wanted to say a massive thank you for this as well!

2 Likes
8

Hi,

This is a really fantastic resolution. I have just tried this on my site and it indeed does remove the zoom on the product page. But it is now causing issue on the home page with the ratio of the banner image.

Is anyone else seeing this?

9

@Heidi2k20

Please store URL & screenshot what do want

Thanks!

10

THIS WORKED. THANK YOU!!!

11

Thanks very much!! It worked!

12

Hi that code worked great! Thank you! But now you can’t click on the pictures at all?? I am trying to achieve no zoom on pictures but click them where they change at the main picture.

1 Like
13

Hi. I also have the Dawn theme and was looking to remove the zoom feature. I used one of the solutions here. It fixed that problem, but now all my pages are replicated after the footer. How would I fix this?

everythinginmycloset.com

14

Thank you, it works!

15

Hi @_hwi , @Heidi2k20 , @outpost , @Beth2384

I propose a different solution than Dmwwebartisan, which is, in my opinion, cleaner and also doesn’t disable anything you wouldn’t want.

Here are the steps:

  • In your Shopify Admin, go to O****nline Store > Themes > Actions > Edit Code
  • Open the product-thumbnail.liquid file under Snippets
  • Go to line 76 where it says

    {%- liquid
      case media.media_type
      when 'video' or 'external_video'
        render 'icon-play'
      when 'model'
        render 'icon-3d-model'
      else
        render 'icon-zoom'
      endcase
    -%}
  • Change that to
{% comment %}
    
      {%- liquid
        case media.media_type
        when 'video' or 'external_video'
          render 'icon-play'
        when 'model'
          render 'icon-3d-model'
        else
          render 'icon-zoom'
        endcase
      -%}
    
  {% endcomment %}
  
  {%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
    
      {%- liquid
          render 'icon-play'
      -%}
    
  {%- endif -%}
  
  {%- if media.media_type == 'model' -%}
    
      {%- liquid
          render 'icon-3d-model'
      -%}
    
  {%- endif -%}

  • This code block does the same as before for video and 3D models, but not for normal product images. The comment at the beginning is the original code, if you would want to revert the function back to its original way.

  • Go to line 111 where it says
  • Change that to
{% comment %}
    
  {% endcomment %}
  
  {%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
    
  {%- endif -%}
  
  {%- if media.media_type == 'model' -%}
    
  {%- endif -%}
  • This code block does the same as before for video and 3D models, but not for normal product images. The comment at the beginning is the original code, if you would want to revert the function back to its original way.

I hope my solution is satisfactory.

16

Thank you soo much for that and by the way check out my online store clouddropstore. myshopify. com

17

Great job! Worked like a charm :+1:

18

works for sense theme. thanks a lot!

19

@dmwwebartisan I added a product image slider and it removed the zoom feature, would you know the code to add the zoom feature back?

20

@FOP

Please remove the following code from your assets/ section-main-product.css file.

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

Thanks!