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.
You must also set the banner status to scheduled with an end date in the future.
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:
The banner status will be shown in the bottom left corner of each banner card in the Flair > Banners section. Here is a summary of the possible banner statuses:
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
- the current collection - match based on the current collection
- product collections - match based on the product collections
Customer History
Show banners based on the customer's buying history:
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
- product - a product metafield
- shop - a shop metafield
Heads up! The 'shop' metafield option is on its way out and won't be available in Flair Gen 3.
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.