Flair
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.
You can style the text with the buttons (e.g. - bold, italic, strikethrough).
You can also use dynamic text and 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.
Link
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.
Tags
Tags can be added to organize your banners based on how you want to use them.
You can also specify these tags within a Flair banner layout to run promotions with specific banners.
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
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
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.
Shop / product
- shop - use a shop metafield
- product - use 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
- is not - the metafield value is excluded from the list
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.