Zoom: Magnify product image on hover

For a very basic magnify effect on your product pages, you can make this customization to provide zoom on hover.

The regular click to zoom in to a modal window option will still work (setting needs to be turned on in your Product page settings). 

How to:

There are three options to choose from. The first two only have one step, the last option has two steps. 

Option 1 - Desktop zoom-in and zoom-out

Easy: Provides the effect on desktop only. 

/* -- code to provide hover magnify on product pages -- */
.mouse .template-product .slick-slide img:hover, .touch .template-product .slick-slide img:active {
  transition: transform .2s; 
  transform: scale(1.5);   
}
/* - end - */

The zoom scale can be adjusted from 1.5 to a larger or smaller number - 1.0 is no zoom, 2.0 is double zoom. 

For best results, upload a 2400x2400 product image or 1200x1200. Your product images should always be in .JPG format (.PNG will slow down your site considerably). 

This effect only magnifies at the center of the product image. There is no additional effect when moving around the image. For that type of functionality, talk to  shophelper.io or heycarson they can help add a custom zoom/magnify library for you.  

Option 2: Desktop zoom-in and zoom-out & mobile zoom-in

Easy: Provides the effect on desktop and mobile (mobile zoom-in only). 

/* -- code to provide hover magnify on product pages -- */
.template-product .slick-slide img:hover, .template-product .slick-slide img:focus, .template-product .slick-slide img:active {
  transition: transform .2s; 
  transform: scale(1.5);
}
/* - end - */

Note: Mobile zoom-out occurs when you view the next image using the product thumbnails or next/previous arrows.

Where to add the code for Options 1 or 2:

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Option 3 - Desktop and Mobile zoom-in and zoom-out

Advanced: Provides the effect on desktop and mobile (zoom-in and zoom-out). 

Mobile example:

There are two steps to follow for this version - Complete both steps:

Important: Be sure you've removed any code from Option 1 or Option 2.

1

Add Javascript code

Add the following code to the very bottom of your Javascript file, this will vary depending on which version of Pipeline you're running: 

Code to add:

/* -- Javascript - touch hover effect for product pages -- */
var isTouching = false;
window.addEventListener('touchstart', function(){
  document.documentElement.classList.remove('mouse');
  document.documentElement.classList.add('touch');
  isTouching = true;
});
  
window.addEventListener('mousemove', function(){
  if(isTouching) isTouching = false
  else
  {
    document.documentElement.classList.remove('touch');
    document.documentElement.classList.add('mouse');
  }
});
/* - end - */

Where do I add the Javascript code?

Use this link to learn where exactly to add this code snippet:

Where to add your Javascript code

2

Add CSS style code

/* -- style code for touch zoom and un-zoom when using Javascript -- */
.mouse .template-product .slick-slide img:hover, .touch .template-product .slick-slide img:active {
  transition: transform .5s; 
  transform: scale(1.5);   
}
/* - end - */

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code