Ecommerce Templates > General Help > Magic Toolbox

Magic Toolbox Integration

Magic Toolbox

We have teamed up with industry leaders, Magic Toolbox, to provide a range of product image tools that are guaranteed to wow your customers, inspire them to purchase with the detail available and allow you to employ cutting edge technology on your store with the minimum of effort. Although these are paid plug-ins, they won't be overwritten by updaters as we have carried out the integration for you.

View all Magic Toolbox demos

Magic Zoom Plus ™

Magic Zoom Plus

Magic Zoom Plus allows your customers to view magnified product images, choosing between the thumbnails you define in your store control panel and viewing them at full size if they wish.

View Magic Zoom Plus demo

Integration instructions

  • Download the Magic Zoom Plus zip file from the Magic Toolbox site.
  • Upload the /magiczoomplus/ folder to your store root, this is the folder that contains the files magiczoomplus.js, magiczoomplus.css and the /graphics/ folder (not all the example files).
  • Open the file proddetail.asp / proddetail.php and before the closing </head> tag add the following line

    <link type="text/css" rel="stylesheet" href="magiczoomplus/magiczoomplus.css" />

  • For the ASP version, open vsadmin/includes.asp and add the line

    magictoolbox="MagicZoomPlus"

  • For the PHP version, open vsadmin/includes.php and add the line

    $magictoolbox="MagicZoomPlus";

  • Now in your store control panel add the images to the Large Image and Giant Image fields that you want to show on the product detail page.
  • Magic Zoom Plus comes with a large number of tweaks that we have also made available. The list is available here.
  • For the ASP version, open vsadmin/includes.asp and add the following for example (this is just an example and is not required unless you want to tweak the display)

    magictooloptions="data-options=""disable-zoom:true; opacity:65; expand-effect:bounce"""

  • For the PHP version, open vsadmin/includes.php and add the following for example (this is just an example and is not required unless you want to tweak the display)

    $magictooloptions='data-options="disable-zoom:true; opacity:65; expand-effect:bounce"';

Top of page


Magic Zoom ™

Magic Zoom Plus

Magic Zoom allows your customers to view magnified product images and choosing between the thumbnails you define in your store control panel.

View Magic Zoom demo

Integration instructions

  • Download the Magic Zoom zip file from the Magic Toolbox site.
  • Upload the /magiczoom/ folder to your store root, this is the folder that contains the files magiczoom.js, magiczoom.css and the /graphics/ folder (not all the example files).
  • Open the file proddetail.asp / proddetail.php and before the closing </head> tag add the following line

    <link type="text/css" rel="stylesheet" href="magiczoom/magiczoom.css" />

  • For the ASP version, open vsadmin/includes.asp and add the line

    magictoolbox="MagicZoom"

  • For the PHP version, open vsadmin/includes.php and add the line

    $magictoolbox="MagicZoom";

  • Now in your store control panel add the images to the Large Image and Giant Image fields that you want to show on the product detail page.
  • Magic Zoom comes with a large number of tweaks that we have also made available. The list is available here.
  • For the ASP version, open vsadmin/includes.asp and add the following for example (this is just an example and is not required unless you want to tweak the display)

    magictooloptions="data-options=""opacity:65; zoom-fade:false"""

  • For the PHP version, open vsadmin/includes.php and add the following for example (this is just an example and is not required unless you want to tweak the display)

    $magictooloptions='data-options="opacity:65; zoom-fade:false"';

Top of page


Magic Thumb ™

Magic Thumb

Magic Thumb allows your customers to switch between your thumbnail product pictures, enlarge them and then run them like a slideshow.

View Magic Thumb demo

Integration instructions

  • Download the Magic Thumb zip file from the Magic Toolbox site.
  • Upload the /magicthumb/ folder to your store root, this is the folder that contains the files magicthumb.js, magicthumb.css and the /graphics/ folder (not all the example files).
  • Open the file proddetail.asp / proddetail.php and before the closing </head> tag add the following line

    <link type="text/css" rel="stylesheet" href="magicthumb/magicthumb.css" />

  • For the ASP version, open vsadmin/includes.asp and add the line

    magictoolbox="MagicThumb"

  • For the PHP version, open vsadmin/includes.php and add the line

    $magictoolbox="MagicThumb";

  • Now in your store control panel add the images to the Large Image and Giant Image fields that you want to show on the product detail page.
  • Magic Thumb comes with a large number of tweaks that we have also made available. The list is available here.
  • For the ASP version, open vsadmin/includes.asp and add the following for example (this is just an example and is not required unless you want to tweak the display)

    magictooloptions="data-options=""expand-speed:5000; swap-image:mouseover"""

  • For the PHP version, open vsadmin/includes.php and add the following for example (this is just an example and is not required unless you want to tweak the display)

    $magictooloptions='data-options="expand-speed:5000; swap-image:mouseover"';

