Magic Zoom for nopCommerce

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>var MagicToolbox_toolName = 'MagicZoom';</script>
   <script src="/Scripts/magiczoom/magiczoom.js"></script>
   <script src="/Scripts/magiczoom/magic-nopcommerce.js"></script>
   <link 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.

Add 360 spins

Add a 360 viewer to your product page to display products from every angle. This is possible with our service Sirv. Based on a monthly subscription (free plan available), Sirv serves gorgeous spins to your store effortlessly.

1. Install Magic Zoom.
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 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>var MagicToolbox_toolName = 'MagicZoom';</script>
   <script src="/Scripts/magiczoom/magiczoom.js"></script>
   <script src="/Scripts/magiczoom/magic-nopcommerce.js"></script>
   <link 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.

Other nopCommerce extensions

Try our other great image effects!

Magic Zoom Plus

Magic Thumb

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.