Extended Banners Documentation

Installation – top

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.

Banner consists of 4 key elements:

• Links to the video ( mp4 format is required , the rest are auxiliary)
• 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)

Important: The background image is mandatory

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

Instructions for adding video to CS-Cart

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.

Banner consists of 4 key elements:

• Links to the video ( mp4 format is required, the rest are auxiliary)
• 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)

Important: The background image is mandatory

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

Add-on Update – top

• make a full backup of the store
• close the store
• install the add-on over the old version without removing the previous one
• clear the cache
• if necessary, make changes that can be erased during the upgrade if you changed the add-on files directly
• check that everything is successfully updated
• open the store

To update language variables and add-on settings:

• Go to developer mode
• For this file local_conf.php add define(‘DEVELOPMENT’, true);
  If you do not have a file, create one.
• Clear the cache
• On the add-ons page in the drop-down list next to the add-on select “Update”
• Return to normal store mode

Changelog

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