Disable Product Image zoom function and button in Dawn theme

Introduction

When using Shopify as your e-commerce platform and utilizing the official Dawn theme to style your store, by default the product images receive a zoom button to enlarge the view of the selected image.

But certain images are not suitable to be enlarged more than they (maybe) already are so today I will walk you through the changes in the theme code which are necessary to disable that behavior.

If you are not comfortable editing the theme code by yourself, please go ahead and hire my company, Epsilon PS e.K., a certified Shopify partner, through our contact form to assist you with the successful implementation.

Prerequisites

To be able to follow the steps of this guide you will need the following:

• An in-development or already active Shopify store (can't be in the free trial phase)
• Be familiar and willing to edit the code of your theme (if you are not, no worries, please contact my company through our contact form)

Implement the necessary changes

To start, you need to be logged in to your Shopify Admin, which is reachable by the link [name-of-your-shop].myshopify.com/admin (replace the placeholder [name-of-your-shop] with the subdomain of your own store).

Then go to Online Store > Themes > Actions (on your currently active theme at the top) > Edit Code.

A code editor will open and, depending on if your already made changes to your template code, it will show (still / already) open files in the right part of the window.

Go ahead and open the file product-thumbnail.liquid in the folder Snippets.

Then go to line 76.

In there, you will find the following code block:

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

Replace these 12 lines with this:

  {% 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 -%}

Let's quickly talk about what this change did.

In essence, the original code checks the media type added to a specific product and renders different icons for the zoom button depending on the recognized media type. Videos get a play icon, a 3D model gets a 3D model icon and pictures get a zoom button with a magnifying glass icon.

The new code however disables the old code (in case you ever want the original behavior back) by wrapping it in a {% comment %} {% endcomment %} block and also adds two new checks:

1. If the media type is a video, still add a play icon
2. If the media type is a 3D model, still add a 3D model icon

That has the effect that images receive nothing, which is what we want.

We have to change a code block further down in the file as well to finish disabling the zoom function completely.

Go to line 111.

In there, you will find the following code block:

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

Replace these 5 lines with:

  {% 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 -%}

Once again, lets talk about the change.

The original function is responsible for actually rendering the clickable button onto the web page. And because we want to keep that button only for videos and 3D models, we do the same as in line 76 ff:

The new code however disables the old code (in case you ever want the original behavior back) by wrapping it in a {% comment %} {% endcomment %} block and also adds two new checks:

1. If the media type is a video, still display the zoom button with the play icon
2. If the media type is a 3D model, still display the zoom button with the 3D model icon

That has the effect that images receive nothing, which is what we want.

Conclusion

And this marks the completion of the changes to the Dawn theme code to disable the product image zoom functionality.

I hope the steps were easy to follow, please leave your feedback in the comments.

Also, once again, if you need help implementing the new code, head over to the contact form of my company and we will help you.