Engage customers instantly.

Make your online shop look more trustworthy.

  • Wonderful feeling to enlarge images on desktop and mobile.
  • The ultimate responsive zoom solution for serious retailers.

Install | Download

Works on these pages:

    • Product details page
    • Manual install elsewhere
  • nopCommerce 4.xx
  • nopCommerce 3.xx
  • nopCommerce 2.xx

Does your nopCommerce template offer an image zoom but not a lightbox effect?

Download the free trial of Magic Zoom Plus and see for yourself the incredible difference 2 image zoom effects have on your product images. Zoom & enlarge is a powerful combination.

The nopCommerce image lightbox enlarges on click to fill users' screen intuitively. For products with multiple images, each image displays as a thumbnail. Why is this helpful? Shoppers are often busy and want to view as many product images as possible without returning to the product page. Switching between images in the enlarge mode is the perfect solution.

We always recommend you try before you buy, but even then you're covered – simply take advantage of our 30-day moneyback guarantee. Install Magic Zoom Plus today!

Features you'll love...

  • Responsive
  • Fast
  • Built with SEO in mind
  • Image caching
  • Easy to customise
  • Auto image resizing
  • Scrollable thumbnails
  • Supports all templates
  • Watermarked images
  • On-demand loading
  • Regularly updated
  • jQuery compatible
  • One-off payment

Installation

  1. Download Magic Zoom Plus (free and fully functional demo version).
  2. Unzip the file and copy the magiczoomplus folder to the Scripts folder in the root of your web server.
  3. Download this file: magic-nopcommerce.js (right click it and "Save as"), then copy that file to the magiczoomplus folder.
  4. Insert the following at the end of the \Views\Product\_ProductDetailsPictures.cshtml (nopCommerce 3.40) or Views\Catalog\_ProductDetailsPictures.cshtml (older nopCommerce versions):

    <script>var MagicToolbox_toolName = 'MagicZoom';</script>
    <script src="/Scripts/magiczoomplus/magiczoomplus.js"></script>
    <script src="/Scripts/magiczoomplus/magic-nopcommerce.js"></script>
    <link rel="stylesheet" href="/Scripts/magiczoomplus/magiczoomplus.css">
  5. Now your images should zoom! Contact us if you need help.
  6. Enjoy!
  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.

Add 360 spins

Have you heard about Sirv? It's perfect for combining with Magic Zoom Plus to show customers products from every angle on your nopCommerce store. Enjoy zoom, enlarge and 360 spin effects on any product page.

  1. Install Magic Zoom Plus.
  2. Create your Sirv account.
  3. Create a new folder in your Sirv account called products.
  4. Open the products folder and create another new folder. Name it to match the product ID in nopCommerce.
  5. Upload your set of product images to the new folder and a 360 spin will be generated.
  6. To activate Sirv, add following code to your page:
    <script>
    var SirvID = 'YOUR-ACCOUNT-ID', SirvSpinsPath = 'products/{product-id}/{product-id}.spin';
    </script>
    

    (replacing YOUR-ACCOUNT-ID with your Sirv account ID).

  7. The 360 spin will now appear next to the other product images (you may need to refresh the page). If you need help, contact our support team.

Uninstallation

Thanks for trying Magic Zoom Plus on your nopCommerce 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 the end of the \Views\Product\_ProductDetailsPictures.cshtml (nopCommerce 3.40) or Views\Catalog\_ProductDetailsPictures.cshtml (older nopCommerce versions):

    <script>var MagicToolbox_toolName = 'MagicZoom';</script>
    <script src="/Scripts/magiczoomplus/magiczoomplus.js"></script>
    <script src="/Scripts/magiczoomplus/magic-nopcommerce.js"></script>
    <link rel="stylesheet" href="/Scripts/magiczoomplus/magiczoomplus.css">
  2. Delete the magiczoomplus folder from the Scripts folder in the root of your web server.
  3. Magic Zoom Plus is now uninstalled.

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 nopCommerce extensions

Try our other great image effects!


These instructions are for nopCommerce, the open source e-commerce shopping cart. They will help you integrate our JavaScript image tools by referencing external JS files on your product pages.