Extended Banners Documentation
Installation – top
Uploading
- Download the add-on
- Go to Admin panel > Add-ons > Manage Add-ons
- Click on [+] to open upload modal window
- 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 - After you selected the zip archive corresponding to your current version of CS-Cart please click Upload & install
Activation
- Open add-on settings page Admin panel > Add-ons > Manage Add-ons > [TH] Extended Banners
- In Activation tab insert License key
- Save the settings and go back to Manage Add-ons page
- In same line with the name of the add-on, click Active
- 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
- Go to Design > Themes
- Press Visual Editor in front of the currently active layout
- In the new tab, you will see your shop with Theme editor panel
- In CUSTOMIZE selector choose Custom CSS
- In textarea you can add your styles
- 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.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