Have you ever seen a successful online store with poor UI?

Change the direction, speed, effect, spacing, design and more.

  • Convey all benefits of your product to your customers.
  • Works on iPad, iPhone, Android devices.

Features | Download CS-Cart 4 add-on | Download CS-Cart 3 add-on | Download CS-Cart 2 add-on

    Use it anywhere!

    • Product details page
    • Banners block
    • Newest block
    • Recent products block
    • Most popular block
    • Bestsellers block
    • On sale block
    • Rating block
    • Manually block
    • 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
  • CS-Cart 4.x (right up to the current version)
  • CS-Cart 3.x
  • CS-Cart 2.x

How do you show a wide product range on your CS-Cart store without using all your page space?

Create eye-catching image carousels, to neatly display an unlimited number of products. Our beautiful Magic Scroll image carousel addon for CS-Cart will help your customers navigate your products quickly and easily. It's a hugely versatile tool for all kinds of places on your website, to encourage shoppers to look at other images and other products.

With 4 ways of scrolling, it looks professional and feels super-smooth to use. It's responsive, to perfectly fit the screen and the 30 customisation options let anyone create expert image sliders in any style you need. Tweak the image carousel style, the scroll effect, direction, speed and pagination to fit your CS-Cart theme.

A popular option is the 'Cover-flow' effect (made famous by Apple and adored by thousands of its fans). Or choose a 3D carousel, animated slider or the classic scroll effect.

You will love our magnificent CS-Cart image scroll extension. But don't take our word for it - Install free version in 5 minutes and try it yourself.

Live demos

Installation

CS-Cart 4 installation

  1. Download the Magic Scroll module for CS-Cart 4 (free and fully functional demo version).
  2. Unzip the file on your computer and FTP the app, design and js folders to your CS-Cart directory, keeping the file structure intact.
  3. Make sure that the app/addons/magicscroll/resources folder in your CS-Cart directory is writeable.
  4. CS-Cart 4 manage addons section Go to Admin panel > Add-ons > Manage Add-ons.
  5. CS-Cart 4 addon installation Install add-on.
  6. The demo version is now installed!
  7. All settings for Magic Scroll on your CS Cart store Customize Magic Scroll as you wish.

    Go to: Admin panel > Add-ons > Manage Add-ons > Magic Scroll > Click 'Settings' icon > Select 'Manage'.
  8. CS-Cart 4 pages and sections supported by Magic Scroll Magic Scroll can be enabled on any page or section you choose.
  9. 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:

    app/addons/magicscroll/resources/magicscroll.js

CS-Cart 2 & 3 installation

  1. Download the Magic Scroll module for CS-Cart 3 (free and fully functional demo version).
  2. Unzip the file on your computer and FTP the magicscroll folder to the addons directory of your CS-Cart and upload the var folder to the root of your website, keeping the file and folder structure intact.
  3. Addons manage section in CS-Cart 3 Go to [Admin panel > Administration > Add-ons]
  4. Install add-on.
  5. The demo version is now installed!
  6. 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:

    addons/magicscroll/core/magicscroll.js

Multiple images

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

  1. Install and buy Magic Zoom Plus for CS Cart.
  2. Activate Magic Scroll option on the Magic Zoom Plus settings page in CS-Cart.
  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 /addons/magiczoomplus/resources/magicscroll.js on your server.
  5. Clear browser cache. The 'Trial version' message will disappear.

Scroll in supported blocks

These blocks are supported by the Magic Scroll add-on:

  • Product page
  • Newest
  • Recently viewed
  • Popularity
  • Bestsellers
  • Rating

Add content to the block of your choice, then go to the Magic Scroll options and choose "Use effect for...<block-name>".

Carousels elsewhere

You can also place image carousels (scrolls) on other parts of your page.

  1. Go to [Content -> Banners] in the CS-Cart admin panel and upload images that will be used for the carousel.
  2. Once images are added, go to [Design -> Blocks] and add a new block on the page. You should set Block content to Banners and Use MagicScroll to Yes.
  3. Specify which banner should be shown in the carousel viat the 'Items in block' link.
  4. Customize the carousel for banners block here: [Administration -> Add-ons -> Magic Scroll -> Banners block].

Uninstallation

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

CS-Cart 4 uninstallation

  1. Go to Admin panel > Add-ons > Manage Add-ons.
  2. Go to Magic Scroll > Click 'Settings' icon > Select 'Uninstall' > Click 'OK'.
  3. Magic Scroll is now uninstalled.

CS-Cart 2 & 3 uninstallation

  1. Go to Admin panel > Add-ons > Manage Add-ons.
  2. Go to Magic Scroll > Click 'Settings' icon > Select 'Uninstall' > Click 'OK'.
  3. Delete the magicscroll folder from the addons directory on your CS-Cart 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>;
    }
    

Customer reviews

  Rating: 0 (0 reviews)

There are no reviews yet. Be the first!

Submit your review


Thank you!
Your review has been received and will be posted soon.
Used only to verify your review is genuine.

Other CS-Cart add-ons

This JavaScript carousel add-on was created for CS-Cart. Use the script to easily slide multiple images or text anywhere on your page including 'bestsellers', 'recently viewed', 'newest' and other products blocks.

Install the CS-Cart module with the instructions above and contact us if you need any help.