OpenCart – Setting Up the Slideshow

At times, if not most of the time the default Slideshow that comes with Opencart will not work for your custom store. Really, it’s just there for an example. A hot topic on the Opencart forums in the past and still today is just how to set up your own slides within your own custom size settings. This article will go over the basic principles of the slideshow module to give you a better understanding.

First, when you download the Opencart and install it for the first time and go to the home page you will see the following slideshow:


This slide(s) that come with Opencart are of the following dimension: 980 W x 280 H. The width of the slideshow matches the width of the main wrapper in the CSS.

Customizing your slideshow

If you choose to keep the current size but need to create more than it is up to you to edit your imagery in a photo editing program such as Adobe Photoshop or Adobe Fireworks. When doing this it is important to remember that you MUST crop to the exact dimensions that are specified in the settings. The main slideshow settings can be found in EXTENSIONS > MODULES > SLIDESHOW. You will see the following:


Here you may specify the size and the layout position. Typically the slideshow is on page TOP or BOTTOM but it is up to you. Just remember, there are size rules. You can’t create a slide that is 500 X 500 and stick it in a 908 X 280 configuration and expect it to appear decent looking.

It is also important to note that the slideshow has its own CSS file found in catalog/view/theme/default/stylesheet/slideshow.css for those that want to add special rules to its position/layout. As far as the other slideshow settings such as delay between slides and affects you can purchase or download for free certain extensions that will allow you to tweak these settings. If you cannot afford that then look in the forums for support threads on people that have dealt with this issue before.

Creating Multiple Slideshows

The beautiful thing about Opencart is its use of multiple slideshows. You can easily just keep creating as many slideshow’s as you want by clicking on ADD MODULE


Once you have all of your slideshows you must then add your slides.

Adding Slides to the slider

Go to SYSTEM > DESIGN > BANNERS (insert)

Insert your new banner and add slides to it. You will see a list of all slideshows you have set up in the prior steps to choose from. Basically in order to complete this it’s a two-step process

1) Set up your slideshow settings in EXTENSIONS > MODULES > SLIDESHOW

2) Add slides to your slider in SYSTEM > DESIGN > BANNERS

Looking for quality OpenCart Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , | Posted under OpenCart | RSS 2.0

Author Spotlight

Joe Stenhouse

I am a web application developer that specializes in PHP, JAVASCRIPT, MYSQL, HTML, and CSS. We manifest exciting potentials within the world wide web through means of innovation.

Leave a Reply

Your email address will not be published. Required fields are marked *