Magic Scroll™ for Magento

The perfect way to show new products, related products, bestsellers, special offers, news headlines and fully customizable. 8 gorgeous examples.

Mixer - Alianto Mixer - Cellini Mixer - Andorra Created for Magento Mixer - Caluna Mixer - Bolero Mixer - Milano Mixer - Vesuvia Mixer - Castora Mixer - Pelant Download the module Mixer - Giglier Mixer - Montagne

Install it now

  1. Download the Magento add-on for Magic Scroll™.
  2. Unzip the contents, and upload the magicscroll folder to your Magento directory.
  3. If you use Magento Compiler, disable it. After installation is complete, go to Magento Compiler and run the compilation process.
  4. Go to http://www.yoursite.url/magicscroll/ in your browser and follow the instructions.
  5. Go to System > Cache Management and refresh the cache (screenshot).
  6. Configure the Magic Scroll™ module through the 'Magic Toolbox -> Magic Scroll settings' menu in the Magento admin panel.
  7. You've now installed the demo version of Magic Scroll™!
  8. To upgrade, buy Magic Scroll™ and overwrite the magicscroll.js file with the same file from the full version.

Home page sliders & other pages

To create a scroll on your home page:

  1. Go to your admin panel > Magic Toolbox > Magic Scroll.
  2. In the tab for Homepage or custom block, identify the images you wish to scroll and click 'Upload files'.
  3. Save all changes.
  4. The scroll block should now display on your home page, before the main content area.

You can use a custom scroll block to create sliders on another page instead of your homepage.

To create a custom scroll block, open this file:

app/design/frontend/[your_interface]/[your_theme]/layout/magicscroll.xml

and alter this block:

<reference name="content">...</reference>

in this section of the file:

<cms_page>...</cms_page>

Scroll on CMS pages

  1. On the extension settings page (General tab) set the 'Include headers on all pages' parameter to 'Yes'.
  2. Go to your admin panel > CMS > Pages. Add a new page or select an existing page, e.g 'Home page'.
  3. On the 'Content' tab click on the 'Show/Hide Editor' button to disable the editor.
  4. Insert Magic Scroll™ anywhere in the code. It requires a div with a class of MagicScroll and all your sliding images inside. For example:
    <div class="MagicScroll">
    <a href="page1.html"><img src="example1.jpg"/></a>
    <a href="page2.html"><img src="example2.jpg"/></a>
    <a href="page3.html"><img src="example3.jpg"/></a>
    <a href="page4.html"><img src="example4.jpg"/></a>
    </div>
  5. Click 'Save Page'.
  6. Click 'Preview' to see your scroll in action!
  7. Visit the detailed instructions for changing the options of your scroll.

This JavaScript carousel extension has been created for use on Magento. The script lets you choose how many images to show, the speed, the duration of the carousel, direction (top, right, bottom, left) and links to other pages. It uses CSS to control borders, colors, padding, margin and the arrows.

Perfect for showing related products, recently viewed items, new products, "people who bought this also bought". Also ideal for scrolling lots of alternative images of a product - it saves space, looks neat and tidy, feels great to use.

The Magento module is built with JavaScript and CSS. Contact us if you need any help with it.

Other Magento modules