Magic Scroll for CubeCart

Installation

1. Download the module for Magic Scroll CubeCart 5/6 or CubeCart 3/4 (free and fully functional demo version).
2. Unzip the file on your computer and FTP the magicscroll folder to the root of your CubeCart website (on your server), keeping the file and folder structure intact.
3. Go to http://www.yoursite.url/magicscroll/ in your browser and click 'Install' (replace yoursite.url with your domain name).
4. Go to Admin panel > Modules > Plugins > Magic Scroll > Edit.
5. Remain on Magic Scroll settings page and enable module.
6. The demo version is now installed!
7. Customize the Magic Scroll plugin through Modules > Plugins > Magic Scroll > Edit menu in your CubeCart admin panel.
8. 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:

   CubeCart 5/6:

   modules/plugins/MagicScroll/core/magicscroll.js

   
   

   CubeCart 3/4:

   modules/magictoolbox/MagicScroll/core/magicscroll.js

Multiple images

Swapping between the main product image and thumbnail images is a standard feature of our CubeCart 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:

1. Install and buy Magic Zoom Plus for CubeCart.
2. Activate Magic Scroll option on the Magic Zoom Plus settings page in CubeCart.
3. 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.
4. Download magicscroll.js file from your license and upload to /modules/magictoolbox/core/magicscroll.js on your server.
5. Clear browser cache. The 'Trial version' message will disappear.

Uninstallation

Thanks for trying Magic Scroll on your CubeCart 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.

1. Go to: Admin panel > Modules > Plugins > Magic Scroll > Edit > 'Magic Scroll status' option > Select 'Disabled' to disable module.
2. Go to http://www.yoursite.url/magicscroll/ in your browser and click 'Uninstall' (replace yoursite.url with your domain name).
3. Delete the magicscroll folder from the root of your CubeCart website (on your server).
4. Magic Scroll is now uninstalled.

FAQ

1. 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>;
   }
   

Other CubeCart plugins

Try our other great image effects!

Magic Zoom

Magic Zoom Plus

Magic Thumb

Magic Slideshow

Magic 360

Alternatively, you can install this CubeCart carousel software manually instead of using the module. Follow the instructions in the readme_manual.txt within the module zip file that you downloaded in step 1.

This CubeCart carousel uses JavaScript to scroll images and text. You can choose the number of images, the speed, direction, arrows, size, colors and lots more. No JavaScript knowledge is required, just select your settings in the INI file. The options are explained in this integration guide. Because the carousel script uses JavaScript and CSS only, it will work on mobile devices including iPhone and iPad as well as all browsers.

Contact us if you need any help.