Experience the ultimate NetSuite zoom.

Responsive design - auto scales to fit the user's screen.

  • Perfectly sized images, with mouse gestures too.
  • Refine and optimise your zoom easily and quickly.

Install | Download

  Rating: 5.0 (1 reviews)

Founded in 1998, NetSuite offers many software suites. But if you're using SuiteCommerce for your ecommerce website, then you'll need an image zoom too. The built-in version NetSuite uses lacks responsiveness and style.

Try Magic Zoom Plus (free trial) for your product image zoom and immediately see the difference. This image zoom provides customers with 2 ways to view your products: zoom and lightbox. Hover the product image to reveal zoom to the side; click and the lightbox opens to full screen.

Customer service is our priority. Everyone receives 30 minutes free email support so if you have any questions, get in touch, our friendly Support team is waiting to help. You can even hire us to install & customize Magic Zoom Plus for you!

Installation

  1. Download Magic Zoom Plus (free and fully functional demo version).
  2. Upload magiczoomplus.js and magiczoomplus.css to your file cabinet, at:
    "Documents > Files > File Cabinet > Web Site Hosting Files > Staging Hosting Files > site"
  3. Point your domain name's test URL to your NetSuite site e.g. http://test.example.com.
  4. Register your test URL in the Domains section like so:
    Hosted As=Web Store”, “Web Site=yourdomainname”, and “HTML Hosting Root=Staging Hosting Files”.
  5. Upload your product images to this location: “Lists > Web Site > Images” and set your desired image sizes for the small image and large: “Setup > Web Site > Image Resizing”.
  6. Reference the CSS and JS files via the “Addition to <head>” section of the “General” tab, at: “Setup > Web Site > Themes>”.

    Alternatively, reference these two files in each of your lower level Item/Category Templates, in the “Addition to <head>” section, at: “Setup > Web Site > Item/Category Templates”.

  7. The code added to your <head> should look something like this:

    <meta http-equiv="imagetoolbar" content="no" />
    <link rel="stylesheet" href="/site/magiczoomplus.css" type="text/css" media="screen" />
    <script src="/site/magiczoomplus.js" type="text/javascript"></script>
    

    The code added to your <body> should look something like this:

    <a href="<%=getCurrentAttribute('item','storeDisplayImage')%>" class="MagicZoom">
    <img src="<%=getCurrentAttribute('item','storeDisplayImage')%>" alt="" height="300" width="300">
    </a>
    
  8. 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.

Setting up multiple product images

