A grand zoom without a grand price tag

Customers can shop using any device, enjoying your products in detail.

  • Responsive design adapts to your design on any device.
  • Unrivalled – fresh new releases for 7 years running.

Install | Download

  • nopCommerce 3.xx
  • nopCommerce 2.xx

Whether you're a corporate or small business using nopCommerce shopping cart, displaying close up details of products is essential.

The nopCommerce open source e-commerce solution doesn't come with a built-in product image zoom. That's where we come in. Install Magic Zoom and allow customers to view product images in detail. By default, the zoom appears to the side. But other options available are an internal zoom, full preview and magnifier (circle and square).

Fully responsive, this nopCommerce product zoom automatically scales images up and down to fit users' screen size.

Need a nopCommerce image zoom which zooms and enlarges, try Magic Zoom Plus. The lightbox feature enlarges to full-screen, perfect for customers swiping through images on handheld devices.

Installation

  1. Download Magic Zoom (free and fully functional demo version).
  2. Unzip the file and copy the magiczoom 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 magiczoom 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 type="text/javascript">var MagicToolbox_toolName = 'MagicZoom';</script>
    <script src="/Scripts/magiczoom/magiczoom.js" type="text/javascript"></script>
    <script src="/Scripts/magiczoom/magic-nopcommerce.js" type="text/javascript"></script>
    <link type="text/css" rel="stylesheet" href="/Scripts/magiczoom/magiczoom.css"/>
  5. Now your images should zoom! Contact us if you need help.
  6. Enjoy!
  7. Buy Magic Zoom To upgrade your free and fully functional trial version of Magic Zoom (which removes the "Trial version" text), buy Magic Zoom. Then overwrite the demo magiczoom.js file with the one from your licensed version.

Uninstallation

Thanks for trying Magic Zoom on your nopCommerce site! What did you hope Magic Zoom 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 type="text/javascript">var MagicToolbox_toolName = 'MagicZoom';</script>
    <script src="/Scripts/magiczoom/magiczoom.js" type="text/javascript"></script>
    <script src="/Scripts/magiczoom/magic-nopcommerce.js" type="text/javascript"></script>
    <link type="text/css" rel="stylesheet" href="/Scripts/magiczoom/magiczoom.css"/>
  2. Delete the magiczoom folder from the Scripts folder in the root of your web server.
  3. Magic Zoom is now uninstalled.

FAQ

  1. I want an internal image zoom

    No problem! Use zoomPosition: 'inner' to create an internal image zoom. This is how your code will look:

    <script>
    var mzOptions = {
       zoomPosition: 'inner'
    };
    </script>
    

    There are over 40 options to choose from to customize Magic Zoom exactly how you want.

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.