Shopify integration

Add image zoom, magnify, enlarge and slideshow to your Shopify website with the most powerful set of image tools.

Choose your favourite tool and integrate it yourself using the instructions below. Or hire us and we will install it as you wish for £29. Select the "installation" option at the checkout.

Shopify apps

Install one of our 3 Shopify Apps, available on the App Store!

Shopify manual installation instructions

We recommend using one of the 3 modules above as they provide the fastest way to add our tools to your Shopify site.

Alternatively, you can follow these instructions to install your preferred tool manually into your Shopify template. They are written for Magic Zoom™, but are identical for Magic Magnify™, Magic Magnify Plus™, Magic Thumb™ and Magic Touch™. Just replace the references to magiczoom with whichever tool you wish to use.

1. Download the zip file for the tool you wish to install:
   • Magic Zoom™ Download Examples
   • Magic Thumb™ Download Examples
   • Magic Magnify Plus™ Download Examples
   • Magic Magnify™ Download Examples
2. Unzip the file.
3. Login to Shopify and go to Admin Panel → Theme → Template editor.
4. Upload all the files from the magiczoom folder to the 'Theme Assets' section.
5. Open the magiczoom.css file and change the file paths of the images. For example, change this line:
   background: #fff url(graphics/loader.gif) no-repeat 2px 50%;
   to:
   background: #fff url(loader.gif) no-repeat 2px 50%;
6. Open the 'theme.liquid' template and insert the following lines before the </head> tag:
   {{ 'magiczoom.css' | asset_url | stylesheet_tag }}
   {{ 'magiczoom.js' | asset_url | script_tag }}
7. Open the 'product.liquid' template and insert the following lines, replacing the default product image code:
   <a href="{{ product.featured_image | product_img_url: 'original' }}" class="MagicZoom" id="zoom" title="{{ product.title | escape }}">{{ product.featured_image | product_img_url: 'medium' | img_tag }}</a>
   {% if product.images.size > 1 %}
   {% for image in product.images %}
   <a href="{{ image | product_img_url: 'original' }}" rev="{{ image | product_img_url: 'medium' }}" rel="zoom-id:zoom"><img src="{{ image | product_img_url: 'small'}}" alt="{{product.title | escape }}" width="75px" /></a>
   {% endfor %}
   {% endif %}
   (The default product image code normally looks like this:)
   {% case product.images.size %}
   {% when 1 %}
   <div id="pimage">
   {{ product.featured_image | product_img_url: 'medium' | img_tag }}
   </div>
   {% else %}
   {% for image in product.images %}
   <div id="pimage-{{forloop.index}}" class="pimage" {% if forloop.first %} style="display: block;" {% else %} style="display: none;" {% endif %}>
   {{ image | product_img_url: 'medium' | img_tag }}
   </div>
   {% endfor %}
   <div id="pimage-select">
   {% for image in product.images %}
   <a href="#" onmouseover="displayImage({{ forloop.index }}, 'product-images');"><img src="{{ image | product_img_url: 'small'}}" alt="{{product.title | escape }}" width="75px" /></a>
   {% endfor %}
   </div>
   {% endcase %}
8. You've finished - enjoy zooming your images!
9. To upgrade and remove the red "please upgrade" text, buy a license. Then overwrite the demo magiczoom.js file with the one from your license.

Please contact us with any questions you have about installing our tools on your Shopify website.

Magic Slideshow™ and Magic Scroll™

To install Magic Slideshow™ or Magic Scroll™, follow the same process as above. Download the zip file, reference the JS and CSS files in the HEAD tab, insert the images for your slideshow and upload the files.

Contact us for free support if you need help.

About

These instructions are for Shopify. Use them to add effects to your website including image zoom on hover/mouseover; image lightbox (enlarge image to full screen); image slideshows in JavaScript; image carousels; and image magnifiers. Each tool is built with JavaScript. They work in all major browsers including Internet Explorer 6, 7, 8, 9 and Firefox, Safari, Chrome and Opera.