Instructions for adding zooming to multiple product images on the same product details page:

  1. Add custom fields, to hold the images in the template, within NetSuite at:
    “Setup > Customization > Item Fields”
  2. Create new custom fields, enough to hold the maximum number of alternate images for any one item in your inventory. Your parameters should look something like this:
    Label: Alternate Image01 (use 2 digit numbers starting with 01)
    ID: _alternateimage01 (when saved, NetSuite adds the prefix “custitem”)
    Owner: select from dropdown menu
    Type: Image
    Store Value: check
    Applies To: check appropriate item type, e.g. Inventory Item
    Display: Subtab: Select Inventory from the dropdown menu
  3. Add alternate images to each of your items at:
    List > Website > Items”
    Inventory” tab> list all appropriate Alternate Images for each item here
  4. Find the appropriate place in your Item/Category Template code, and add the following code. For example, you need to add an additional row, and span across 3 columns, in the Products (item drilldown) Item/Category Template. Add your desired height and width parameters for your alternate images. Hint: click on the outside of the NetSuite code window, before clicking Save, and NetSuite will automatically do a background syntax check.
  5. Add id=”mainImage” to your code, which now should look like this:

    <body>
    <!-- Default image sizes set in Image Resizing; Returns URL (Big Image) and IMG Tag HTML (Small Image) respectively -->
    <!-- IMG Tag and attributes, instead of attribute “storedisplayimagehtml”, required here for Alternate Image process -->
    <!-- Set your desired height & width parameters -->
    <a href="<%=getCurrentAttribute('item','storeDisplayImage')%>" id="mainImage" class="MagicZoom">
    <img src="<%=getCurrentAttribute('item','storeDisplayImage')%>" alt="" height="300" width="300">
    </body>
    
  6. Add following code for alternate product images:

    
    <script type="text/javascript">
    var altimages = new Array(
     "<%=getCurrentAttribute('item','custitem_alternateimage01')%>" ,
     "<%=getCurrentAttribute('item','custitem_alternateimage02')%>" ,
     "<%=getCurrentAttribute('item','custitem_alternateimage03')%>" ,
     "<%=getCurrentAttribute('item','custitem_alternateimage04')%>" ,
     "<%=getCurrentAttribute('item','custitem_alternateimage05')%>" ,
     "<%=getCurrentAttribute('item','custitem_alternateimage06')%>" ,
     "<%=getCurrentAttribute('item','custitem_alternateimage07')%>" ,
     "<%=getCurrentAttribute('item','custitem_alternateimage08')%>" ,
     "<%=getCurrentAttribute('item','custitem_alternateimage09')%>"
    );
    
    for(var i = altimages.length - 1; i >= 0; i--) {
        if (altimages[i] == "" || altimages[i].substr(0,6) == "[Error") {
            altimages.splice(i,1);
        }
    }
    
    if (altimages.length < 2){
    } else{
        for (var i = 0; i < altimages.length; i++) {
            if (i == 0) {
                document.write("<BR><BR>Alternate images:<BR><BR>");
            }
            document.write("<a href=\"" + altimages[i] + "\" " +
            "rel=\"zoom-id:mainImage\"  rev=\"" + altimages[i] + "\" " +
            "><img style=\"widh:auto;\" src=\"" + altimages[i] +  "\" height=\"80\" alt=\"\"/></a>"
           );
           document.write("  ");
        }
    }
    </script>
    
    

Notes

  • NetSuite requires only one image for a product and resizes it dynamically as it is used across your site. NetSuite does not require you to upload different sizes for the same image. Images uploaded can have a width or length of up to 5000 pixels.
  • For help pointing your domain name to your NetSuite website, see: Pointing Domain Names at NetSuite.
  • When you test your changes, force refresh the page so that all files are downloaded again and not from your browser cache. If your changes do not readily appear, use “Setup > Web Site > Preview Web Site” to test your changes instead.
  • Special thanks to Gary Johnson for help with this step-by-step "how-to" guide.

Uninstallation

Thanks for trying Magic Zoom Plus on your NetSuite 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 reference for the CSS and JS files via the “Addition to <head>” section of the “General” tab, at: “Setup > Web Site > Themes>”.

    Alternatively, delete the reference of these two files from each of your lower level Item/Category Templates, in the “Addition to <head>” section, at: “Setup > Web Site > Item/Category Templates”.

  2. The code deleted from your <head> should look something like this:

    <meta http-equiv="imagetoolbar" content="no" />
    <link rel="stylesheet" href="/site/magiczoomplus.css" type="text/css" media="screen" />
    <script src="/site/magiczoomplus.js" type="text/javascript"></script>
    

    Delete the code from your <body> which should look something like this:

    <a href="<%=getCurrentAttribute('item','storeDisplayImage')%>" class="MagicZoom">
    <img src="<%=getCurrentAttribute('item','storeDisplayImage')%>" alt="" height="300" width="300">
    </a>
    
  3. Delete magiczoomplus.js and magiczoomplus.css from your file cabinet, at:
    "Documents > Files > File Cabinet > Web Site Hosting Files > Staging Hosting Files > site"
  4. 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: 5.0 (1 reviews)
Igor You Rock! What professionalism. When we purchased magiczoomplus we had no idea how to install it into our Netsuite platform. All we had to do was send a webpage template and Igor inserted the magiczoom tool. You guys are awesome! Thank you for outstanding customer service.

Lisa, affordabledisplayproducts.com

Submit your review


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

Other NetSuite extensions

Try our other great image effects!