Shopsite Plugins for Images - 3 to Try

extensions

Become the best ShopSite seller

ShopSite is an easy-to-use online store software with a powerful set of features. Entirely web-based, it's quick to get started, with no downloads needed. Create a set of products, take online payments and manage your orders.

Make your product images look even better - pick your favourite image zoom tool from Magic Toolbox extensions below, to zoom and enlarge your product images.

Magic Zoom Plus for ShopSite

Let all your images look incredible!

Completely responsive image zoom - no need to configurate.
Lightbox background colours adjust automatically to image colours.

Buy now £49 Download Free Trial

Supported versions

All latest versions

98% of shoppers say its their favourite zoom

Downloads

1200+

Key features

Responsive

Fast loading

SEO friendly

Supports video

Easy to customise

Switchable thumbnails

Friendly support

One-off payment

jQuery compatible

Regularly updated

Lazy loading

Optimised for mobile

Installation

Download Magic Zoom Plus (free and fully functional demo version).
Upload the magiczoomplus.css and magiczoomplus.js files under Merchandising > Custom Templates > Includes > Upload A Publish File.
If you are using a custom template, reference the magiczoomplus.css and magiczoomplus.js files to the <head> section of your custom template using the code below:
```
 <link href="[-- OUTPUT_DIRECTORY_URL --]/publish/magiczoomplus.css" rel="stylesheet">
 <script src="[-- OUTPUT_DIRECTORY_URL --]/publish/magiczoomplus.js"></script>
```
Note: If you are using a built in ShopSite template, you will first need to make a copy of the product template you are using (you can look under Products > Edit Product Layout to see what template you are using). Then copy that template under Merchandising > Custom Templates > Page/Product > Copy A ShopSite Product Template. The easiest thing to do now, if you want this modified template to be applied to ALL your products, is to re-copy your copy, and re-name it the exact same name as the original product template so that your modified product template overrides the original. Then, find the </head> tag in your newly copied product template, and paste the code above just above it.

In that same product template you modified in Step 3, locate the tag, which should be almost at the very end of the template file. Paste the following code just above/before the </body> tag:

<script>
var mID = document.getElementsByClassName("prod_img");
var mI = mID[0].innerHTML;


mID[0].innerHTML = '<a href="[-- OUTPUT_DIRECTORY_URL --]/media/[-- IMAGE PRODUCT.MoreInformationGraphic --]" class="MagicZoom" id="Zoomer" title="[-- PRODUCT.Name REMOVE_HTML --]" name="prod_link">' + mI + '</a>';

var smNum = document.getElementsByClassName("small_img");
var tds = smNum[0].getElementsByClassName("small_img");
for (var i=0;i<(smNum.length)-1;i++) {
    var innerds = tds[i].innerHTML;
    var smImg = tds[i].getElementsByTagName("img");
    var imgURL = smImg[0].getAttribute("src");
    var lgURL = imgURL.replace("ss_size3/","");
    var mdURL = imgURL.replace("ss_size3/","ss_size1/");
    var builtTD = "<div class="newdiv"><a href="" + lgURL + "" data-zoom-id="Zoomer;" data-image="" + mdURL + ""><img src="" + imgURL + ""></a></div>";
    tds[i].innerHTML = builtTD;
}

</script>

You're done. All you need to do now is republish by going to Utilities > Publish > Regenerate. This will force ShopSite to re-create all your store pages using the newly updated template file.
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.

Uninstallation

Thanks for trying Magic Zoom Plus on your ShopSite 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.

If you are using a custom template, delete the reference for magiczoomplus.css and magiczoomplus.js files from the <head> section of your custom template. The code will look like this:
```
 <link href="[-- OUTPUT_DIRECTORY_URL --]/publish/magiczoomplus.css" rel="stylesheet">
 <script src="[-- OUTPUT_DIRECTORY_URL --]/publish/magiczoomplus.js"></script>
```
Note: This is the same if you are using a built in ShopSite template.

In that same product template you modified in Step 1, locate the </body> tag, which should be almost at the very end of the template file. Delete the following code from just above/before the </body> tag:

<script>
var mID = document.getElementsByClassName("prod_img");
var mI = mID[0].innerHTML;


