How to add product image zoom on hover in Shopify
Customers want to be able to view products before purchase. Customers want to be able to see and experience key product details such as fabric texture and feel, stitching, material finish and print detail. Currently on the web customers are able to zoom in on a product image in order to view details more clearly. If your website does not contain a zoom function, customers may perceive products on your website to be of a lower quality than they actually are, or more likely, go to another website to view products with a zoom function.
Shopify themes these days include a lot of image zooming functionality, but few are done well. Some will open an image in a modal for closer viewing, others will use a magnifying glass to zoom on hover, and yet others will not even implement a zoom feature on your mobile site. In this tutorial we will cover off how to check for these features, how to natively add a zoom function should one not exist, and go through the merits of each type of implementation.
In this post
- Types of image zoom on Shopify
- Enabling zoom in theme settings
- Adding hover zoom with JavaScript
- CSS-only zoom (no JavaScript)
- Mobile pinch-to-zoom
- Image quality requirements for zoom
- FAQ
Types of image zoom on Shopify
| Zoom type | How it works | Best for |
|---|---|---|
| Hover zoom (inline) | Image enlarges in place when mouse hovers | Quick detail inspection, desktop |
| Magnifier lens | Circular lens follows cursor, shows zoomed area | Jewelry, watches, fine detail |
| Click-to-zoom modal | Clicking opens a full-screen lightbox | Large product catalogs, all devices |
| Pinch-to-zoom | Two-finger pinch gesture on mobile | Mobile users (70%+ of traffic) |
Hover zoom on desktop and pinch-to-zoom on mobile. This is the best method and allows for both mouse and touch zooming without forcing the customer to have to do an extra click.
Enabling zoom in theme settings
Before adding custom code, check if your theme already supports zoom:
- Go to Online Store > Themes > Customize
- Navigate to a product page
- Click on the Product media or Product information section
- Look for settings like “Enable zoom”, “Image zoom”, or “Hover zoom”
Theme-specific zoom support:
- Dawn: Click-to-zoom lightbox. No hover zoom by default.
- Prestige: Hover zoom with magnifier option. Configurable in theme settings.
- Impulse: Hover zoom and lightbox. Both enabled by default.
- Horizon: Lightbox zoom. Clean implementation.
If your theme supports zoom natively turn it on and test for it. If your theme does not support zoom, or the native zoom provided is too small/does not happen on hover/makes things a mess on mobile, you can go ahead and use custom zooming using the methods described below.
Adding hover zoom with JavaScript
This feature allows Hover zoom enlarging of the product image while a customer is hovering over the image with a mouse pointer. It magnifies the product image to the size that customer prefers, which allows to look at the product’s details closely.
// Add to your theme's JavaScript file or a custom script
document.querySelectorAll('.product__media-item img').forEach(img => {
const container = img.parentElement;
container.style.overflow = 'hidden';
container.style.cursor = 'zoom-in';
container.addEventListener('mousemove', (e) => {
const rect = container.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
img.style.transformOrigin = x + '% ' + y + '%';
img.style.transform = 'scale(2)';
});
container.addEventListener('mouseleave', () => {
img.style.transform = 'scale(1)';
img.style.transformOrigin = 'center';
});
});Replace .product__media-item img with your theme’s product image selector set the zoom level here. For fine detail products (jewelry, watches) use scale(3), and for apparel, scale(2) is typical.
We’ve also combined this functionality with variant image filtering and color swatches. This allows customers to choose a color via swatch and the gallery can be filtered to only show images of that variant. Each filtered image is then zoomable on hover. The Rubik Variant Images handles the filtering and your existing zoom code handles the magnification.
CSS-only zoom (no JavaScript)
Instead of using JavaScript for hover zoom, you can have the browser zoom on a click with CSS!
.product__media-item {
overflow: hidden;
cursor: zoom-in;
}
.product__media-item img {
transition: transform 0.3s ease;
}
.product__media-item:hover img {
transform: scale(1.5);
}Copy and paste into Customize > Custom CSS. CSS zoom is centered by nature, whereas the JavaScript version follows your cursor position, making it easier to check corners and edges. CSS zoom is good enough for most product views where the center is the main detail (e.g. t-shirt, mug, etc.) but not for products where the edge detail is key (e.g. shoe stitching, jewelry clasps, etc.).
Mobile pinch-to-zoom
Hover doesn’t exist on touch devices – mobile users would be better off with a pinch-to-zoom feature. Most Shopify themes provide this feature either through the browser’s zoom feature or via a lightbox that enables zooming on touch devices.
If your theme blocks pinch-to-zoom (some themes set touch-action: none on images to prevent scrolling interference), remove that CSS:
/* Re-enable pinch zoom on mobile */
.product__media-item img {
touch-action: pinch-zoom;
}Most themes allow you to have a more refined mobile zoom experience by offering a “tap to open” lightbox with pinch and swipe gestures. This is a better UX on mobile than an inline zoom, since the lightbox is full-screen allowing for maximum zoomed in real-estate.
Image quality requirements for zoom
The zoom will only work well if the source image is of a high enough resolution. A 500px image when zoomed to 2x will show a 250px section of the image and may look slightly pixelated. To get the best out of the zooming functionality the source image should be at least 1000px.
- 2x zoom: Upload at least 2x the display size. 800px display = 1600px source minimum.
- 3x zoom: Upload at least 3x. 800px display = 2400px source.
- Shopify recommended: 2048px covers 2x zoom at most display sizes. For 3x zoom on high-DPI screens, consider 3000px+ source images.
Your images appear blurry when zoomed. This could be due to the source resolution being too low for optimal output. Try re-shooting or seeking higher resolution images from your supplier. When size management is key as in the case of images in store view with zoom enabled, there is a constant battle to achieve high image quality whilst maintaining webpage load speeds.
For stores with grouped products, each product’s image gallery is independent. When a customer views a different color of product via swatches, they will be able to view a high-resolution image gallery which can be zoomed in.
“This app is perfect. it is incredibly easy to set up and use. There are so many cool ways you can set up your variant images AND adjust your swatches. The youtube tutorials are super helpful. I got a bit stuck trying to set up one of my products and Zulf was super quick to respond and help. Definitely recommend it if you are reading this ;D”
Anonymous merchant, Rubik Variant Images on the Shopify App Store
Frequently asked questions
Does Shopify support image zoom by default?
Most modern themes have zoom (click to lightbox or hover zoom) – check the product media options in your theme settings. Dawn has click-to-zoom, Prestige has hover zoom, Impulse has both. If your theme does have zoom functionality but it is not enabled where you need it, you can use JavaScript or CSS to activate it there as well.
Does image zoom work on mobile?
Hover zoom does not work on the mobile version because there is no mouse cursor and on the mobile version we use pinch-to-zoom gestures or the tap-to-open lightbox feature. Most 7zoom themes support at least one of these features. Make sure your theme’s CSS isn’t disabling pinch-to-zoom.
What image resolution do I need for zoom?
Minimum 2x display size. For an 800px wide gallery supply images of size 1600px wide. For 3x zoom supply images of 2400px+ in width. 2048px is the recommended height for 2x zoom which will cover all display sizes.
Does zoom affect page speed?
The code required to make something zoom (CSS or JavaScript) is very small. What is exponentially larger is the file size of high resolution images required to support zooming. Use Shopify’s built-in WebP conversion and responsive srcset attributes to serve optimized image sizes based on device, only loading 200% / full size when actually zoomed.
Can I zoom on variant-specific images?
Yes. Zoom capabilities exist for any images currently visible in the gallery. With variant image filtering (Rubik Variant Images), select a color swatch to update the gallery to that specific variant’s images and zoom will work for the filtered images.
