X-Cart Carousel Image Scroller Addon

Supported pages & blocks

Product details page
Bestsellers block (xcart 4.x)
Recently Viewed block (xcart 4.x)
Home page
Manual install elsewhere

Features you'll love...

Responsive
Fast
Built with SEO in mind
Image caching
Easy to customise
Auto image resizing
Scrollable thumbnails
Supports all templates
Watermarked images
On-demand loading
Regularly updated
jQuery compatible
One-off payment

X-Cart 4.0 - 4.7.x
X-Cart 5 (Mobile, Business, Premium)

Rating: 5.0 (1 reviews)

Show all your products in a convenient and concise way with Magic Scroll!

Thanks to a choice of 4 options of scrolling and over 30 customizations, your image sliders will look professional anywhere on your store. This X-Cart slider fits perfectly thanks to the Magic Scroll Settings page.

Simply choose an option and click: adjust scroll effects, direction, speed & more. A popular option is the 'Cover-flow' effect (made famous by Apple and adored by thousands of its fans).

Try before you buy! There are no limitations because the free trial uses exactly the same functionality as a full license. You've got nothing to lose and everything to gain. Install your X-Cart product slider today!

Verified by X-Cart:
Read reviews of Magic Scroll on the official marketplace for X-Cart 5 addons.

X-Cart 4.x installation

Download Magic Scroll for X-Cart 4.x (free and fully functional demo version).
Unzip the file on your computer and FTP the magicscroll folder to your X-Cart directory (on your server), keeping the file and folder structure intact.
Go to http://www.yoursite.url/magicscroll/ in your browser > click 'Install' (replace yoursite.url with your domain name).
Go to http://your.site.url/admin/magicscroll.php and configure Magic Scroll as you wish.
That's all
Buy Magic Scroll To upgrade your free and fully functional trial version of Magic Scroll (which removes the "Trial version" text), buy Magic Scroll and overwrite following file with the same one from your licensed version:
```
modules/MagicToolbox/magicscroll/magicscroll.js
```

X-Cart 5 installation

Automatic installation

Buy Magic Scroll directly from X-Cart 5 Marketplace!

Go to Magic Scroll on the X-Cart market to buy this X-Cart 5 addon.
Click 'Add to cart' > Follow payment process.
Go to: the Admin area of your store > Extensions > Marketplace.
Enter 'Magic Scroll' in the search field.
Tick checkbox 'Install' next to Magic Scroll module name.
Click 'Install modules' button
Magic Scroll is now installed.
To customize Magic Scroll, go to: Extensions > Installed modules > Magic Scroll module > Click 'Settings'. Configure how you would like Magic Scroll to look on your website.

Manual integration

Alternatively, you can follow these instructions to install Magic Scroll manually on your X-Cart 5 website.

If a previous version of the module is installed, uninstall it.
Download Magic Scroll for X-Cart 5 (free and fully functional demo version).
Unzip the contents of the ZIP file and upload the classes and skin folders to your X-Cart 5 directory.
Login to your X-Cart 5 admin area and re-build the cache: System settings -> Re-build cache link in the menu.
Enable the Magic Scroll module on the 'Installed Modules' page and press 'Save changes' button via Extensions > Installed modules.
Go to the Magic Scroll module settings page via Extensions > Installed modules > Magic Scroll settings and configure Magic Scroll how you want it.
Magic Scroll is ready to use!
Buy Magic Scroll To upgrade your free and fully functional trial version of Magic Scroll (which removes the "Trial version" text), buy Magic Scroll and overwrite following file with the same one from your licensed version:
```
skins/customer/modules/MagicToolbox/MagicScroll/js/magicscroll.js
```

Multiple images

Swapping between the main product image and thumbnail images is a standard feature of our X-Cart image zoom tools (Magic Zoom Plus, Magic Zoom & Magic Thumb). But what happens when you have lots of images for the same product? An easy way to keep thumbnail images contained is to use Magic Scroll.

Magic Scroll allows customers to scroll through each product image using arrows. It's the perfect way to keep any product page layout looking slick.

The example below shows Magic Zoom Plus combined with Magic Scroll:

To achieve this look, simply:

Install and buy Magic Zoom Plus for X-Cart.
Activate Magic Scroll option on the Magic Zoom Plus settings page in X-Cart.
To remove the Magic Scroll trial version message, buy discounted license from Magic Zoom Plus order page:
a) Log in to your Magic Toolbox Account.
b) Click 'Download/View' button next to your Magic Zoom Plus order.
c) Click orange button: Purchase Magic Scroll 35% discount (pay £18.85 instead of £29).
d) Follow payment process.
Download magicscroll.js file from your license and upload to /[current skin directory]/magictoolbox/core/magicscroll.js on your server.
Clear browser cache. The 'Trial version' message will disappear.

Uninstallation

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

X-Cart 4.x
X-Cart 5

Go to http://www.yoursite.url/magicscroll/ in your browser > click 'Uninstall' (replace yoursite.url with your domain name).
Delete the magicscroll folder from the root of your X-Cart directory (on your server).
Magic Scroll is now uninstalled.

Login to your X-Cart 5 admin area.
Go to: Extensions > Installed modules > Find Magic Scroll > Click 'basket' icon to uninstall Magic Scroll.
Magic Scroll is now uninstalled.

FAQ

Can I change background colour of carousel?
Yes! By default, the Carousel & Cover-Flow modes use a grey/black background colour. You can change the Hex Colour to anything you want. With over 16,000 hex colours available, you'll be spoilt for choice. Simply add the CSS code you need to the Magic Scroll CSS file.
Carousel background
```
.MagicScroll[data-mode="carousel"] {
    background-color: <your-colour>;
}
```
Cover-flow background
```
.MagicScroll[data-mode="cover-flow"] {
    background-color: <your-colour>;
}
```