Burst Commerce Logo

Flair Banner Settings

Updated: August 06, 2021

Overview

You can use Flair banners to automate promotions and messages throughout your Shopify store.

Content

This is where you enter the content for your banner.

You can style the text with the buttons (e.g. - bold, italic, strikethrough).

You can also use emojis here.

Style

Choose a Style

Choose a style from one of our hand-crafted styles by clicking this button:

Choose a color, style and countdown combo that you like and click Apply Style:

All of these settings can be customized as outlined below.

Background Color

Set the background color by using the color picker:

Choose one of the included colors, or you enter your own custom color.

Text Color

Set the text color by using the color picker:

Choose one of the included colors, or you enter your own custom color.

Text Size

Set the size of your banner text.

Padding

Set the padding (aka - space inside) for the banner:

  • none - no padding; perfect for text-only banners with no background
  • small - a small amount padding
  • medium - a medium amount padding
  • large - a large amount padding

Border

Set the border size:

  • none - no border
  • small - a 2px border
  • medium - a 4px border
  • large - a 6px border

Border Color

Set the border color by using the color picker:

Choose one of the included colors, or you enter your own custom color.

Corners

Choose a corner style:

  • square - squared corners
  • round - rounded corners

Shadow

Set the shadow for the banner:

  • none - no shadow
  • small - a small shadow
  • medium - a medium shadow
  • large - a large shadow

Justify

Specify how the elements are laid out within the banner.

Justify center

Justify center will center all banner content:

If the banner content doesn’t fit on one line, the button will also wrap an be centered:

Justify between

Justify between will left-align the banner content, and right-align the button (if present):

If the banner content doesn’t fit on one line, the button will still stay to the right:

On mobile screens, the button will also wrap:

Max Width (inside)

Max width (inside) allows you to control how wide the inside of the banner content goes.

This is most useful when combined with justify between.

As a general rule you should set this to be the same width as the maximum width for your shop content.

Button

Use this section to add a call to action for your banner such as a button or link.

Text

Enter the text for your button.

Text Style

Set the style for your button text:

  • normal - no styling
  • bold - bolded
  • italic - italicized
  • bold / italic - bolded and italicized

Padding

Set the padding (aka - space inside) for your banner:

  • small - a small amount padding
  • medium - a medium amount padding
  • large - a large amount padding

Background Color

Set the button background color by using the color picker:

Choose one of the included colors, or you enter your own custom color.

Text Color

Set the button text color by using the color picker:

Choose one of the included colors, or you enter your own custom color.

Countdown

Use this section to add some urgency to your banner with a countdown timer.

Background Color

The background color to use for each countdown section.

Text Color

The text color to use for the countdown text.

Text Style

Set your countdown text style:

  • normal - no styling
  • bold - bolded
  • italic - italicized
  • bold / italic - bolded and italicized

Padding

Add some space (a.k.a - padding) around each countdown section.

Labels

Customize the day, hour, minute and second labels.

Labels are optional - leave them blank to show a countdown without labels.

Gap

The gap is the space between the sections of the countdown.

Add a link to make your banner clickable to take your shoppers to another page.

URL

Enter the URL the banner should link to.

Open in new window

Check this box to open the link in a new browser window.

Status

Banners can be shown or hidden at anytime.

To change the banner status, click on the calendar button:

Banners can be set to:

  • Published
  • Unpublished
  • Scheduled

Published

Published banners are visible in your store.

Unpublished

Unpublished banners are NOT visible in your store.

Scheduled

Scheduled banners can have a publish date and optionally an unpublish date:

Banners that are scheduled to be published in the future will show a clock icon within Flair:

Banners that are scheduled to be unpublished in the future will show an hourglass icon within Flair:

Conditions

Use conditions to show and hide banners automatically in your shop.

ALL / ANY

Use this option to specify how multiple conditions should be handled:

  • ALL conditions - The banner will only show if all conditions match
  • ANY conditions - The banner will show if any one condition matches

Collection

Show banners based on Shopify collections.

Include / exclude
  • is - the collection is included in the list
  • is not - the collection is excluded from the list
Collection list

Enter one or more collections. If multiple collections are entered, only one collection must match.

Collection type
  • any collection - match on either the current collection or current product collections
  • collections - match based on the current collection
  • product collections - match based on current product collections

Customer Behavior

There are 2 types of customer behavior conditions:

Order count

Show banners based on the number of orders a customer has made.

Operator
  • <= - less than or equal to
  • >= - greater than or equal to
Order total
  • Enter the number of orders - any number greater than or equal to 0

Total spent

Show banners based on the total amount a customer has spent.

Operator
  • <= - less than or equal to
  • >= - greater than or equal to
Amount spent
  • Enter the amount in whole dollars without cents (e.g. - 100)

Customer Tag

Show banners based on customer tags.

Include / exclude
  • is - the tag is included in the list
  • is not - the tag is excluded from the list
Customer tag list

Enter one or more customer tags. If multiple customer tags are entered, only one must match.

Page Type

Show banners based on specific page types (e.g. - ‘collection’, ‘product’).

Include / exclude
  • is - the page type is included in the list
  • is not - the page type is excluded from the list
Page type list

Enter one or more page types. If multiple page types are entered, only one must match.

Product

Show banners based on specific products.

Include / exclude
  • is - the product is included in the list
  • is not - the product is excluded from the list
Product list

Enter one or more products. If multiple products are entered, only one must match.

Product Tag

Show banners based on product tags.

Include / exclude
  • is - the product tag is included in the list
  • is not - the product tag is excluded from the list
Product tag list

Enter one or more product tags. If multiple product tags are entered, only one must match.