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

Store Design
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!