Layouts

Overview

A Flair layout controls where promotions appear on your Shopify pages and how several promotions behave together. Layouts handle positioning and margins, stacking limits and direction, grouping by tag, and whether variant promotions are enabled.

You can use layouts throughout your store to control how Flair promotions display. See How to Apply Flair Layouts.

Name

Enter a descriptive name for your layout. The layout name can be used during Flair setup (see How to Apply 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.

When more promotions qualify than the maximum allows, those with the highest priority show first.

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 display rules and dynamic text will be based on all product variants
• Enabled - enable variant promotions; Flair display rules and dynamic text will use the selected variant if available. If no variant is selected, 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.

Read more about z-index here.

How to Apply Flair Layouts

Learn how to apply Flair layouts. We recommend specifying layouts by name.

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 the Shopify theme editor

For Flair badges and banners installed via Online Store > Themes > Edit theme, 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.

Using default settings

You can also use layout Default Settings to auto-apply layouts. If no layout is specified, or the specified layout is missing, Flair uses the layout auto-applied to that page type, otherwise the default layout.

Frequently Asked Questions