BigCommerce integration

Improve your BigCommerce site with these gorgeous effects to zoom, magnify, enlarge and slide your images.

Choose your favourite tool and integrate it yourself using the instructions below. Or hire us and we will install it for you (normally £55-£80).

BigCommerce instructions (beta)

The following instructions (for Magic Zoom Plus™) are almost identical for Magic Zoom™, Magic Magnify™, Magic Magnify Plus™, Magic Thumb™ and Magic Touch™. Simply 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 and upload the magiczoomplus folder to the content folder on your BigCommerce website using FTP (screenshot).
3. Download this file: magic-bigcommerce.js (right click it and save it to your computer), then upload that file to the magiczoomplus folder on your server (screenshot).
4. In your BigCommerce admin panel, go to the Settings > Store menu, choose Images section (screenshot) and ensure that parameter 'Show Tiny Thumbnails?' is activated (screenshot).
5. In your BigCommerce admin panel, go to the Design > Template Files section and click 'Edit' link in the product.html's template line (screenshot).
6. Insert the following lines at the top of template (screenshot):
   <link href="/content/magiczoomplus/magiczoomplus.css" rel="stylesheet" type="text/css" media="screen"/>
   <script src="/content/magiczoomplus/magiczoomplus.js" type="text/javascript"></script>
   <script src="/content/magiczoomplus/magic-bigcommerce.js?tool=MagicZoomPlus" type="text/javascript"></script>
7. Click the Save button at the top of the page.
8. Now your images should zoom! Contact us if you need help.

Installation of Magic Slideshow™ or 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 support if you need help.

About

These instructions are for BigCommerce. 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.