Elegant images without the effort

Experiment with a free trial before you buy

  • Responsive design adapts to your design on any device.
  • Users love the smooth movement and high quality zoom.

Install | Download

Relied upon by ShopSite 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 ShopSite 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

  1. Download Magic Zoom Plus (free and fully functional demo version).
  2. Upload the magiczoomplus.css and magiczoomplus.js files under Merchandising > Custom Templates > Includes > Upload A Publish File.
  3. If you are using a custom template, reference the magiczoomplus.css and magiczoomplus.js files to the <head> section of your custom template using the code below:

     <link href="[-- OUTPUT_DIRECTORY_URL --]/publish/magiczoomplus.css" rel="stylesheet" type="text/css">
     <script src="[-- OUTPUT_DIRECTORY_URL --]/publish/magiczoomplus.js" type="text/javascript"></script>
    

    Note: If you are using a built in ShopSite template, you will first need to make a copy of the product template you are using (you can look under Products > Edit Product Layout to see what template you are using). Then copy that template under Merchandising > Custom Templates > Page/Product > Copy A ShopSite Product Template. The easiest thing to do now, if you want this modified template to be applied to ALL your products, is to re-copy your copy, and re-name it the exact same name as the original product template so that your modified product template overrides the original. Then, find the </head> tag in your newly copied product template, and paste the code above just above it.

  4. In that same product template you modified in Step 3, locate the tag, which should be almost at the very end of the template file. Paste the following code just above/before the </body> tag:

    <script>
    var mID = document.getElementsByClassName("prod_img");
    var mI = mID[0].innerHTML;
    
    
    mID[0].innerHTML = '<a href="[-- OUTPUT_DIRECTORY_URL --]/media/[-- IMAGE PRODUCT.MoreInformationGraphic --]" class="MagicZoom" id="Zoomer" title="[-- PRODUCT.Name REMOVE_HTML --]" name="prod_link">' + mI + '<\/a>';
    
    var smNum = document.getElementsByClassName("small_img");
    var tds = smNum[0].getElementsByClassName("small_img");
    for (var i=0;i<(smNum.length)-1;i++) {
        var innerds = tds[i].innerHTML;
        var smImg = tds[i].getElementsByTagName("img");
        var imgURL = smImg[0].getAttribute("src");
        var lgURL = imgURL.replace("ss_size3/","");
        var mdURL = imgURL.replace("ss_size3/","ss_size1/");
        var builtTD = "<div class=\"newdiv\"><a href=\"" + lgURL + "\" data-zoom-id=\"Zoomer;\" data-image=\"" + mdURL + "\"><img src=\"" + imgURL + "\"><\/a></div>";
        tds[i].innerHTML = builtTD;
    }
    
    </script>
    
  5. You're done. All you need to do now is republish by going to Utilities > Publish > Regenerate. This will force ShopSite to re-create all your store pages using the newly updated template file.
  6. 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.

Uninstallation

Thanks for trying Magic Zoom Plus on your ShopSite 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.

  1. If you are using a custom template, delete the reference for magiczoomplus.css and magiczoomplus.js files from the <head> section of your custom template. The code will look like this:

     <link href="[-- OUTPUT_DIRECTORY_URL --]/publish/magiczoomplus.css" rel="stylesheet" type="text/css">
     <script src="[-- OUTPUT_DIRECTORY_URL --]/publish/magiczoomplus.js" type="text/javascript"></script>
    

    Note: This is the same if you are using a built in ShopSite template.

  2. In that same product template you modified in Step 1, locate the </body> tag, which should be almost at the very end of the template file. Delete the following code from just above/before the </body> tag:

    <script>
    var mID = document.getElementsByClassName("prod_img");
    var mI = mID[0].innerHTML;
    
    
    mID[0].innerHTML = '<a href="[-- OUTPUT_DIRECTORY_URL --]/media/[-- IMAGE PRODUCT.MoreInformationGraphic --]" class="MagicZoom" id="Zoomer" title="[-- PRODUCT.Name REMOVE_HTML --]" name="prod_link">' + mI + '<\/a>';
    
    var smNum = document.getElementsByClassName("small_img");
    var tds = smNum[0].getElementsByClassName("small_img");
    for (var i=0;i<(smNum.length)-1;i++) {
        var innerds = tds[i].innerHTML;
        var smImg = tds[i].getElementsByTagName("img");
        var imgURL = smImg[0].getAttribute("src");
        var lgURL = imgURL.replace("ss_size3/","");
        var mdURL = imgURL.replace("ss_size3/","ss_size1/");
        var builtTD = "<div class=\"newdiv\"><a href=\"" + lgURL + "\" data-zoom-id=\"Zoomer;\" data-image=\"" + mdURL + "\"><img src=\"" + imgURL + "\"><\/a></div>";
        tds[i].innerHTML = builtTD;
    }
    
    </script>
    
  3. Delete the magiczoomplus.css and magiczoomplus.js files from under Merchandising > Custom Templates > Includes.
  4. You're done. All you need to do now is republish by going to Utilities > Publish > Regenerate. This will force ShopSite to re-create all your store pages using the newly updated template file.
  5. 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: 0 (0 reviews)

There are no reviews yet. Be the first!

Submit your review


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

Other ShopSite extensions

Try our other great image effects!