Designed for serious online retailers

Cover all bases - zoom & enlarge

  • Responsive - images scale up/down to fit users screen.
  • Fast support - contact us with any questions.

Install | Download

Relied upon by ECWID 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 ECWID 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. Unzip the file on your computer and upload the magiczoomplus folder to the root of your web server, keeping the file and folder structure intact.
  3. Download this file: magic-ecwid.js (right click it and "Save as"), then copy that file to the magiczoomplus folder.
  4. Magic code for Ecwid product page

    Insert the following code somewhere in your page, below your Ecwid code:

    <link type="text/css" href="http://[your-website-url]/magiczoomplus/magiczoomplus.css" />
    <script src="http://[your-website-url]/magiczoomplus/magiczoomplus.js" type="text/javascript"></script>
    <script src="http://[your-website-url]/magiczoomplus/magic-ecwid.js?tool=MagicZoomPlus&width=300" type="text/javascript"></script>

    Please note that you should replace [your-website-url] with your domain name where you uploaded the magiczoomplus folder.

    The 300 defines the width (pixels) of the main product image. Change this to whatever numeric value you prefer.

  5. Now your images should zoom! Contact us if you need help.
  6. To change the zoom area size (e.g. 650 pixels) add this code after the magiczoomplus.js reference:

    <script>mzOptions = { 'zoomWidth' : 650, 'zoomHeight' : 650 }</script>
    

    Your final code will look like this:

    <link type="text/css" href="http://[your-website-url]/magiczoomplus/magiczoomplus.css" />
    <script src="http://[your-website-url]/magiczoomplus/magiczoomplus.js" type="text/javascript"></script>
    <script>mzOptions = { 'zoomWidth' : 650, 'zoomHeight' : 650 }</script>
    <script src="http://[your-website-url]/magiczoomplus/magic-ecwid.js?tool=MagicZoomPlus&width=300" type="text/javascript"></script>
    

    Remember to replace [your-website-url] with your domain name.

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

Multiple product images

If you have a paid Ecwid account, additional product images will be displayed underneath main product image. Free Ecwid accounts will have additional images displayed as they were originally, without any changes.

Free Ecwid accounts

Are you using a free Ecwid account? If yes, your large image will be reduced to 500px wide. This is a limit set by Ecwid on all free accounts.

As the Live Demo shows, zooms don't look impressive at 500px. Using a paid Ecwid account will remove the size restriction.

We recommend you upload a minimum image size of 800px width. Ideally 1000px to 1500px width are best as this size provides an excellent detailed zoom.

Product options

Magic Zoom Plus for ECWID
Magic Zoom Plus for ECWID Magic Zoom Plus for ECWID Magic Zoom Plus for ECWID Magic Zoom Plus for ECWID



Black Maroon Obsidian Seaweed

Do your products come in different colours or styles?

Magic Zoom Plus supports ECWID product options out of the box.

Whether you choose radio, dropdown menu or swatch thumbnails - product attributes is a perfect way to show customers your product range.

Uninstallation

Thanks for trying Magic Zoom Plus on your ECWID 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. Delete the following code from your page (below your Ecwid code):

    <link type="text/css" href="http://[your-website-url]/magiczoomplus/magiczoomplus.css" rel="stylesheet"/>
    <script src="http://[your-website-url]/magiczoomplus/magiczoomplus.js" type="text/javascript"></script>
    <script src="http://[your-website-url]/magiczoomplus/magic-ecwid.js?tool=MagicZoomPlus&width=300" type="text/javascript"></script>
  2. Delete the magiczoomplus folder from the root of your web server.
  3. 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 ECWID extensions

Try our other great image effects!