Noteworthy features to thrill & excite.

Choose from over 90 customizations
  • Mobile - works beautifully on iPad, iPhone, Android.
  • Responsive - images scale up/down to fit users screen.
Install | Download
  Rating: 5.0 (3 reviews)
Relied upon by Miva Merchant store owners, Magic Zoom Plus has been the professional choice since 2009 for effortless on-hover image zooming and on-click full-screen effects. This Miva Merchant image tool makes it easy to apply these effects to your pages. With free new versions regularly released, your products will always look gorgeous with Magic Zoom Plus.

Live demos

Installation

Miva 5.5 PR8 with Image Machine installation

  1. Download Magic Zoom Plus (free and fully functional demo version).
  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 User Interface > 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.
  10. Buy Magic Zoom Plus To upgrade your free and fully functional trial version of Magic Zoom Plus (which removes the "Trial version" text), buy Magic Zoom Plus. Then overwrite the demo magiczoomplus.js file with the one from your licensed version.

Miva 5.5 installation

  1. Download Magic Zoom Plus (free and fully functional demo version).
  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="mtbMainImage" href="&mvt:product:customfield_values:customfields:ZoomImage;" class="MagicZoom">
    </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;" data-zoom-id="mtbMainImage" data-image="&mvt:product:customfield_values:customfields:AltView1;"><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;" data-zoom-id="mtbMainImage" data-image="&mvt:product:customfield_values:customfields:AltView1;"><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;" data-zoom-id="mtbMainImage" data-image="&mvt:product:customfield_values:customfields:AltView2;"><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;" data-zoom-id="mtbMainImage" data-image="&mvt:product:customfield_values:customfields:AltView2;"><img src="&mvt:product:customfield_values:customfields:AltView2;" class="Mini" width="75" /></a>
  11. Find this line:
    <a href="javascript:IM_ZoomPopup('Zoom');"><img src="&mvt:product:customfield_values:customfields:ZoomThm;" class="MagicZoom" width="75"></a>
    and replace it with:
    <a href="&mvt:product:customfield_values:customfields:ZoomImage;" data-zoom-id="mtbMainImage" data-image="&mvt:product:customfield_values:customfields:ZoomImage;"><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="MagicZoom" width="75"></a>
    and replace it with:
    <a href="&mvt:product:customfield_values:customfields:ZoomImage;" data-zoom-id="mtbMainImage" data-image="&mvt:product:customfield_values:customfields:ZoomImage;"><img src="&mvt:product:customfield_values:customfields:ZoomImage;" class="Mini" width="75" /></a>
  13. Click the Update button at the bottom of the page when finished.
  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. Buy Magic Zoom Plus To upgrade your free and fully functional trial version of Magic Zoom Plus (which removes the "Trial version" text), buy Magic Zoom Plus. Then overwrite the demo magiczoomplus.js file with the one from your licensed version.

Product attributes

Magic Zoom Plus for Miva Merchant
Magic Zoom Plus for Miva Merchant Magic Zoom Plus for Miva Merchant Magic Zoom Plus for Miva Merchant Magic Zoom Plus for Miva Merchant



Black Maroon Obsidian Seaweed

Do your products come in different colours or styles?

Each product within a Miva ecommerce store offers the option to add attributes.

A perfect way to display all colours, sizes, prices, styles of your items.

Magic Zoom Plus supports Miva Merchant product attributes out of the box.

Uninstallation

Thanks for trying Magic Zoom Plus on your Miva Merchant site! What did you hope Magic Zoom Plus could do? How can we improve it? Let us know, we're always improving our tools based on customer feedback.

Miva 5.5 PR8 with Image Machine uninstallation

  1. In your Miva admin panel, go to the User Interface > Pages menu.
  2. Find the page Product Display with ID=PROD and click the Edit button on the right.
  3. At the top, click the link "HEAD Tag Content/CSS".
  4. Delete the following lines from 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>
    
  5. Click the Update button at the bottom of the page.
  6. Delete the magiczoomplus folder from this location on your Miva website:
    httpdocs/magiczoomplus
  7. Magic Zoom Plus is now uninstalled.

Miva 5.5 uninstallation

  1. In your Miva admin panel, go to the Pages menu.
  2. Find the page Product Display with ID=PROD and click the Edit button on the right.
  3. At the top, click the link "HEAD Tag Content/CSS".
  4. Delete the following lines from the top of template:
    <link rel="stylesheet" type="text/css" href="/magiczoomplus/magiczoomplus.css" />
    <script type="text/javascript" src="/magiczoomplus/magiczoomplus.js"></script>
  5. At the top, click the link "Product Display Layout".
  6. Find the code:
    <mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:ZoomImage">
    <a id="mtbMainImage" href="&mvt:product:customfield_values:customfields:ZoomImage;" class="MagicZoom">
    </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>
    and replace it with:
    <img src="&mvt:product:image;" alt="&mvt:product:name;" title="&mvt:product:name;" vspace="10" width="300">
  7. If you added 2 alternative product images with thumbnails as part of the installation, then reverse Steps 7, 8, 9, 10, 11 & 12 from the Installation instructions > Click the Update button at the bottom of the page.
  8. Delete the magiczoomplus folder from this location on your Miva website:
    httpdocs/magiczoomplus
  9. Magic Zoom Plus is now uninstalled.

FAQ

  1. Can I remove bounce effect from mobile devices?

    Yes! To disable the bounce effect from small screen devices, add the following CSS to your magiczoomplus.css file:

    .mobile-magic .mz-figure > img {
    opacity: 1 !important;
    }
    .mobile-magic .mz-figure > img + img {
    transform: scale(1) !important;
    }

    .mobile-magic .mz-figure {
    -webkit-perspective: none !important;
    perspective: none !important;
    }
    .mobile-magic .mz-figure > img {
    opacity: 1 !important;
    }
    .mobile-magic .mz-figure:not(.mz-ready) > img:last-child {
    -webkit-transform: scale(1) !important;
    transform: scale(1) !important;
    }

Customer reviews

  Rating: 5.0 (3 reviews)
Super Easy Set Up! Great Functionality!
This is a great tool and was a breeze to set up with Miva Merchant 5.5. This coupled with the Magic scroll makes a great way to show lots of product images on the product page without taking up precious screen space, which is very important on mobile devices. It also had a very small effect on page load speed. A+++++++ to Magic Zoom Plus and Magic Scroll!

Nick, LoveIsARose.com

Excellent Support
In addition to a great product, the support was excellent in assuring that I had a perfect setup.

Psydde Delicious, deliciousboutique.com

Great Product!
Magic Zoom Plus works very well on my Miva Merchant website. It works great on our mobile site too. Crisp, clear imagery helps sell products. It's a great help to our business.

Glynn Gallagher, lockpickshop.com

Submit your review


Thank you!
Your review has been received and will be posted soon.
Used only to verify your review is genuine.

Other Miva Merchant extensions

Try our other great image effects!


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.