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

Solved
Souhiiii
Tourist
4 0 3

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.

Accepted Solution (1)

Accepted Solutions
diego_ezfy
Shopify Partner
2701 505 685

This is an 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

View solution in original post

Replies 5 (5)
diego_ezfy
Shopify Partner
2701 505 685

This is an 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
Tourist
4 0 0
Smeelah
Navigator
289 1 78

@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
New Member
1 0 0

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
New Member
2 0 0

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.

Epsilon PS e.K.
Web Hosting, Consulting, Web and Software Development, Entertainment Creation, eCommerce