Using JQuery Zoom and JavaScript Zoom for Product Images on Shopify

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 different zoom libraries 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.

In this tutorial, I’ve included two methods you can use to add zooming to your client’s site:

• jQuery Zoom,or
• Vanilla JavaScript Zoom

Be sure to use only one of these methods, not both. These are two separate tutorials, so choose whichever is best for you. Let’s dive in.

1. Zooming via jQuery

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 has a clearchangelogand is used by a lot of people online.

View Demo StoreDownload jQuery Zoom

This plugin is compatible with jQuery 1.7+ in Chrome, Firefox, Safari, Opera, and Internet Explorer 7+.

If you currently have a node set up for theming, you can install this plugin vianpmby running:

npm install jquery-zoom

Or, you candownloadthe jQuery Zoom plugin.

For more tools, check out our list of favoriteSublime text plugins.

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 that 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如何使用jQuery负责任吗, in order to avoid conflicts with themes that already include it.

You caninspectyour theme to see if jQuery is already being loaded, by either searching for the script or going to theConsoletab in your inspector and runningjQuery.fn.jquery, which will return the version of jQuery the website is running.

Alternatively, you can also check thetheme.liquidto see if it’s being loaded, or already loaded in avendor.jsfile inside thescripts/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:

{% endif %}

Alternatively, you can also add the minified code to the end of avendor.jsfile, just like the jQuery instructions above—if you already have a theme that uses one—to avoid the extra request.

If you are using ES6, you can do the following to include drift in your project:

2) Editproduct.liquidto target the zoomed image

For drift zooming to work, it appends HTML inside an element with CSS positioning. If no element is specified to contain the zoomed image, then it will default to overlay on top and align with the closest positioned parent.

First, let’s add a wrapper around your main product image in yourproduct.liquidtemplate, and inside that also add an empty div with a class ofimage-details. If you’re using sections, you can instead add thedata-zoomattribute to the product section featured image. Note that thefeatured_imagefor 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 itdata-zoom. We’ll be able to use this later on in initialization, to specify a larger version of the image.

3) Initialize Drift and set options

The next step is the basic setup, and is really straight forward:

Here we’re initializing Drift on the image by targeting the class ofimage-zoom, then we’re setting thepaneContainerto the.image-detailsdiv, in order to set the output of the zoomed content that will be rendered to that container.

You can also set up other more specific options for Drift, including offsets, zoom amount, enabling touch, and more. Those options can be found on theGitHub page for Drift.

4) Customize your settings and styles

The last step in this process would be to set up any additional styling you’d like to include for your image zooming with Drift. Instead of your zoom area covering the entire page, you can add styling so it’s set off to the side, or overlays other content on the page.

I’ve added some simple styles for two columns with CSS grid that you can see being used in the demo above:

Alternative plugins and Shopify Apps

If you’re not a fan of using the two options in the above tutorial, here are some alternatives to take a look at. I’ve also included a couple Shopify Apps specifically for product zooming.

EasyZoom plugin

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

ZooMove plugin

ZooMoveplugin 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 app

Magic Zoom Pluslets 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 app

Product Image Zoom By Gowebbabyis 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.

You might also like:How to Create a Customizable Announcement Bar Section in Shopify.

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.