MagicZoom/MagicZoom Plus™

Magic Zoom™ is a JavaScript zoom tool. It’s the best way to display images with ultimate detail. Users do not need to click anything – they just move their mouse over the image to see every detail of your product! Requires license from MagicZoom™. Magic Zoom™ is enabled via the Add To Cart Plug-in. In addition to rendering a "Zoom" version of the product image, this tool also provides for visual selection of product configurations. For instance, by supplying large, main, and thumb images for each available color configuration, the end-user is presented with a set of clickable thumbnails, in place of the standard configuration drop-down. Additional image sets (alternate views) may be specified per configuration value.

This plug-in is typically used on the product details page. It can, however, be used wherever products are displayed.

Important: Before installing MagicZoom™, you must have licensed MagicZoom™ javascript before beginning implementation. Otherwise, you will be integrating it twice.

Pre-Plug-in Configuration

MagicZoom Plus™

Step	Action
1	Download the MagicZoom Plus™ zip file from https://www.magictoolbox.com.
2	Extract the MagicZoom Plus™ zip file.
3	Use FTP or SFTP to place these files in the following locations: /static-interface_name/css/magiczoomplus.css /static-interface_name/css/magiczoomplus.js
4	Using the website template editor, add the following HTML to the Global Head Include template: <!-- MagicZoom Plus --> <link rel="stylesheet" href="static/js/magiczoomplus/magiczoomplus.css" /> <script src=""static/js/magiczoomplus/magiczoomplus.js" ></script>
5	Add following to styles.css img.MagicZoomLoading { display: none; }
6	Go to plugins/ product_page-magic_zoom to set MagicZoom configuration options.

Plug-in Configuration Steps (All Versions)

Follow the steps below once all pre-configuration tasks have been completed.

Step	Action
1	Size of Zoom Area (in Pixels, Required) - The size of the MagicZoom large image popup in pixels.
2	Position of Zoom Window (Required) - Where the MagicZoom large image popup will display relative to the main image. Options: Bottom, Left, Top, Right.
3	Loading Image - Specifies what loading image is displayed when MagicZoom is loading images. If left blank, a default loading image is used.
4	Loading Text - Displays a loading message to the user when MagicZoom is loading images. If left blank, no message is displayed.
5	Number of Image Sets (Required) - Tells MagicZoom how many additional Image Sets to configure. An Image Set is defined as a combination requiring thumbnail, small, and large images. Options: 1 - 20 sets.
6	Hit Save, then enter the following for each Image Set
1	Title for Image #N (Optional) - A title field from product general attributes. The value in this field is displayed as the Title of the MagicZoom large image popup.
2	Thumbnail Image #N (Required) - The thumbnail image field from product general attributes. The referenced field should be a path to a thumbnail image which renders thumbnails below the main image.
3	Small Image #N (Required) - The small image field from product general attributes. The referenced field should be a path to a small image which replaces the main image as thumbnails are clicked.
4	Large Image #N (Required) - The large image field from product general attributes. The referenced field should be a path to a large image which displays in the MagicZoom large image popup when the user hovers over the main image.
5	Alt Text Image #N (Required) - An Image Alt Text from product general attributes. The value in the field is displayed Alt Text.