How To Create An Opencart 2 Homepage Slideshow

First you need to create banner images. In my example I have created them to the size of  1170px wide by 437px height (you can adjust the height as you wish, but the width needs to be a minimum of 1170)

If you have a full screen slider, make your image sizes to a minimum of 1700 pixels wide!

Create several images to the size above and save on your hard drive

  • In your admin, go to system > Design > banners
  • Click “+” (plus box) at the top right of the page
  1. Name the banner something like “homepage banners”.
  2. Now click the “+” (plus box) to add a new banner
  3. Add the title (this will be visible) Make it something simple and snappy. No more than a few word or less.
  4. Click on the image box, click on the pencil box, click the upload icon at the top and select one of your banners you have created which are located on your hard drive
  5. Add the link you want the page to link to. You might want to come back to this if you don’t have products yet. The width of this box is small. It’s an Opencart error.
  6. Once uploaded into the system, select the banner which will be visible in the display.
  7. Repeat for each banner that you have
  • When you’re done adding banners, click the save icon at the top right of the page.

Now go to extensions > Modules – next to slideshow click the pencil to edit

  1. Click on add module “+” (plus icon).
  2. Add the name of the module (something like “homepage slider”
  3. Now select from the banner group you have just created (homepage banners)
  4. Now add the height and width which need to mirror the size of your images.
    Our example size: 1170px wide by 437px height
  5. Set the status to enabled.

Now we need to make sure the slider is in your homepage layout

Go to System > Design > Layouts – click pencil icon next to the “Home” layout.

If this is a new install, you already have a slideshow from the demo in this area. Switch it to the slide show you have just created “homepage slider”

Make sure you attach the slideshow to content top

While you’re in here, make sure the featured1 is set to content bottom. This is very important.

Click save (disc icon) at the top right of the page.