When selling online, one of the most requested product features is image zooming. Zooming is often used on a product image to enlarge it for better viewing by potential customers. There are a lot of jQuery zoom plugins available online for free, and at the end of this article I’ll go into a few more options that you could use with Shopify themes.
When selling online, one of the most requested product features is image zooming.
In this tutorial, I’ve opted to go with an oldie, but a goodie, jQuery Zoom by Jack Moore. We currently use this plugin for zooming product images in the free Shopify theme, Debut. This zoom plugin has little to no styling (so you can customize this yourself), and is super simple to implement. What I like most about this plugin is that it’s still updated frequently, and has a clear changelog.
This plugin is compatible with: jQuery 1.7+ in Chrome, Firefox, Safari, Opera, Internet Explorer 7+.
If you currently have a node setup for theming, you can install this plugin via npm, by running:
npm install jquery-zoom
Or, you can download the jQuery Zoom plugin.
You might also like: Using Responsive Images to Decrease Page Loading Times.
1. Add jQuery if it doesn’t already exist
Most themes already have a version of jQuery running, and for this plugin to work you need a minimum version of 1.7+. What that means is with most Shopify themes you probably won’t need to add jQuery, unless you’re building the theme from scratch. If you’re building an app and use jQuery, make sure to read through the documentation on how to use jQuery responsibly, in order to avoid conflicts with themes that already include it.
You can inspect your theme to see if jQuery is already being loaded, by either searching for the script or going to the console tab in your inspector, and running
jQuery.fn.jquery, which will return the version of jQuery the website is running.
Alternatively, you can also check the
theme.liquid to see if it’s being loaded, or already loaded in a
vendor.js file inside the
If you need to add jQuery to your theme, simply add the following line to the head of your html:
2. Add the zoom.min.js plugin file to your theme
From the plugin folder you downloaded, add the minified jQuery Zoom plugin (jquery.zoom.min.js) to your Assets folder. Then, in your
theme.liquid file, after where jQuery is being loaded, link the plugin file to your theme using the following Liquid code:
Alternatively, you can also add the minified code to the end of a
vendor.js file — if you already have a theme that uses one — to avoid the extra request.
3. Edit product.liquid to target the zoomed image
For the Zoom plugin to work, it appends html inside the element it’s assigned to. Therefore, the element that it’s assigned to must accept html; the
<img> tag cannot contain other HTML elements, so it needs a container or wrapper element.
product.liquid template, or if you’re using sections, add the class
data-zoom information. Note that the
featured_image for your product might be called something else, depending on the theme you’re using.
You’ll also want to use Liquid to generate the url of your large-image (that will be your zoomed image) as a data-attribute, in this case I’ve named it
data-zoom. We’ll be able to use this later on initialization, enabling you to pass the url to the
.zoom() method as a url property, specifying a larger version of the image (instead of loading one large one and scaling it down).
4. Initialize the zoom plugin dynamically
Because there are many different themes with a wide variety of CSS that could be applied to elements, the code below is triggered by the added
image-zoom class on the main product image. It will add a
<span> wrapper with jQuery, that the zoom plugin will then append additional HTML to, creating the zoom effect. This will avoid any issues caused by CSS layouts, or other styles that might affect a manually created container.
There are many alternative ways of implementing this plugin, and depending on what other JS events you have triggering for product images, it might make sense to create a custom function like
productImageZoom(), and to also use the
.trigger('zoom.destroy'); before triggering
5. Customize your settings, and add styles as needed
The jQuery Zoom plugin comes with a bunch of other properties you can pass to the
.zoom() method. These can be found in the documentation for the plugin, and include
touch and more.
You can also add styling to your zoomed images to give an indication that the image will zoom on
mouseover, or if you’re using one of the other
on values like
toggle you might want to change the default cursor for image-zooming with some CSS.
For example, if you wanted to include something similar to the styling of the plugin demo, you could add the following styles, and the
icon.png into your assets folder:
You could also add styling that would change the cursor to indicate a grab-zoom option:
** Note: some of these CSS values only work in webkit enabled browsers; you can also provide an image for a custom cursor if you want them to be consistent in non-webkit enabled browsers.
For bonus points, consider extending the functionality we’ve already created using theme options; giving your client the option to turn zooming on and off at their leisure.
You might also like: Crafting Faster Themes: How the Shopify Themes Team Tackled Narrative's Web Performance.
Alternative plugins and Shopify Apps
If you don’t like the plugin above, here are some alternatives to take a look at. I’ve also included a couple Shopify Apps specifically for product zooming — just know that they are paid apps.
EasyZoom is an elegant, highly optimized jQuery image zoom and panning plugin. It supports touch-enabled devices, and is easily customisable with CSS.
ZooMove plugin developed with jQuery allows you to dynamically zoom images with mouseover, and view details with mouse move. Compatible with: jQuery 1.7+ in Chrome 42+, Firefox 41+, Safari 9+, Opera 29+, and Internet Explorer 9+.
In addition to these free plugins, there are also paid Shopify Apps you can install for your clients.
Magic Zoom Plus
Magic Zoom Plus lets users hover to zoom an image and click to enlarge an image. It's one of the top-rated Shopify image zoom apps in the Shopify App Store, and works with mobile devices. There’s a free 30 day trial, and the app costs a one time price of $69.00.
Product Image Zoom By Gowebbaby
Product Image Zoom By Gowebbaby is another image zoom app on the Shopify App Store, which uses a box or lens around your zooming area, making it feel like a magnifying glass inspecting a product. It sells for $3.99 per month, with a three day free trial.
Using a product zooming plugin can be a powerful tool for conversions; enabling customers to get up close and personal with the products your client is selling. By upselling a client and adding an additional functionality when building custom themes, you can add some extra billable hours to your project. Hopefully with the help of this article, adding that extra functionality will be a little bit faster. 🚀
What’s your favorite zooming plugin? Tell us in the comments below!