The default X-Cart 5 software allows adding banners to the store front-page (home-page) and category pages that is described in Changing your store’s Welcome text and banner on the Front page.

If you want more banners that can be added to any page of the store and placed in different locations you can extend the default functionality with the Banners System module (paid for Business and Multivendor, included in Ultimate).

Once installed and enabled the Banner System module functionality is added to the Banners section (Content -> Banners) of the store Admin area.

Creating banners

To add a new banner click the “New banner” button in the Content -> Banners section.

new-banner.png

You’ll see a screen of the kind: add-banner.png

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.

Click Save or Save & Close when you are done. You’ll see the newly created banner in the list.

banner-created.png

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.

images-settings.png
html-banner.png
  1. 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:

    image-properties.png

    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:

    first-banner.png

    An image banner will look as follows in the customer storefront:

    first-banner-cus.png

  2. 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: html-properties.png

    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:

    html-banner-cus.png