Flair Layouts
Overview
Set up layouts in Flair to manage margins, positioning, and promotion displays on your Shopify store’s pages. Control how promotions stack or group, turn on variant-specific displays, and define default layouts for your store.
Name
Enter a descriptive name for your layout. The layout name can be used during Flair setup (see How to Specify Flair Layouts).
Note: The name may only contain letters, numbers and spaces.
Default Settings
By page type
Select page types to use this layout when no layout is set.
The following page types are supported:
- Home
- Product
- Collection
- Search
- Cart
Use as default
Check the Use as default checkbox to use this layout when no layout is set, or if an invalid layout is specified.
Promotion Settings
Group promotions
Display a specific group of badges or banners based on tags.
- Show all badges/banners - Show all items.
- Include badges/banners with tags - Only show items with the specified tags.
- Exclude badges/banners with tags - Only show items without the specified tags.
Stack promotions
Display multiple badges or banners at the same time.
Maximum
Select the maximum number of badges or banners to show.
Direction
Show in a row:
Or in a column:
Gap
The space between items in the stack.
Variant promotions
Promote specific variants with badges or banners.
- Disabled - disable variant promotions; Flair conditions and dynamic text will be based on all product variants
- Enabled - enable variant promotions; Flair conditions and dynamic text will use the selected variant if available. Or if there is no selected variant promotions will use the product totals across all variants.
See the Flair Variants guide for more information about variant promotions.
Display Settings
Position
- default - show within the normal flow of the page
- absolute - position absolutely on top of other elements, such as product images; only available for badges
Note: The absolute position needs to be placed inside of a relative container.
Alignment horizontal
On the left:
Or in the center:
Or on the right:
Alignment vertical
This option only applies for the absolute position.
On the top:
Or on the bottom:
Margin
Add spacing around the layout.
Z-index
This option only applies for the absolute position.
The z-index allows you move the layout above or below other items on your page. Elements with a higher z-index value will be placed on top of elements with a lower z-index value.
How to Specify Flair Layouts
Learn how to specify Flair layouts when setting up Flair.
Using default settings
You can use layout Default Settings to auto-apply a layout based on page types (e.g., Home, Collection, Product) and also as a default fallback.
Using the layout name
You can specify the layout by name when setting up Flair in your theme.
The details depend on how you installed Flair.
Using Shopify Theme Customize
For Flair badges and banners installed via Shopify Admin > Themes > Customize, set the Layout inside of the app block like so:
Using Flair web components
Set the layout name using the layout attribute:
Flair badges example
<flair-badges layout="Collections"></flair-badges>Flair banners example
<flair-banners layout="Collections"></flair-banners>See also the Flair web components guide.