For any online business model, banner is one of the most popular and also the best practice of Marketing. Banners can be displayed in many forms: a static image, a carousel, or a slideshow. Each banner normally includes one or more images and these images are assigned to different modules depending on the size and the function they work.
In this tutorial, we will provide the instruction to create banner in Opencart and scale the effective of the banner.
Create banner in Opencart.
1. Uploading Images for Banners
From your Opencart site back-end, go to System > Design > Banners. The panel includes all created banners, hit the “Add new” button to insert a new banner.
Opencart management panel: System > Design > Banners
In the form, add banner name, and set status. Next, add new banner, each banner include title, link and image. If your site is multilingual, you have to create banner for each language. The supported image types: JPG, PND and GIF.
We can assign as many banner images as we want, but all the images should have the same size or at least the ratio, since these pictures will be switching or sliding inside a banner-holding module.
Uploading images for banners in OpenCart
2. Assign banners to modules
Banners are displayed in your Opencart front-end through Module, in other words, we assign banners to Opencart modules. There are three most used modules for showing banners:
All the modules perform the same functionality, it displays the created banner image in same size and let user to interact with the images by click.
2.1 Create Banner Module
Banner module shows banners by fading banner images. To create the module, please go to Extensions > Modules > Banner > Edit. Add new module and assign the banner we created in step 1. You can configure the size of the banner (width and height) in pixel, save the setting and we’re done.
The size of the module should fit the position that it’s assigned to displayed in in your layout. The banner images are auto resized according to the predefined dimension.
Assign banner to a banner module
2.2 Create Slideshow Modules
The module displays banner images in slideshow. This module is generally displayed on the home page with bigger landscape pictures.
To create the module, go to Extensions > Modules > Slideshow > Edit, enable the module then add new module, assign created banner then configure the dimension for the banner to display in your Opencart front-end.
Create new slideshow module to display banners
The dimension setting should fit the position where you publish the module in.
2.3 Create Carousel Module
The carousel module displays a set of banner images in carousel. To create the module, go to: Extension > Module > Carousel > Edit, enable the module and add new banner for the module. Assign banner, set number of images to display, the scroll value and configure the image size displayed in the carousel.
Create new Carousel module to assign banners to
Display the banners in your Opencart front-end
In Opencart 2.0, the layout system and module assignment has been changed a little bit. In the module setting, there is no layout and position configuration anymore, all the layouts are managed in the System > Design > Layout, in the layout setting panel, you can assign the modules to publish in the layout.
Assign modules to layout
How to scale the effective of the banner?
1. Track Banner Clicks
Banner is a core feature in Opencart core and it’s an advantage of Opencart in the comparison with other ecommerce platforms. However there is still limitation such as the report of how banner is performed (the most important statistics is click numbers). The limitation can be solved by Google Analytics.
Clicking on a banner which redirects to a page on the same site is an event in Google Analytics term. This is why we use the event tracking feature of Google Analytics to measure on-site banner clicks in OpenCart. Here’s a sample HTML for implementing event tracking:
The results of clicks can be seen if go to Google Analytics and go to the Behavior Section > Events overview. There we’ll see the category (in our case the type of banner), the number of clicks and the name of the banner.
Be careful when using banners:
Some notes about Banner in general and in Opencart that you should know about before creating banners for your shop.
We cannot set expire date, so site owner have to manage this manually, once it’s expired, you have to disable it.
Banner image size should be small to make sure it’s performed well
Only accept the following content types in banner: JPG, PNG or GIF.
Do not overuse banners
In conclusion, we have to upload the banner images, assign them to a module, such as banner, slideshow or carousel. Later we changed the module template files to track click events with Google Analytics.
We hope it’s helpful for you, If you have questions, please ask them in the discussion area below.