How to create a homepage slideshow
Creating a homepage slideshow on your Magento store lets you highlight particular products or pages you want to promote.
Slideshows work by displaying one image after another, often with accompanying text and headings.
Magic Slideshow can slide any content - images, text, HTML content, videos and SWF files.
It can fade or slide images with or without headings and text. Each image can hyperlink to other pages on your site. Thumbnails, arrows and slide numbers can be shown. Speed, effect and styles can be adjusted. See 8 examples.
1. Go to Magic Slideshow for Magento.
2. Download Magic Slideshow free trial and unzip it, keeping the folders intact.
3. Copy the ‘magicslideshow’ folder to the ‘js’ folder of your Magento store (on your server).
4. Still on your server > Open the file ‘app/design/frontend/[your_interface]/[your_theme]/template/page/html/head.phtml’ in an editor (eg: Dreamweaver) and add following code at the end of file and save your changes:
5. Overwrite the old head.phtml file with your revised head.phtml file.
6. Go to your admin panel > CMS > Pages. Add a new page or select an existing page, eg: ‘Home page’.
7. On the ‘Content’ tab click on the ‘Show/Hide Editor’ button to disable the editor.
8. 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>
9. Click ‘Save Page’.
10. Click ‘Preview’ to see your slideshow in action.
- The slide images may appear as broken image icons in the Content > Show Editor view. This is fine, they will appear on your Preview page.
- If the slideshow does not appear on your page in Preview, make sure the URL is correct. Eg: www.[YOUR MAGENTO WEBSITE URL]/[‘URL KEY’ OF YOUR PAGE]
After creating your slideshow, choose from the 30+ options to adjust the slideshow how you wish. The detailed instructions provide HTML code examples for changing the settings.