All You Need to Know About the OpenCart 2.x Slider

If there is one place for beautiful images and visuals in OpenCart, it’s the Slideshow. This is where you can place marketing materials such as promotions, product announcements, discounts, as well as Call-to-Action buttons that invite users to a product page.

We will do a quick tutorial on how to manage the slider in your OpenCart shop from the admin panel. You will learn how to add new banners and assign them to your website.

#1 Step: Delete All Existing Banners and Create a New One

To begin, you have to delete the demo banners that come with the default OpenCart installation. Do that by going to Design > Banners, selecting all of the banners and clicking the trash icon.

After the demo banners are deleted, click on the blue plus icon to add a new banner. This is how the banner creation field looks like:

Banner Name - choose a name for your new banner. Something that will represent the content of the banner. In our example, we have used Workstation.

Status - enable or disable the banner to your preference.

Add Banner - this button will open the field where you can add an image for your banner, assign it its own title, give it a link to where you want it to lead and give it a sort order number.

When you are done, click Save.

Now, it’s time to add the banner to the Slideshow module so that it appears on the front end of your OpenCart website.

#2 Step: Add the Banner to the Slideshow Module

Go to Extensions > Modules and find the Slideshow module in the list.

Click Edit to begin.

This is where you will edit the Slideshow module.

Module Name - give your module a name that will suit its purpose. In our case, we chose to stick with Workstation. This name will appear in your Module list in Extensions.

Banner - this is the dropdown menu that will let you select which banner you want to select for the module.

Width & Height - configure the exact dimensions of your slider using these fields. This will probably need a little experimenting and going back-and-forth between the front and back end of your store. For reference, the default dimensions of the OpenCart slider are 1140x300.

Status - enable or disable the slideshow module.

When you are done, click Save.

#3 Step: Assign the Slideshow Module to a Layout

Now it’s time to assign your module to the layout you want to show the slider. In most cases, this is the Home page. Go to Design > Layouts.

Find the Home layout and open it. You will see that one of the modules is named Slideshow.

Click on the dropdown menu and choose the module you just created.

Assign it to the position you want and give it a sort order number.

When you are done, click Save.

Believe it or not, it’s just that easy. Want to see the results? View the front end of your store.

Desktop Example 1

Mobile Example 1

Desktop Example 2

Mobile Example 2



The slider in your OpenCart shop gives you a lot of opportunity to experiment with different designs, graphics, call-to-actions, and all kinds of marketing campaigns. Our suggestion is to check out various designs in Pinterest to get inspired and start thinking of how you want your site to look.

Join 11,000+ subscribers receiving actionable E-commerce advice

* Unsubscribe any time
comments powered by Disqus