Flair Layouts

Overview

Use layouts to customize margin and positioning, stack and group promotions, and enable variant promotions.

Settings

Name

Enter a descriptive name for your layout.

Note: The name may only contain letters, numbers and spaces.

Page Types

Select the pages to apply the layout to automatically:

Home
Product
Collection
Search
Cart
Use as default

For example, if you select Product and Collection, the layout will be automatically applied to all product and collection pages when no other layout is specified.

The Use as default option will apply the layout if no other layout matches.

For more direct control, you can specify the layout name directly when adding Flair to your theme.

In the Shopify Theme Customizer

Enter the layout name in the Layout field inside of the Flair badges or Flair banners block.

In Flair web components

Set the layout name using the layout attribute:

<flair-badges layout="mylayout"></flair-badges>
<flair-banners layout="mylayout"></flair-banners>

See also the Flair web components guide.

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 Options

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