mID[0].innerHTML = '<a href="[-- OUTPUT_DIRECTORY_URL --]/media/[-- IMAGE PRODUCT.MoreInformationGraphic --]" class="MagicZoom" id="Zoomer" title="[-- PRODUCT.Name REMOVE_HTML --]" name="prod_link">' + mI + '</a>';

var smNum = document.getElementsByClassName("small_img");
var tds = smNum[0].getElementsByClassName("small_img");
for (var i=0;i<(smNum.length)-1;i++) {
    var innerds = tds[i].innerHTML;
    var smImg = tds[i].getElementsByTagName("img");
    var imgURL = smImg[0].getAttribute("src");
    var lgURL = imgURL.replace("ss_size3/","");
    var mdURL = imgURL.replace("ss_size3/","ss_size1/");
    var builtTD = "<div class="newdiv"><a href="" + lgURL + "" data-zoom-id="Zoomer;" data-image="" + mdURL + ""><img src="" + imgURL + ""></a></div>";
    tds[i].innerHTML = builtTD;
}

</script>

Delete the magiczoomplus.css and magiczoomplus.js files from under Merchandising > Custom Templates > Includes.
You're done. All you need to do now is republish by going to Utilities > Publish > Regenerate. This will force ShopSite to re-create all your store pages using the newly updated template file.
Magic Zoom Plus is now uninstalled.

The best customer service we have ever received! Having had many poorly scripted web tools in the past from inferior…

I have to say your service is the best I have ever had from any company I have dealt with…

