Flair Banner Settings

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.

• Style the banner text with bold, italic, and strikethrough.
• Add dynamic text and emojis.
• Enable a button or countdown timer.

Adding a button

Click + Add Button to add a button to your banner.

The button supports the following options:

• Text - enter the text for the button
• Position - set the position of the button within the banner to first, middle or last

Adding a countdown timer

Click + Add Countdown to add a countdown timer to your banner.

The countdown supports the following option:

• Position - set the position of the countdown within the banner to first, middle or last

Style

General

Customize the general banner styles.

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.

Padding

Set the amount of space to include around the banner text.

Corners

Choose a corner shape, ranging from square to roundest.

Text Size

Set the size of your banner text.

Letter Spacing

Set the amount of space to include between each letter.

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.

Shadow

Set the shadow for the banner:

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

Button

Customize the button styles.

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.

Padding

Set the amount of space to include around the button text.

Corners

Choose a corner shape, ranging from square to roundest.

Text Size

Set the button text size relative to the banner text size:

• small - use a smaller text size
• normal - use the default text size
• large - use a larger text size

Text Style

Set the style for your button text:

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

Letter Spacing

Set the amount of space to include between each letter.

Countdown

Customize the countdown timer styles.

Background Color

The background color to use for each countdown section.

Text Color

The text color to use for the countdown text.

Padding

Set the amount of space to include around the countdown text.

Corners

Choose a corner shape, ranging from square to roundest.

Text Size

Set the countdown text size relative to the banner text size:

• small - use a smaller text size
• normal - use the default text size
• large - use a larger text size

Text Style

Set your countdown text style:

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

Letter Spacing

Set the amount of space to include between each letter.

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.

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:

Link

Click + Add to add a link and 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.

Tags

Click + Add to add tags to your banner.

Tags can be used to organize your banners, and to display different banners per layout.

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

Company Name

Show banners based on the customer's Shopify B2B company.

Include / exclude

• is - the company name is included in the list
• is not - the company name is excluded from the list

Company name list

Enter one or more company names (case-insensitive). If multiple names are entered, only one name must match.

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 History

Show banners based on the customer's buying history:

• Order count
• Total spent

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

• 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 (case-insensitive). If multiple customer tags are entered, only one must match.

Customer Type

Show badges based on the type of customer.

Customer Type

• not logged in - the customer is not logged in
• a consumer - the customer is a consumer (does not belong to a B2B company)
• a business - the customer is a business (belongs to a B2B company)

Metafield

Show banners based on shop and product Shopify metafields.

Resource

• shop - a shop metafield
• product - a product metafield

Namespace and key

• namespace - enter the metafield namespace (e.g. - 'custom')
• key - enter the metafield key (e.g. - 'promo')

Operator

• exists - the metafield exists
• is - the metafield value is included in the list (case-sensitive)
• is not - the metafield value is excluded from the list (case-sensitive)

Value list

Enter one or more metafield values to match. If multiple values 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 (case-insensitive). If multiple product tags are entered, only one must match.