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="https://code.jquery.com/jquery-3.6.1.min.js" 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="https://cdn.shopify.com/s/files/1/0601/0185/3358/files/lightzoom.js?v=1666514281"></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

$('.image-selector').lightzoom({
  zoomPower   : 3,
  glassSize   : 200
});

5- Add CSS

Add the following CSS code in base.css file

.image-selector {
z-index:3;
}

#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);
  z-index:4;
}
4/5 - (26 votes)

About

Leave a Comment

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