Magic Slideshow™ for Magento

Scroll through your images. Slide your images or fade your images. Follow the instructions below for your Magento website. Change the speed, effect, colours, sizes. More than 30 options! [a href="/magicslideshow/examples/"]Click here for lots more examples[/a]. This text has no heading above it. Contact us if you would like help installing it.

Install now

  1. Download Magic Slideshow™ and unzip it, keeping the folders intact.
  2. Upload the 'magicslideshow' folder to the 'js' folder of your Magento store (on your server).
  3. Open the file 'app/design/frontend/[your_interface]/[your_theme]/template/page/html/head.phtml' in the HTML editor you normally use, add the following code at the end of file and save your changes:
    <link rel="stylesheet" type="text/css" href="<?php echo $this->getJsUrl(); ?>magicslideshow/magicslideshow.css"/>
    <script src="<?php echo $this->getJsUrl(); ?>magicslideshow/magicslideshow.js" type="text/javascript"></script>
    Upload that edited head.phtml file to your server.
  4. Go to your admin panel > CMS > Pages. Add a new page or select an existing page, e.g 'Home page'.
  5. On the 'Content' tab click on the 'Show/Hide Editor' button to disable the editor.
  6. Insert Magic Slideshow™ anywhere in the code. It requires a div with a class of MagicSlideshow and all your sliding images inside. For example:
    <div class="MagicSlideshow">
    <img src="example1.jpg"/>
    <img src="example2.jpg"/>
    <img src="example3.jpg"/>
    <img src="example4.jpg"/>
    </div>
  7. Click 'Save Page'.
  8. Click 'Preview' to see your slideshow in action!
  9. Visit the detailed instructions for changing the options of your slideshow - thumbnails, headings, text, arrows etc.

To remove the "please upgrade" text, buy Magic Slideshow™ and overwrite the /magicslideshow/magicslideshow.js file with the one from your license.

You have now added this JavaScript slideshow to your Magento home page or other page. We provide free support for all our software, if you would like help, please contact us.

Note that this is NOT a Magento module. We provide Magento modules for our other image effects, but Magic Slideshow™ is added to your pages manually, depending on where you want it.

You can set your slideshow to fade from one image to the next and change the fading time and fading slideshow duration. For all options, please refer to the Magic Slideshow™ integration options.

Other Magento