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.
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
- 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
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