Skip to main content
The Callout banner section creates attention-grabbing banners for promotional campaigns, product launches, or time-sensitive announcements. It combines compelling visuals with countdown timers to create urgency and drive conversions. Use this section when you need to spotlight a single offer or campaign with maximum visual impact.

​
What this section controls

This section controls promotional banners with the following capabilities:
  • Optional background images for desktop and mobile
  • Countdown timer with customizable end date and timezone
  • Dual action options (button or newsletter form)
  • Section heading and text with customizable sizes
  • Image layout toggle (with/without images)
  • Button with three style options (Filled, Outlined, Text)
  • Color scheme, width, and spacing controls

​
Section settings

Choose how the banner displays images:
  • Image — Display the banner with a background image or featured image
  • Image none (default) — Display banner without images, text-only layout
Heading — Add the main banner message with rich text support for bold, italic, and links. Default: “Spring sale”Heading size — Control the heading size with options from XS to XL (default: XL)Text — Add supporting descriptive text below the heading with rich text formatting. Default: “50% Off Everything for a limited time only”
Choose the primary interaction type for the banner:Button (default) — Display a call-to-action button that links to a destinationNewsletter form — Display an email signup form for collecting subscriber emailsThis setting determines which action element appears in the banner.
Configure the call-to-action button when “Button” is selected as the action preference:Button text — The clickable button label (default: “Shop sale”)Button URL — Destination link for the button (default: /collections)Button style — Choose the visual appearance:
  • Filled (default) — Solid background button
  • Outlined — Border-only button
  • Link — Text-style link button
Configure the email signup form when “Newsletter form” is selected as the action preference:Newsletter button label — Text for the submit button (default: “Submit”)Success message — Message displayed after successful email submission (default: “Thanks for signing up!”)

​
Countdown timer

Create urgency with an integrated countdown timer for limited-time campaigns.
Set the exact date and time when the countdown ends:Year — Enter the target year (default: 2026)Month — Select from January to December (default: January)Day — Choose day 1-31 (default: 1)Hour — Set hour 0-23 in 24-hour format (default: 0)Minute — Set minute 0-59 (default: 0)
Automatically extend the timer by a specified number of days after it ends. Range: 0-30 days (default: 0).This is useful for evergreen campaigns that repeat on a rolling cycle. When set to a value greater than 0, the timer automatically resets to that many days in the future when it reaches zero.
Message displayed to users when the countdown reaches zero (default: “Sale has ended”). Supports rich text formatting.
Enable decorative borders around the countdown timer segments for visual separation (disabled by default).

​
Timer display settings

Control which time units appear in the countdown timer.
Toggle the display of individual time components:Show timer days — Display the days remaining (enabled by default)Show timer hours — Display the hours remaining (enabled by default)Show timer minutes — Display the minutes remaining (enabled by default)Show timer seconds — Display the seconds remaining (enabled by default)Disable units for shorter campaigns or cleaner presentations. For example, hide days for a flash sale lasting only hours.

​
Section styling

Choose the container width:
  • Page width (default) — Standard container width
  • Fluid — Wider, edge-to-edge within padding
Select the color scheme for the banner section (default: scheme-1). The color scheme controls background, text, and button colors.
Control vertical spacing above and below the section with options from None to XL (0, S, M, L, XL). Default is M for both top and bottom.
Add decorative borders:
  • None (default) — No borders
  • Top — Border above the section
  • Bottom — Border below the section
  • Both — Borders above and below

​
Best practices

Clear messaging

Keep the heading concise and action-oriented. State the value proposition clearly within 5-8 words.

Appropriate timing

Set realistic countdown timers that align with actual campaign end dates. Avoid extending timers indefinitely as it erodes trust.

Mobile optimization

Use the mobile image setting to provide appropriately-sized images that load quickly and look great on small screens.

Visual hierarchy

Use larger heading sizes and contrasting colors to ensure the banner stands out without overwhelming other content.

Action clarity

Choose one clear call-to-action. Use the button for direct linking or newsletter form for list building, not both.

Timer relevance

Only show timer units relevant to your campaign duration. Hide days for hourly flash sales, hide seconds for week-long campaigns.

​
Use cases

  • Flash sales — Promote limited-time discounts with countdown timers to create urgency
  • Product launches — Build anticipation for upcoming product releases with countdown to launch date
  • Seasonal campaigns — Highlight holiday sales, seasonal collections, or special events
  • Email list building — Use newsletter form to grow subscriber lists during promotional periods
  • Collection promotions — Drive traffic to specific collections with attractive visuals and clear CTAs
  • Limited inventory — Communicate scarcity and urgency for high-demand products
  • Event announcements — Promote webinars, sales events, or in-store happenings
  • Free shipping offers — Highlight shipping promotions with clear end dates