jQuery Image Zoom for Shopify in 5 Easy Steps

jQuery Image Zoom for Shopify in 5 Easy Steps
jQuery image zoom

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.

View DemoDownload jQuery Zoom

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.

jQuery image zoom - checking if jQuery exists with dev tools
Using Chrome DevTools Inspector to check if jQuery is already being loaded.

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 scripts/ directory. Never load more than one version of jQueryon a website at a time, as it will increase the load time of pages and cause a slew of other JavaScript problems on your client’s site.

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.

One of the easiest ways to do this is to add a wrapper around your main product image with JavaScript. In your product.liquid template, or if you’re using sections, add the class image-zoom and 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).

You might also like: Product Photography Tutorials — Master Ecommerce Images with These 6 Post-Production Techniques.

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.

jQuery image zoom: Plugin working with Slate products
jQuery Zoom Plugin working with Slate products.

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 .zoom();.

This would be the best approach if you’re using JavaScript to manipulate variant images, and loading a different feature-image based on which variant is clicked. For an example of this, take a look how this zoom plugin is implemented in the Debut theme.

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 on, duration, target, 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 grab, click, or 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

EasyZoom is an elegant, highly optimized jQuery image zoom and panning plugin. It supports touch-enabled devices, and is easily customisable with CSS.

ZooMove

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.

Get zooming!

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!

About the Author

Tiffany is a Front End Developer Advocate Lead at Shopify. She specializes in front end development, user experience design, accessibility, and is passionate about inspiring young designers and developers. Previously, she was an Ottawa Chapter Lead for Ladies Learning Code and worked as a Front End Developer for Partnerships at Shopify.

Grow your business with the Shopify Partner Program

Learn more