How can i disable image zooming and remove the zoom icon from product page image in dawn theme?

[Souhiiii]

Hello thank you in advance.

I have dawn theme and when I go to product page there is a zoom button how can I disable zooming and hide the zoom icon.

Also there is no button in theme editor that says disable zooming so I need some code snippet thank you guys.

[diego_ezfy · Accepted solution]

@Souhiiii,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>
.product__media-icon.motion-reduce,
.product__media-toggle{
    display: none !important
}
</style>

Kind regards,
Diego

[Ferpeces1]

Works perfectly. Thanks a lot @diego_ezfy !

[Smeelah]

@diego_ezfy 

Would it be possible to do this (turn zoom off and remove zoom icon) just for mobile? That's where it's more of an issue. 

Thanks for the info!

[stevrons]

Hello,

Thank you for your solution. But is there a way to prevent product zoom, but not prevent play button of videos uploaded onto product page as "media"  ? 

When I use the solution listed here, product zoom is stopped yes. And on desktop actually I can still see and use play button on videos. But on mobile, there is no play button. It seems the coding causes the play button to be hid on video as well. 

Thanks

[EpsilonPSeK_PSc]

Hi @stevrons , @Souhiiii , @Smeelah 

I propose a different solution than Diego_ezfy, 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 Online Store > Themes > Actions > Edit Code
• Open the product-thumbnail.liquid file under Snippets
• Go to line 76 where it says

  <span class="product__media-icon motion-reduce" aria-hidden="true">
    {%- liquid
      case media.media_type
      when 'video' or 'external_video'
        render 'icon-play'
      when 'model'
        render 'icon-3d-model'
      else
        render 'icon-zoom'
      endcase
    -%}
  </span>

• Change that to

  {% comment %}
    <span class="product__media-icon motion-reduce" aria-hidden="true">
      {%- liquid
        case media.media_type
        when 'video' or 'external_video'
          render 'icon-play'
        when 'model'
          render 'icon-3d-model'
        else
          render 'icon-zoom'
        endcase
      -%}
    </span>
  {% endcomment %}
  
  {%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
    <span class="product__media-icon motion-reduce" aria-hidden="true">
      {%- liquid
          render 'icon-play'
      -%}
    </span>
  {%- endif -%}
  
  {%- if media.media_type == 'model' -%}
    <span class="product__media-icon motion-reduce" aria-hidden="true">
      {%- liquid
          render 'icon-3d-model'
      -%}
    </span>
  {%- 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

  <button class="product__media-toggle" type="button" aria-haspopup="dialog" data-media-id="{{ media.id }}">
    <span class="visually-hidden">
      {{ 'products.product.media.open_media' | t: index: position }}
    </span>
  </button>

• Change that to

  {% comment %}
    <button class="product__media-toggle" type="button" aria-haspopup="dialog" data-media-id="{{ media.id }}">
      <span class="visually-hidden">
        {{ 'products.product.media.open_media' | t: index: position }}
      </span>
    </button>
  {% endcomment %}
  
  {%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
    <button class="product__media-toggle" type="button" aria-haspopup="dialog" data-media-id="{{ media.id }}">
      <span class="visually-hidden">
        {{ 'products.product.media.open_media' | t: index: position }}
      </span>
    </button>
  {%- endif -%}
  
  {%- if media.media_type == 'model' -%}
    <button class="product__media-toggle" type="button" aria-haspopup="dialog" data-media-id="{{ media.id }}">
      <span class="visually-hidden">
        {{ 'products.product.media.open_media' | t: index: position }}
      </span>
    </button>
  {%- 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.

[FOP]

@diego_ezfy I have custom coding which removed the zoom feature on my products, would you know how I can add this back on?

[solariscollects]

i've been looking for a solution for so long and this was perfect, thank you so much