We use Magic Zoom Plus and it is a super tool. Also the support (we had some issues with the…

Chris Lane
phonescollective.com
Mike Mikosic
gpsgolf.com.au
Alfred Rügheimer
orangekeyfashion.de

Magic Zoom Plus for ShopSite

Buy now £49 Download Free Trial

Magic Zoom for ShopSite

With responsive design, images automatically scale to fit the users screen.

Fit into any layout seamlessly with over 70 customisations
Conveniently zoom images on click or on hover.

Buy now £29 Download Free Trial

Supported versions

All latest versions

93% of users say it boosted their sales

Downloads

460+

Key features

Responsive

Fast loading

SEO friendly

Supports video

Easy to customise

Switchable thumbnails

Friendly support

One-off payment

Regularly updated

jQuery compatible

On-demand loading

Optimised for mobile

Installation

Download Magic Zoom (free and fully functional demo version).
Upload the magiczoom.css and magiczoom.js files under Merchandising > Custom Templates > Includes > Upload A Publish File.
If you are using a custom template, reference the magiczoom.css and magiczoom.js files to the <head> section of your custom template using the code below:
```
 <link href="[-- OUTPUT_DIRECTORY_URL --]/publish/magiczoom.css" rel="stylesheet">
 <script src="[-- OUTPUT_DIRECTORY_URL --]/publish/magiczoom.js"></script>
```
Note: If you are using a built in ShopSite template, you will first need to make a copy of the product template you are using (you can look under Products > Edit Product Layout to see what template you are using). Then copy that template under Merchandising > Custom Templates > Page/Product > Copy A ShopSite Product Template. The easiest thing to do now, if you want this modified template to be applied to ALL your products, is to re-copy your copy, and re-name it the exact same name as the original product template so that your modified product template overrides the original. Then, find the </head> tag in your newly copied product template, and paste the code above just above it.

In that same product template you modified in Step 3, locate the tag, which should be almost at the very end of the template file. Paste the following code just above/before the </body> tag:

<script>
var mID = document.getElementsByClassName("prod_img");
var mI = mID[0].innerHTML;


mID[0].innerHTML = '<a href="[-- OUTPUT_DIRECTORY_URL --]/media/[-- IMAGE PRODUCT.MoreInformationGraphic --]" class="MagicZoom" id="Zoomer" title="[-- PRODUCT.Name REMOVE_HTML --]" name="prod_link">' + mI + '</a>';

var smNum = document.getElementsByClassName("small_img");
var tds = smNum[0].getElementsByClassName("small_img");
for (var i=0;i<(smNum.length)-1;i++) {
    var innerds = tds[i].innerHTML;
    var smImg = tds[i].getElementsByTagName("img");
    var imgURL = smImg[0].getAttribute("src");
    var lgURL = imgURL.replace("ss_size3/","");
    var mdURL = imgURL.replace("ss_size3/","ss_size1/");
    var builtTD = "<div class="newdiv"><a href="" + lgURL + "" data-zoom-id="Zoomer;" data-image="" + mdURL + ""><img src="" + imgURL + ""></a></div>";
    tds[i].innerHTML = builtTD;
}

</script>

You're done. All you need to do now is republish by going to Utilities > Publish > Regenerate. This will force ShopSite to re-create all your store pages using the newly updated template file.
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.

Uninstallation

Thanks for trying Magic Zoom on your ShopSite 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.

If you are using a custom template, delete the reference for magiczoom.css and magiczoom.js files from the <head> section of your custom template. The code will look like this:
```
 <link href="[-- OUTPUT_DIRECTORY_URL --]/publish/magiczoom.css" rel="stylesheet">
 <script src="[-- OUTPUT_DIRECTORY_URL --]/publish/magiczoom.js"></script>
```
Note: This is the same if you are using a built in ShopSite template.

<script>
var mID = document.getElementsByClassName("prod_img");
var mI = mID[0].innerHTML;


mID[0].innerHTML = '<a href="[-- OUTPUT_DIRECTORY_URL --]/media/[-- IMAGE PRODUCT.MoreInformationGraphic --]" class="MagicZoom" id="Zoomer" title="[-- PRODUCT.Name REMOVE_HTML --]" name="prod_link">' + mI + '</a>';

var smNum = document.getElementsByClassName("small_img");
var tds = smNum[0].getElementsByClassName("small_img");
for (var i=0;i<(smNum.length)-1;i++) {
    var innerds = tds[i].innerHTML;
    var smImg = tds[i].getElementsByTagName("img");
    var imgURL = smImg[0].getAttribute("src");
    var lgURL = imgURL.replace("ss_size3/","");
    var mdURL = imgURL.replace("ss_size3/","ss_size1/");
    var builtTD = "<div class="newdiv"><a href="" + lgURL + "" data-zoom-id="Zoomer;" data-image="" + mdURL + ""><img src="" + imgURL + ""></a></div>";
    tds[i].innerHTML = builtTD;
}

</script>

Delete the magiczoom.css and magiczoom.js files from under Merchandising > Custom Templates > Includes.
You're done. All you need to do now is republish by going to Utilities > Publish > Regenerate. This will force ShopSite to re-create all your store pages using the newly updated template file.
Magic Zoom is now uninstalled.

Thanks for such a great tool.

It’s working great! Thank you so much. I love your product, your patience, and technical support.

Just wanted to thank you for the great support and making the all tools work so well on our website.

David Baker
12daydesigns.com
Alex Derrick
zulurose.com
Paul Lips
toobydoo.com

Magic Zoom for ShopSite

Buy now £29 Download Free Trial

Magic Thumb for ShopSite

Get this gorgeous full screen image lightbox.

Choose from various transition effects
Trigger the enlarge effect on click or mouseover.

Buy now £29 Download Free Trial

Supported versions

All latest versions

92% of users say its the best image lightbox

Downloads

150+

Key features

Responsive

Fast loading

SEO friendly

Lazy loading

Supports video

Friendly support

One-off payment

Regularly updated

jQuery compatible

Swappable thumbnails

Installation

Download Magic Thumb (free and fully functional demo version).
Upload the magicthumb.css and magicthumb.js files under Merchandising > Custom Templates > Includes > Upload A Publish File.
If you are using a custom template, reference the magicthumb.css and magicthumb.js files to the <head> section of your custom template using the code below:
```
 <link href="[-- OUTPUT_DIRECTORY_URL --]/publish/magicthumb.css" rel="stylesheet">
 <script src="[-- OUTPUT_DIRECTORY_URL --]/publish/magicthumb.js"></script>
```
Note: If you are using a built in ShopSite template, you will first need to make a copy of the product template you are using (you can look under Products > Edit Product Layout to see what template you are using). Then copy that template under Merchandising > Custom Templates > Page/Product > Copy A ShopSite Product Template. The easiest thing to do now, if you want this modified template to be applied to ALL your products, is to re-copy your copy, and re-name it the exact same name as the original product template so that your modified product template overrides the original. Then, find the </head> tag in your newly copied product template, and paste the code above just above it.

In that same product template you modified in Step 3, locate the tag, which should be almost at the very end of the template file. Paste the following code just above/before the </body> tag:

<script>
var mID = document.getElementsByClassName("prod_img");
var mI = mID[0].innerHTML;

mID[0].innerHTML = '<a href="[-- OUTPUT_DIRECTORY_URL --]/media/[-- IMAGE PRODUCT.MoreInformationGraphic --]" class="MagicThumb" id="Zoomer" title="[-- PRODUCT.Name REMOVE_HTML --]" name="prod_link">' + mI + '</a>';

var smNum = document.getElementsByClassName("small_img");
var tds = smNum[0].getElementsByClassName("small_img");
for (var i=0;i<(smNum.length)-1;i++) {
    var innerds = tds[i].innerHTML;
    var smImg = tds[i].getElementsByTagName("img");
    var imgURL = smImg[0].getAttribute("src");
    var lgURL = imgURL.replace("ss_size3/","");
    var mdURL = imgURL.replace("ss_size3/","ss_size1/");
    var builtTD = "<div class="newdiv"><a href="" + lgURL + "" rel="thumb-id:Zoomer;" rev="" + mdURL + ""><img src="" + imgURL + ""></a></div>";
    tds[i].innerHTML = builtTD;
}


</script>

You're done. All you need to do now is republish by going to Utilities > Publish > Regenerate. This will force ShopSite to re-create all your store pages using the newly updated template file.
Buy Magic Thumb To upgrade your free and fully functional trial version of Magic Thumb (which removes the "Trial version" text), buy Magic Thumb. Then overwrite the demo magicthumb.js file with the one from your licensed version.

Uninstallation

Thanks for trying Magic Thumb on your ShopSite site! What did you hope Magic Thumb could do? How can we improve it? Let us know, we're always improving our tools based on customer feedback.

If you are using a custom template, delete the reference for magicthumb.css and magicthumb.js files from the <head> section of your custom template. The code will look like this:
```
 <link href="[-- OUTPUT_DIRECTORY_URL --]/publish/magicthumb.css" rel="stylesheet">
 <script src="[-- OUTPUT_DIRECTORY_URL --]/publish/magicthumb.js"></script>
```
Note: This is the same if you are using a built in ShopSite template.

<script>
var mID = document.getElementsByClassName("prod_img");
var mI = mID[0].innerHTML;

mID[0].innerHTML = '<a href="[-- OUTPUT_DIRECTORY_URL --]/media/[-- IMAGE PRODUCT.MoreInformationGraphic --]" class="MagicThumb" id="Zoomer" title="[-- PRODUCT.Name REMOVE_HTML --]" name="prod_link">' + mI + '</a>';

var smNum = document.getElementsByClassName("small_img");
var tds = smNum[0].getElementsByClassName("small_img");
for (var i=0;i<(smNum.length)-1;i++) {
    var innerds = tds[i].innerHTML;
    var smImg = tds[i].getElementsByTagName("img");
    var imgURL = smImg[0].getAttribute("src");
    var lgURL = imgURL.replace("ss_size3/","");
    var mdURL = imgURL.replace("ss_size3/","ss_size1/");
    var builtTD = "<div class="newdiv"><a href="" + lgURL + "" rel="thumb-id:Zoomer;" rev="" + mdURL + ""><img src="" + imgURL + ""></a></div>";
    tds[i].innerHTML = builtTD;
}


</script>

Delete the magicthumb.css and magicthumb.js files from under Merchandising > Custom Templates > Includes.
You're done. All you need to do now is republish by going to Utilities > Publish > Regenerate. This will force ShopSite to re-create all your store pages using the newly updated template file.
Magic Thumb is now uninstalled.

This exactly what I was looking for. I'd also like to comment on the fantastic service and prompt replies I've…

Bingo :) Thanks for all the help. Great module and great service.

This is the best set of zoom tools I have worked with. Thanks, you're doing a great job and your…

Stuart Smith
accessmysite.co.uk
Jason Silva
hisajor.com
Renee Palmer
palmerny.com

Magic Thumb for ShopSite

Buy now £29 Download Free Trial

About

These instructions are for ShopSite. Thanks to Lauren Brewer for writing these instructions. Use them to add effects to your website including image zoom on hover/mouseover; image lightbox (enlarge image to full screen); and image magnifiers.