Skip to content
Install app
English

Promo banner

Add a banner with a heading, text and button to promote a sale or a new collection.

Reference All plans 2 min read

An image, a heading, a short text and a button in one block. Unlike the Image block, it has a call-to-action button and its own colors, so it looks like a finished ad even without a designed image.

Add the block

  1. Pick a layout

    In the mega menu panel of the preview, click Add block. Click Add custom image, hover over Promo banner (text over the image) or Promo banner split (image and text side by side) and click Select.

    (1) Click Add custom image, (2) pick Promo banner or Promo banner split.
  2. Add the image and texts

    In Edit Item, under General, click Select image. Replace the sample Heading, Text and Button label, and choose the Link.

    The Promo banner block in the preview, with its settings in Edit Item.
  3. Save and publish

    Style it under Style, then click Save and Publish.

Settings

General

ImageDefault: None
The banner picture.
HeadingDefault: Summer Sale / New collection
The main line. Defaults are for Promo banner / Promo banner split.
TextDefault: Up to 50% off / Discover the latest arrivals
A short line under the heading.
Button labelDefault: Shop now / Discover
Text on the button. Leave it empty to hide the button.
LinkDefault: None
Where the banner goes when clicked. Tick Open in new tab if needed.
WidthDefault: 33.33% / 66.66%
How much of the mega menu row the block takes: Auto or 8.33% to 100%.

Style

LayoutDefault: The layout you picked
Overlay (text on the image) or Split (image and text side by side).
Text alignmentDefault: Left
Left or Center.
Background colorDefault: #111827
Color behind the text.
Text colorDefault: #FFFFFF
Color of the banner texts.

Visibility works as on every block; see Settings every block has.

Tips

  • With Overlay, pick a photo with a calm area where the text sits, or the text gets hard to read.
  • Split needs more room. Give it a Width of 50% or more.
  • Running a timed sale? Use Visibility > Schedule publishing so the banner shows only during the sale.

Was this helpful?

Report an issue