Banners

Oct 19, 2026
On this page

Overview

Flair banners are promotional messages that display on your Shopify storefront. Use them to announce sales and offers, share store-wide information such as free shipping, and create urgency around a deadline.

Each banner supports text with emojis and dynamic text, an optional call-to-action button, and an optional countdown timer for deadline-driven urgency. The banner, button, and countdown are styled independently, and display rules control when each banner appears.

Manage banners

On the Banners page, search, filter, and sort your banners, or switch between compact and expanded views. Click a preview to edit a banner. Learn more about the list controls and view options.

Content

Banner content

Enter the content for your banner. This supports text, emojis and dynamic text.

Button

Optionally add a call-to-action with a button.

  • Click + Add button.
  • Enter the button Text.
  • Set the button Position.

Countdown

Optionally add a countdown timer to add urgency.

  • Click + Add countdown.
  • Set the countdown Position.
  • Set the banner Status to Scheduled, check Set end date, and choose a future end date and time.

Translations

Translate your banner text and button text into multiple languages. See the Translations guide for setup and details.

Background Color

Choose the banner background color.

Border

Select the banner border size:

  • none
  • small
  • medium
  • large

Border Color

Choose the banner border color.

Corners

Select the banner corners style:

  • square
  • round
  • rounder
  • roundest

Letter Spacing

Select the amount of space to use between the banner letters.

Padding

Select the amount of space to use inside of the banner.

Shadow

Select the banner shadow:

  • none
  • small
  • medium
  • large

Text Color

Choose the banner text color.

Text Size

Select the banner font size.

Button Style

Background Color

Choose the button background color.

Corners

Select the button corners style:

  • square
  • round
  • rounder
  • roundest

Letter Spacing

Select the amount of space to use between the button letters.

Padding

Select the amount of space to use inside of the button.

Text Color

Choose the button text color.

Text Size

Select the button font size.

Text Style

Select the button font style:

  • normal
  • bold
  • italic
  • bold / italic

Countdown Style

Background Color

Choose the countdown background color.

Corners

Select the countdown corners style:

  • square
  • round
  • rounder
  • roundest

Gap

Select the amount of space to show between the countdown sections.

Labels

Enter the labels to use for the timer units:

  • days
  • hours
  • minutes
  • seconds

Letter Spacing

Select the amount of space to use between the countdown letters.

Padding

Select the amount of space to use inside of the countdown.

Text Color

Choose the countdown text color.

Text Size

Select the countdown font size.

Text Style

Select the countdown font style:

  • normal
  • bold
  • italic
  • bold / italic

Display rules

Control when your promotions are eligible to show, based on products, customers, cart contents, and more. Learn more about display rules.

Status

Set the banner status:

  • Published - the banner is live
  • Unpublished - the banner is not live
  • Scheduled - the banner is scheduled to be published or unpublished in the future

Add a link to make your banner interactive.

To add a link:

  • Click + Add.
  • Enter the URL.
  • Select Open in new window to open the link in a new browser tab.

Flair supports the following link formats:

  • http:, https:, / – Link to any page in your shop or beyond, e.g., /collections/sale.
  • sms: – Open a pre-filled text message, e.g., sms:5551112222&body=Get 20% Off.
  • mailto: – Open a pre-filled email, e.g., mailto:[email protected]?subject=Special Offer&body=Please send me the 20% OFF code.
  • javascript: – Run custom JavaScript, e.g., javascript:dispatchEvent(new CustomEvent('flair-offer-click')).

Organization

  • Priority - Control which banners show first. Set a number from 1 to 9999. Lower numbers mean higher priority.
  • Tags - Group related banners to find them easily and include or exclude them in Layouts.

Learn more about organizing Flair promotions.

More actions

Open a banner, then click More actions at the top of the editor:

  • Duplicate - create a copy of the banner.
  • Delete banner - permanently remove the banner. Deletion can't be undone.

Frequently Asked Questions

How do I add a countdown timer to a Flair banner?

Add a countdown to your banner and set an end date. See Countdown for details.

Can I add a button to a Flair banner?

Yes. Add a button in your banner's Content section, then customize its appearance. See Button and Button Style.

Can I change the countdown timer labels?

Yes. Customize the labels for days, hours, minutes, and seconds in your countdown settings.

Why isn't my Flair banner full width in a Horizon theme?

Horizon-family themes don't stretch app blocks to the full width of their section. Add a single line of custom CSS to fix it. See Make banners full width in Horizon themes.

Can Flair banner text be translated?

Yes. You can translate banner text and button text into multiple languages. See Translations for setup instructions.

Navigation