Top of page

 


Magic Slideshow ™

Magic slideshow

Magic Slideshow allows you to show smooth scrolling images of your products pictures.

View Magic Slideshow demo

Integration instructions

  • Download the Magic Slideshow zip file from the Magic Toolbox site.
  • Upload the /magicslideshow/ folder to your store root, this is the folder that contains the files magicslideshow.js, magicslideshow.css and the /graphics/ folder (not all the example files).
  • Open the file proddetail.asp / proddetail.php and before the closing </head> tag add the following line

    <link type="text/css" rel="stylesheet" href="magicslideshow/magicslideshow.css" />

  • For the ASP version, open vsadmin/includes.asp and add the line

    magictoolbox="MagicSlideshow"

  • For the PHP version, open vsadmin/includes.php and add the line

    $magictoolbox="MagicSlideshow";

  • Now in your store control panel add the images to the Large Image and Giant Image fields that you want to show on the product detail page.
  • Magic Slideshow comes with a large number of tweaks that we have also made available. The list is available here.
  • For the ASP version, open vsadmin/includes.asp and add the following for example (this is just an example and is not required unless you want to tweak the display)

    magictooloptions="data-options=""expand-speed:5000; effect:fade"""

  • For the PHP version, open vsadmin/includes.php and add the following for example (this is just an example and is not required unless you want to tweak the display)

    $magictooloptions='data-options="expand-speed:5000; effect:fade"';

Top of page


Magic Scroll ™

Magic Scroll

Magic Scroll allows you to quickly scroll through multiple images with lots of custom options.

View Magic Scroll demo

Integration instructions

  • Download the Magic Scroll zip file from the Magic Toolbox site.
  • Upload the /magicscroll/ folder to your store root, this is the folder that contains the files magicscroll.js, magicscroll.css and the /graphics/ folder (not all the example files).
  • Open the file proddetail.asp / proddetail.php and before the closing </head> tag add the following line

    <link type="text/css" rel="stylesheet" href="magicscroll/magicscroll.css" />

  • For the ASP version, open vsadmin/includes.asp and add the lines

    magictoolbox="MagicScroll"

  • For the PHP version, open vsadmin/includes.php and add the lines

    $magictoolbox="MagicScroll";

  • Now in your store control panel add the images to the Large Image and Giant Image fields that you want to show on the product detail page.
  • Magic Scroll comes with a large number of tweaks that we have also made available. The list is available here.
  • For the ASP version, open vsadmin/includes.asp and add the following for example (this is just an example and is not required unless you want to tweak the display)

    magictooloptions="data-options=""speed:5000; width:auto"""

    To specify the number of thumbnails use

    magictooloptionsjs="<script>MagicScrollOptions = { items:3 }</script>"


  • For the PHP version, open vsadmin/includes.php and add the following for example (this is just an example and is not required unless you want to tweak the display)

    $magictooloptions='data-options="speed:5000; width:auto"';

    To specify the number of thumbnails use

    $GLOBALS['magictooloptionsjs']='<script>MagicScrollOptions = { items:3 }</script>';

Top of page


Magic 360 ™

Magic 360 Plus

Magic 360 allows your customers to spin your product pictures for a 360º view.

View Magic 360 demo

Integration instructions

  • Download the Magic 360 zip file from the Magic Toolbox site.
  • Upload the /magic360/ folder to your store root, this is the folder that contains the files magic360.js, magic360.css and the /graphics/ folder (not all the example files).
  • Open the file proddetail.asp / proddetail.php and before the closing </head> tag add the following line

    <link type="text/css" rel="stylesheet" href="magic360/magic360.css" />

  • For the ASP version, open vsadmin/includes.asp and add the lines

    magictoolbox="magic360"
    magic360images=32

    where 32 is the number of images that make up your 360º presentation

  • For the PHP version, open vsadmin/includes.php and add the lines

    $magictoolbox="magic360";
    $magic360images=32;

    where 32 is the number of images that make up your 360º presentation

  • Now in your store control panel add one image to the Large Image field, for example largeimage01.jpg and one image to the Giant Image field, for example giantimage01.jpg. The system assumes that the rest of your images will be sequentially named eg. largeimage02.jpg, largeimage03.jpg etc so you don't need to add them all.
  • Magic 360 comes with a large number of tweaks that we have also made available. The list is available here.
  • For the ASP version, open vsadmin/includes.asp and add the following for example (this is just an example and is not required unless you want to tweak the display)

    magictooloptions="data-options=""spin:hover; autostart:true"""

  • For the PHP version, open vsadmin/includes.php and add the following for example (this is just an example and is not required unless you want to tweak the display)

    $magictooloptions='data-options="spin:hover; autostart:true"';

