One of the most wanted features in every Shopify Theme is image zooming. It allows customer to view your products in a detailed look. There are a lot of zoom apps available but I don’t want to talk about them in this article. Today, I am going to show you how to add zooming function manually.

How to add zooming function for Shopify theme

1. Download zoom lib

In this article, I’ll use an old but good lib, jQuery Zoom by Jack Moore. This plugin is currently used for zooming product images in the default free Shopify theme, Debut. This zoom plugin has little to no styling (so you can customize this yourself), and is very simple to implement.

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:

1. npm install jquery-zoom

Or, you can download the jQuery Zoom plugin.

2. Adding jQuery to your theme

At first, you need to check if jQuery is installed within your theme or not. This jQuery Zoom plugin required minimum jQuery 1.7+.

Trying to search in your theme these files theme.liquid, vendors.js, theme.js or script.js to see if it’s being loaded.

**Note: Remember: never include jQuery lib twice in your theme, this might causes conflict and Javascript issue within your theme.

After checking, you find jQuery lib is not included in your theme. Simple add this line to your theme head HTML (Often before closetag and before other js libs)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" defer="defer"></script>

3. Add the zoom.min.js plugin file to your theme

After download jQuery Zoom plugin, extract and find a file named **jquery.zoom.min.js, **upload it into your Theme assets folder. Then in your theme.liquid file, after jQuery lib loaded, include this line

<script type="text/javascript" src="{{ 'jquery.zoom.min.js' | asset_url }}" defer="defer">

Alternatively, you can also add the minified code to the end vendors.js, theme.js or **script.js **file – the one you found jQuery plugin is loaded in above step

4. Edit product template to init zoom function

Firstly, you have to find your product template used in your theme, it is often named product.liquid or product-template.liquid. Or try to search any file related to images in your product.liquid.

Add the class image-zoom and data-zoominformation.

_** Note that the featured_image for your product might be called something else, depending on the theme you’re using._

The code after edited might look something like this:

<img class="shopifyexplorer-zoom" src="{{ featured_image | img_url: '480x480' }}" alt="{{ image.alt | escape }} data-zoom="{{ featured_image | img_url: '1024x1024', scale: 2}} >

5. 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.

<script>
window.addEventListener('DOMContentLoaded', function() {
    (function($) {
	  $(document).ready(function(){
	    $('.shopifyexplorer-zoom')
	      .wrap('<span style="display:inline-block"></span>')
	      .css('display', 'block')
	      .parent()
	      .zoom({
	        url: $(this).find('img').attr('data-zoom')
	      });
	    });
	  };
	})(jQuery);
});
</script>

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.

Conclusion:

Hope that my detail tut can help you a little in launching your shop.

This tutorial is just showing you how to add jQuery zoom function in general, in another article, I will show you how I add it detailed and a specific theme. Thank you all for reading my tutorial.