MagicToolbox.comImage tools for your website Contact Us

MivaMiva Merchant integration

Add image zoom, magnify, enlarge and slideshow to your Miva Merchant 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 for you (normally £55-£80).

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

Choose your Miva version:

  1. Download the zip file for the tool you wish to install:
  2. Unzip the file and upload the magiczoomplus folder to this location on your Miva website:
    httpdocs/magiczoomplus
  3. Download this file: magic-miva-imagemachine.js (right click it and "Save as"), then copy that file to the magiczoomplus folder.
  4. In your Miva admin panel, go to the Pages menu.
  5. Find the page Product Display with ID=PROD and click the Edit button on the right.
  6. At the top, click the link "HEAD Tag Content/CSS".
  7. Insert the following lines at the top of template:
    <link rel="stylesheet" type="text/css" href="/magiczoomplus/magiczoomplus.css" />
    <script type="text/javascript" src="/magiczoomplus/magiczoomplus.js"></script>
    <script type="text/javascript" src="/magiczoomplus/magic-miva-imagemachine.js?tool=MagicZoomPlus"></script>
  8. Click the Update button at the bottom of the page.
  9. Now your images should zoom! Contact us if you need help.
  1. Download the zip file for the tool you wish to install:
  2. Unzip the file and upload the magiczoomplus folder to this location on your Miva website:
    httpdocs/magiczoomplus
  3. In your Miva admin panel, go to the Pages menu.
  4. Find the page Product Display with ID=PROD and click the Edit button on the right.
  5. At the top, click the link "Product Display Layout".
  6. Find the line:
    <img src="&mvt:product:image;" alt="&mvt:product:name;" title="&mvt:product:name;" vspace="10" width="300">
    and replace it with:
    <mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:ZoomImage">
    <a id="mzMainImage" href="&mvt:product:customfield_values:customfields:ZoomImage;" class="MagicZoomPlus">
    </mvt:if>
    <img src="&mvt:product:image;" alt="&mvt:product:name;" title="&mvt:product:name;" vspace="10" width="300" />
    <mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:ZoomImage">
    </a>
    </mvt:if>
  7. The next 4 steps will add 2 alternative product images with thumbnails (so your page will show 3 product images in total). There is no standard method for adding multiple product images on a Miva page, so you may need to adjust these instructions for your site.
    Find this line:
    <a href="javascript:IM_ZoomPopup('AltView1');"><img src="&mvt:product:customfield_values:customfields:AltView1Thm;" class="Mini" width="75"></a>
    and replace it with:
    <a href="&mvt:product:customfield_values:customfields:AltView1;" rev="&mvt:product:customfield_values:customfields:AltView1;" rel="mzMainImage"><img src="&mvt:product:customfield_values:customfields:AltView1Thm;" class="Mini" width="75" /></a>
  8. Find this line:
    <a href="javascript:IM_ZoomPopup('AltView1');"><img src="&mvt:product:customfield_values:customfields:AltView1;" class="Mini" width="75"></a>
    and replace it with:
    <a href="&mvt:product:customfield_values:customfields:AltView1;" rev="&mvt:product:customfield_values:customfields:AltView1;" rel="mzMainImage"><img src="&mvt:product:customfield_values:customfields:AltView1;" class="Mini" width="75" /></a>
  9. Find this line:
    <a href="javascript:IM_ZoomPopup('AltView2');"><img src="&mvt:product:customfield_values:customfields:AltView2Thm;" class="Mini" width="75"></a>
    and replace it with:
    <a href="&mvt:product:customfield_values:customfields:AltView2;" rev="&mvt:product:customfield_values:customfields:AltView2;" rel="mzMainImage"><img src="&mvt:product:customfield_values:customfields:AltView2Thm;" class="Mini" width="75" /></a>
  10. Find this line:
    <a href="javascript:IM_ZoomPopup('AltView2');"><img src="&mvt:product:customfield_values:customfields:AltView2;" class="Mini" width="75"></a>
    and replace it with:
    <a href="&mvt:product:customfield_values:customfields:AltView2;" rev="&mvt:product:customfield_values:customfields:AltView2;" rel="mzMainImage"><img src="&mvt:product:customfield_values:customfields:AltView2;" class="Mini" width="75" /></a> a
  11. Find this line:
    <a href="javascript:IM_ZoomPopup('Zoom');"><img src="&mvt:product:customfield_values:customfields:ZoomThm;" class="MagicZoomPlus" width="75"></a>
    and replace it with:
    <a href="&mvt:product:customfield_values:customfields:ZoomImage;" rev="&mvt:product:customfield_values:customfields:ZoomImage;" rel="mzMainImage"><img src="&mvt:product:customfield_values:customfields:ZoomThm;" class="Mini" width="75" /></a>
  12. Find this line:
    <a href="javascript:IM_ZoomPopup('Zoom');"><img src="&mvt:product:customfield_values:customfields:ZoomImage;" class="MagicZoomPlus" width="75"></a>
    and replace it with:
    <a href="&mvt:product:customfield_values:customfields:ZoomImage;" rev="&mvt:product:customfield_values:customfields:ZoomImage;" rel="mzMainImage"><img src="&mvt:product:customfield_values:customfields:ZoomImage;" class="Mini" width="75" /></a>
  13. Click the Update button at the bottom of the page.
  14. At the top, click the link "HEAD Tag Content/CSS".
  15. Insert the following lines at the top of template:
    <link rel="stylesheet" type="text/css" href="/magiczoomplus/magiczoomplus.css" />
    <script type="text/javascript" src="/magiczoomplus/magiczoomplus.js"></script>
  16. Click the Update button at the bottom of the page.
  17. Enjoy!
  18. 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.

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 free support if you need help.

About

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

Payment

Pay by credit card or bank transfer, then download your product.

Payments: Visa, MasterCard, Maestro, Amex, Discover, Paypal, Google Checkout, Avangate

100% Support

30 minutes free technical support.

Guarantee

30 day money-back guarantee.

Stay in touch

Magic Toolbox on Facebook Magictoolbox.com on YouTube Magic Toolbox on Twitter Magic Toolbox on GetSatisfaction