Top of page


Combine Magic Scroll ™ with other tools

Magic Scroll

It is possible to combine Magic Scroll with other Magic Toolbox features to have both showing for the same product.

View Magic Scroll combined with Magic Thumbs demo

Integration instructions

  • Download the Magic Scroll zip file from the Magic Toolbox site.
  • Upload the /magicscroll/ folder to your store root, this is the folder that contains the files magicscroll.js, magicscroll.css and the /graphics/ folder (not all the example files).
  • Open the file proddetail.asp / proddetail.php and before the closing </head> tag add the following line

    <link type="text/css" rel="stylesheet" href="magicscroll/magicscroll.css" />

    as well as the other Magic Toolbox feature you are using eg

    <link type="text/css" rel="stylesheet" href="magiczoomplus/magiczoomplus.css" />

  • For the ASP version, open vsadmin/includes.asp and add the line

    magicscrollthumbnails=TRUE
    ...along with the Magic Toolbox option of your choice, for instance...
    magictoolbox="MagicZoomPlus"

  • For the PHP version, open vsadmin/includes.php and add the lines

    $magicscrollthumbnails=TRUE;
    ...along with the Magic Toolbox option of your choice, for instance...
    $magictoolbox="MagicZoomPlus";

  • For the ASP version, open vsadmin/includes.asp and add the following for example (this is just an example and is not required unless you want to tweak the display)

    magicscrollthumbnailsjs="<script>MagicScroll.options = {'height':100,'width':300}</script>" .

  • For the PHP version, open vsadmin/includes.php and add the following for example (this is just an example and is not required unless you want to tweak the display)

    $magicscrollthumbnailsjs="<script>MagicScroll.options = {'height':100,'width':300}</script>";

  • Please note, when using Magic Scroll as a thumbnail viewer, do not set the item-tag parameter to "img", as doing so will stop Magic Scroll displaying

Top of page


Magic ToolBox on the products page

In version 6.3 we added the ability to add Magic ToolBox effects to the products page. To enable this feature you'll need add the following to vsadmin/includes.asp

magictoolboxproducts="MagicZoomPlus"

or to includes.php

$magictoolboxproducts="MagicZoomPlus";

...where "MagicZoomPlus" is the image effect you are using. You will also need to copy the corresponding css line from the detail page to the products page eg. add <link type="text/css" rel="stylesheet" href="magiczoomplus/magiczoomplus.css" /> before the </head> tag of products.asp or products.php.

If you need to change the variables add this to includes.asp for example

magictooloptionsproducts="data-options=""expand-speed:5000; swap-image:mouseover"""

or to includes.php

$magictooloptionsproducts='data-options="expand-speed:5000; effect:fade"';

To show thumbnails on the products page add the following to vsadmin/includes.asp

thumbnailsonproducts=TRUE

or to includes.php

$thumbnailsonproducts=TRUE;

To style the thumbnail appearance you will need something like this in includes.asp

thumbnailstyleproducts="width:75px;padding:3px;margin:3px;border: 1px solid #ccc;"

or in includes.php

$thumbnailstyleproducts="width:75px;padding:3px;margin:3px;border: 1px solid #ccc;";


Top of page

CSS tweaks

You can tweak the style of the thumbnails but this is carried out through vsadmin/includes.asp:

thumbnailstyle="width:75px;padding:3px;margin:3px;border: 1px solid #ccc;"

or through vsadmin/includes.php with the addition of:

$thumbnailstyle="width:75px;padding:3px;margin:3px;border: 1px solid #ccc;";

Top of page


Troubleshooting

  • To remove the red "Please upgrade" text, you will need to buy a license from Magic Toolbox.

Sirv Image Optimization

Sirv

Magic Toolbox also offer a very comprehensive image serving service, called Sirv.

Shoppers like to view high-quality images but large files can slow down your page, potentially lowering conversions. By hosting your images on Sirv, you get the best of both worlds - high quality images and rapid loading.

Best-practice image optimisation provided by Sirv...

  • Image resizing
  • Image optimisation
  • Conversion to the smallest possible format (including WebP)
  • Responsive resizing
  • Lazy loading
  • Retina detection
  • Meta stripping
  • HTTP/2 delivery
  • CDN delivery from a global network of 20 locations

Websites typically load up to 15% faster and Google Page Speed score typically improves by up to 8%.

Create a free account and upload an image to test how fast it loads. For example, to resize an image, simply add scale.height=200 to the end of its URL, to make an image 200px high. Choose from 70 options for resizing, cropping, watermarking and editing your images.

Sirv can also host and quickly deliver your static files (JS, CSS, PDF, TTF, ICO, SVG, XML etc.) from its CDN.