Your Dawn product page zoom is broken - and it takes 1 minute to fix it
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.
This tutorial is compatible only with Shopify's official free themes: Colorblock, Craft, Crave, Dawn, Origin, Publisher, Refresh, Ride, Sense, Spotlight, Studio, Taste & Trade.
Looking to install this on a premium or custom theme? Contact us.
Making a backup of your theme
Before diving into the tutorial make sure you download the theme, so in case you face any issues you can easily revert back.
Downloading the code files
You can use the following code for free to test it out:
If it works well, you can get the lifetime pro version here clicking here. If you experience any issues, let us know!
Copying the code
-
In your Shopify admin, go to Online Store > Themes > Actions > Edit Code.
-
Inside the .zip you downloaded you'll find the following file:
ezfy-zoom.txt - If you copied the free code above, use it instead.
Creating the code file
- In your Shopify code editor and below Snippets click on "Add a new snippet".
Name it exactly: ezfy-zoom
-
Paste the code that you copied and click on save.
Final step: adding the code to your theme
-
Find the file named theme.liquid.
-
Scroll all the way down, paste the following code at the very bottom of the page.
{% render'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.
If you'd like to remove the code at any point, simply delete the 'ezfy-zoom' file and remove the code you added at theme.liquid