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.
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.
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
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)
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)
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
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)
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)
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
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)
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)
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
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)
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)
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
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)
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)
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
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)
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)
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
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)
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)
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
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
To remove the red "Please upgrade" text, you will need to buy a license from Magic Toolbox.
Sirv Image Optimization
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.
