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

new-banner.png

You will see a screen like the following:

add-banner.png

Here you can define the basic banner settings:

  • Location: Choose one of the locations available

  • Position: If there is 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 to display the banner (optional).

  • Display on product pages: If you enable this option, X-Cart will display the banner on all product pages of the selected category in the storefront. The option is ignored if no category is selected.

  • Static pages: Choose one or several static pages to display the banner (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 display 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 assigned to this banner in the ‘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 height and width of the page it’s used at. If you do not set some images for parallax, then the first image from this banner will be used for the parallax effect. HTML banners will not be displayed in the 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 height of the banner here. It’s recommended to leave this field empty for the image banners and specify only the height 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 parameters 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.

banner-created.png

Did this answer your question?