Add Zoom On Hover in Product Page – Shopify Dawn Theme

Learn how to add zoom on hover in the product page of your Shopify store, using the Dawn theme. This simple trick will help your customers get a better look at your products, and make it easier for them to decide whether to purchase.

Adding zoom on hover in Shopify Dawn theme is a great way to improve the customer experience on your product pages. In this video, we show you how to add a magnifying glass effect that will let your customers get a closer look at your products.

1- Adding jQuery in theme

Add following code in theme.liquid file under <head> tag

<script src="" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

2- Add jQuery Plugin

1- Download the plugin From Here
2- Upload it to Shopify files
3- Add the following code to the theme.liquid file (Replace “SRC” with your uploaded file link)

{% if template contains 'product' %}
<script type="text/javascript" src=""></script>  
{% endif %}

3- Add class in product-thumbnail.liquid file

Search For “media.preview_image.alt” in product-thumbnail.liquid file and add the following line above that:

Search For "media.preview_image.alt"

Make sure to add a class where ever you find “media.preview_image.alt” because it’s on the file multiple times just like the screenshot below:

4- Add code in global.js file

Add the following code in the global.js file

  zoomPower   : 3,
  glassSize   : 200

5- Add CSS

Add the following CSS code in base.css file

.image-selector {

#glass {
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  display: none;
  background-repeat: no-repeat;
  background-color: rgba(0,0,0,.6);
4.3/5 - (22 votes)


Leave a Comment

Your email address will not be published. Required fields are marked *