Extended Banners Documentation

Installation – top

Video example

Uploading

1. Download the add-on
2. Go to Admin panel > Add-ons > Manage Add-ons
3. Click on [+] to open upload modal window
4. Please choose whatever is comfortable to you:
   – Local: zip archive is saved on your computer
   – Server: zip archive is uploaded on your server
   – URL: you have a direct link to the zip archive
5. After you selected the zip archive corresponding to your current version of CS-Cart please click Upload & install

Activation

1. Open add-on settings page Admin panel > Add-ons > Manage Add-ons > [TH] Extended Banners
2. In Activation tab insert License key
3. Save the settings and go back to Manage Add-ons page
4. In same line with the name of the add-on, click Active
5. Clear cache, choose Administration > Storage > Clear cache

Make sure that the add-on status is Active

That’s all, the add-on is installed

Next, create and configure banners and create a block in the layouts
If necessary, the appearance of the carousel can be changed in the add-on settings

You can also see examples of banners in the admin demo

To work with the add-on, you need to know how standard banners work, this is described in the official documentation

Banners type – top

Starting from v1.06 banners are located Marketing > Extended Banners
The add-on adds the following types of banners:

• Text and Graphics
• Text and Background
• Text and Background (Image aspect ratio)
• Text and Video Background
• Text and Video Background (Video aspect ratio)

You can set your own CSS class for all banners and style them using it

Text and Graphics

This type of banner is best for product presentation.

Banner consists of 4 key elements:

• The main image
• Background image (it’s not necessary to download, then the banner will have a transparent background)
• Sections with text (heading, subtitle and text). No fields required
• Buttons (appears when the Button Text and URL fields are filled in)

For a desktop, you can change the display order of the main image and text section.
The text background is displayed for the mobile view only.

For the demo, we used the following image sizes:

• 564x564px – main image
• 1200x564px – background image

You can use other sizes for your banners.

Text and Background

This banner type is best suited for marketing purposes: presenting the company’s strengths, showing categories, promotions and additional information.

The banner consists of 3 key elements:

• Background Image
• Sections with text (title, subtitle). No fields required
• Buttons (appears when the Button Text and URL fields are filled in)

You can change the position of the text by changing the alignment.
Background for text applies to all resolutions.

For the demo, we used the following sizes:

• 1200x564px – background image
• 576px – minimum banner height for desktop
• 450px – minimum banner height for the tablet
• 185px – height of the section with the image for the phone

You can use other sizes for your banners, the image for the background are scaled to the sizes you specify.

Text and Background (Image aspect ratio)

This banner type is best suited for marketing purposes: presenting the company’s strengths, showing categories, promotions and additional information.

The banner consists of 3 key elements:

• Background Image
• Sections with text (title, subtitle). No fields required
• Buttons (appears when the Button Text and URL fields are filled in)

You can change the position of the text by changing the alignment.
Background for text applies to all resolutions.

For the demo, we used the following sizes:

• 1200x564px – background image

You can use other sizes for your banners, the background image sets the banner size.

Text and Video Background

This banner type is best suited for marketing purposes: presenting the company’s strengths, showing categories, promotions and additional information.

The banner consists of 4 key elements:

•  Video (mp4 format)
• Background image (required, displayed for mobile devices, you can use animated gifs)
• Sections with text (title, subtitle). No fields required
• Buttons (appears when the Button Text and URL fields are filled in)

You can change the position of the text by changing the alignment.
Background for text applies to all resolutions.

For the demo, we used the following sizes:

• 1200x564px – background image and video
• 576px – minimum banner height for desktop
• 450px – minimum banner height for the tablet
• 185px – height of the section with the image for the phone

You can use other sizes for your banners, the video and image for the background are scaled to the sizes you specify

Text and Video Background (Video aspect ratio)

This banner type is best suited for marketing purposes: presenting the company’s strengths, showing categories, promotions and additional information.

The banner consists of 4 key elements:

• Video (mp4 format)
• Background image (required, displayed for mobile devices, you can use animated gifs)
• Sections with text (title, subtitle). No fields required
• Buttons (appears when the Button Text and URL fields are filled in)

You can change the position of the text by changing the alignment.
Background for text applies to all resolutions.

For the demo, we used the following sizes:

• 1200x564px – background image and video

You can use other sizes for your banners, the video and image for the background set the banner size

Block settings – top

In order for the new banners to be displayed, in the block you need to select the Extended Carousel template. Or create a new block with such a template.

In the block settings, you can select the specified positions of the control elements and hide them on mobile devices.
You can also specify the display time of one banner.

Add-on settings – top

In the add-on settings you can change the text size for different screen resolutions. This is done in the appropriate tabs.

You can also customize the carousel controls.
It is possible to adjust the colors and sizes of arrows and dots. You can change the arrows to your own, for this, replace the SVG code with your own or icon font.
In SVG code, there should be a space after the { characters.
If you need to remove the background for the arrows, then specify none in the color field.

Change styles

Style files add-on should not be changed, this can lead to incorrect work of the add-on. If there was a need to redefine or add styles, please use Theme editor for this

1. Go to Design > Themes
2. Press Visual Editor in front of the currently active layout
3. In the new tab, you will see your shop with Theme editor panel
4. In CUSTOMIZE selector choose Custom CSS
5. In textarea you can add your styles
6. After editing save your changes by pressing Save and press [X] to close editor

FAQ – вверх

How to make the height of the banner 100% of the screen?

Select Type: Text and Background or Text and Video Background

Set the minimum and other heights: 100vh, you can also try to set the values via calc, like this:

~"calc(100vh - 145px)"

More information about the unit of measurevh and others can be read here

Add-on Update – top

Updates via the Update Center

Changelog

2.01 (05 Jul 2024)
Added an additional (second) button
Improved the banner settings page
Styles have been fixed

2.00 (21 Jan 2024)
Added video file uploader (only .mp4) 
Updated video output logic (cover image not required) 
Added HTML support for description field
Improved license system

1.07 (03 Dec 2023)
Fixes recommended for 4.16.2 and higher (improved banner loading) 
Improved license system 
Changed template

1.06 (23 Aug 2021)
We moved the module banners to a separate section for better compatibility with products from other companies
New location: Marketing > Extended Banners

1.05 (12 Jun 2021)
On mobile devices, the video background is played immediately
Integrated the update system through the Upgrade center

1.04 (09 Dec 2020)
Updated the add-on for compatibility with CS-Cart 4.12.1
You need to reinstall the add-on for CS-Cart Multivendor Ultimate

1.03 (11 Jun 2020)
Added vertical text alignment and setting margins.
Settings are applied for the following types:
- Text and Background (Image aspect ratio)
- Text and Video Background (Video aspect ratio)
- Text and Background
- Text and Video Background

1.02 (12 May 2020)
Added two new views:
- Text and Background (Image aspect ratio)
- Text and Video Background (Video aspect ratio)
Added a field for a custom CSS class for the banner

1.01 (07 May 2020)
Increased padding for text
Changed styles
Fixed compatibility with ThinTheme

1.00 (04 May 2020)
Release