Skip to main content
All CollectionsStorefront pages
Banner above the header
Banner above the header

Adding and customizing a cross-page banner in the header

Updated over a week ago

A narrow banner above the header is displayed on all pages of the site and helps to draw additional attention to promotions, sales, and other important information.

Banner 1 above the header — Cartum

Banner 2 above the header — Cartum

Banner 3 above the header — Cartum

Examples of banners above the site header

How to add a banner above the header

  1. Go to Website → Banners and click Add.

  2. In the Page field, select All pages.

  3. Set up the banner content, and then click Save.

Features of some settings

  • Image — a picture for the background, placed in the center of the banner, cropped on narrow screens.

  • Text — text on the banner, supports HTML and CSS.

  • Height — the height of the banner: 30, 40 or 50 pixels. On the mobile version, the height is automatically increased if the text on the banner does not fit in one line — for this, you need to upload a background image of an extra height.

  • Show banner on — show the banner only on the desktop version, only on the mobile version, or everywhere. Use this setting to create two different banners for each version of your site.

  • Show close button — if enabled, the site visitor will be able to hide the banner, after which it will no longer appear.

Banner on the mobile version

On the mobile version, the banner is displayed below the header: it remains visible, and the header does not move from its usual place on the screen. This is important for comfortable use of the site.

When designing a banner, make sure that it is clear and readable on the mobile version. We recommend several options for solving this problem.

1. Set the banner content as text. On the mobile version, the text will not be cut off, but moved to a new line. At the same time, the banner can increase in height if the background image is loaded with a margin.

Mobile banner 1 — Cartum

2. Design the layout so that important content fits the width of the smartphone screen. The image will be cropped on both sides, but the content will remain readable.

Mobile banner 2 — Cartum

3. Create a separate banner for the mobile version. In the settings of this banner, specify that it should be displayed only on the mobile version, and the original banner should be displayed only on the desktop (the Show banner on setting).

Mobile banner 3 — Cartum

The order of displaying banners

Only one banner can be displayed above the header — the one that is located highest in the list in the Website → Banners admin panel section.

However, if the first priority banner has a close button enabled, then after this banner is hidden, the site visitor will see the next one (after reloading the page or going to another page).

Hiding the banner — Cartum


Read also

Did this answer your question?