Adding arrows to zoom images on Shopify’s free themes (mobile & desktop)

The Dawn theme ships with a "click-to-zoom" button which allows users to view an enlarged version of the product images.

Although helpful, it often gets cut off especially on mobile devices. In this tutorial I'll quickly teach you how you can not only fix the size of the zoomed images size, but also add arrows to it so your users can have a more pleasant experience when viewing your product's images.

This is how the final result will look like: live preview.

Making a backup of your theme

Downloading the code files

Code:

Copying the code

1. In your Shopify admin, go to Online Store > Themes > Actions > Edit Code.
2. Copy the code shared above.

Creating the code file

1. Copy this code from the gist in this tutorial.
2. Now go back to your Shopify code editor and below Snippets click on "Add a new snippet".
   
   Name it exactly: ezfy-zoom
   
   
   
3. Paste the code that you copied and click on save.
   
   

Final step: adding the code to your theme

1. Find the file named theme.liquid.
2. Inside this file, press CTRL + F (or CMD + F on Mac) and search for:
   
   </body>
   
3. Paste the following code before the tag you found and save:
   
   {% include 'ezfy-zoom' %}

That is it! You're all set. You can now test the new zoom by simply clicking on the magnifying glass icon of any of your product page images.

Related: color swatches on the product page, sticky add to cart, custom fonts.