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 instructions

The following instructions are for Magic Zoom Plus™, but are identical for Magic Zoom™, Magic Magnify™, Magic Magnify Plus™, Magic Thumb™ and Magic Touch™. Just replace the references to magiczoomplus with whichever tool you wish to use.

1. Download the zip file for the tool you wish to install:
   • Magic Zoom Plus™ Download Examples
   • 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 magiczoomplus folder to the 'Theme Assets' section.
5. Open the magiczoomplus.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:
   {{ 'magiczoomplus.css' | asset_url | stylesheet_tag }}
   {{ 'magiczoomplus.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="MagicZoomPlus" 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 magiczoomplus.js file with the one from your license.

Please contact us with any questions you have about installing our tools on Miva Merchant.

Examples

• Jo Gordon - Shopify site using Magic Magnify™
• Penley Art Studio - Shopify site using Magic Zoom Plus™

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 and/or Flash. They work in all major browsers including Internet Explorer 6, 7, 8, 9 and Firefox, Safari, Chrome and Opera.