page last edited on 07 March 2019
The addon Banners System provides a tool that enables you to add banners to your store pages. It is possible to use both images and HTML code based banners. Banners can help you to promote products, events or offers using a wide range of effects. The addon is fully responsive and compatible with all built-in color schemes (themes) of X-Cart 5.
Once the addon has been installed and enabled, a new section titled Banners appears in your store Admin area (Content -> Banners).
To add a new banner, click the “New banner” button in the Content -> Banners section.
You will see a screen like the following:
Here you can define the basic banner settings:
- Location : Choose one of the locations available
- Position : In case there will be more than one banner at the same location, specify the banner position in the row.
- Banner name : Specify the banner name here (mandatory field).
- Categories : Choose one or several category pages the banner should be displayed at (optional).
- Display on products pages : If you enable this option the banner will be shown on all the products’ pages of the selected category/ies. The option is ignored if no category is selected.
- Static pages : Choose one or several static pages the banner should be displayed at (optional).
- Memberships : Choose memberships if you want banners to be limited to customers with these membership levels.
- Show on home page : If enabled the banner will be displayed on the home page.
- Show banner’s pagination : If enabled the banner pagination is displayed.
- Show navigation arrows : If enabled the pagination arrows are displayed.
- Display this banner as parallax block : If enabled the image that is assigned to this banner in ‘Banner images settings’ section will be used as a background that is scrolled down slower than the main content of the page. The image for a parallax block should be big enough to fit the hight and width of the page it’s used at. If you do not set some image for parallax, then the first image from this banner will be used for parallax effect. HTML-banners will not be displayed in parallax block.
- Width, px : You can specify the width of the banner here. It’s recommended to leave this field empty for the image banners.
- Height, px : You can specify the hight of the banner here. It’s recommended to leave this field empty for the image banners and specify only the hight for HTML banners.
- Animation speed, in seconds : Specify the preferred animation speed in seconds in this field.
- Delay, in seconds : Specify the preferred delay in seconds in this field.
- Rotation effect : Choose one of the available rotation effects for the banner.
Enabled : If enabled the banner is displayed in the storefront.
Recommended banner paramethers for Retina and 4k displays:
- image size 3840х880 px
- JPG format with a 50%-80% compression
- file size 100-300 kb
You can use tools like ImageOptim and/or TinyPNG for banner optimization.
Click Save or Save & Close when you are done. You’ll see the newly created banner in the list.
Maintaining Banner Content
To edit the banner further click on its name in the list of banners available in the store. You’ll see a page with the basic banner settings you specified previously. Skip this tab and proceeed either to the Banner images settings tab or to the HTML banners tab depending on the type of banner you want to configure.
The Banner images settings tab allows you to add images to the banner. To add a new image click Create. You’ll see a line where you can upload the image and set the image properties:
You can define the following fields for the image:
- Image : To add an image click the + icon. The image can be uploaded from computer or via URL.
- Link : Specify the URL the image will forward to.
- Main text : You can add text to the banner, if required.
- Main text color : To choose the main text color click on the color number. You’ll see a colorpicker that you can use to find the color you need.
- Additional text : You can add more text here, if required.
- Additional text color To choose the additional text color click on the color number. You’ll see a colorpicker that you can use to find the color you need.
Click Save changes once you are done. The image will be added to the banner. Add the rest of the images the same way. You can add a text only to the banner if required.
A list of images added to the banner looks as follows:
An image banner will look as follows in the customer storefront:
The HTML banners tab allows you to create an html banner. To add a new banner click the Add new HTML-banner button. You’ll see a form where a banner can be added:
You can define the following fields for the image:
- Position : Use this field to set the order of appearance of HTML banners
- Content : Use this field to add the HTML banner content
HTML banners are more robust and are good for SEO as they can be indexed by search engines.
An HTML banner will look as follows in the customer storefront:
Help make this document better
This guide, as well as the rest of our docs, are open-source and available on GitHub.