Flair Badge Layouts

You can use badge layouts to customize how your badges are displayed in your store.

To access badge layouts, visit Flair Badges and click the Layouts button.

Settings

Name

Enter a descriptive name for your layout.

Page Types

Select the pages to apply the layout 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.

Badge selection

Specify which Flair badges to show in this layout.

• Show all badges - Show all Flair badges.
• Show badges with tags - Only show badges with specific Flair badge tags.
• Show badges without tags - Only show badges that do not have specific Flair badge tags.

Number of badges

Configure how many badges to show at the same time.

Maximum

Enter the maximum number of badges to show, from 1-6.

Direction

Badges can be shown in a row:

Or in a column:

Gap

Use the gap to adjust the spacing between badges.

Variant badges

You can enable variant badges to show Flair badges based on specific variants.

Flair Gen 3

• Disabled - disable variant badges; badges will be based on all product variants
• Enabled - enable variant badges; badges will be based on the selected variant, or if there is no selected variant badges it will be based on all product variants

Flair Gen 2

• Do not use variant badges - badges will be based on all product variants
• Use the selected variant, or the first available variant - badges will be based on the selected variant, or if there is no selected variant the first variant available for sale will be used
• Use the selected variant, or the first variant - badges will be based on the selected variant, or if there is no selected variant the first variant will be used
• Use the selected variant - badges will be based on the selected variant, or if there is no selected variant badges will be based on all product variants

You can read more about variant badges in the Flair Variant Badge docs.

Display Options

Position

The default position means the Flair badges will be shown within the normal flow of the page.

The absolute position, on the other hand, can be used to position the Flair badges on top of other elements in your shop, such as on top of your product images.

Alignment horizontal

You can horizontally align badges to the left:

To the center:

Or to the right:

Alignment vertical

You can vertically align badges to the top:

Or to the bottom:

Margin

You can optionally add spacing around the badge layout: top, bottom, left and right.

Z-index

The z-index allows you to move this 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.

You can read more about z-index here.

Custom CSS

If you are comfortable with CSS, you can add custom CSS to your badge layout. Here is some example CSS to set the margin to 10px and maximum width to 80%:

margin: 10px;
max-width: 80%;

Using Badge Layouts By Name

You can apply badge layouts by specifying the layout name in:

• The Shopify Theme Customizer
• Custom Flair setups

The Shopify Theme Customizer

To apply a layout within Shopify's Theme Customizer, enter the layout name in the Layout field inside the Flair product badges block:

Custom Flair setups

For custom Flair badge setups, you can use a data-layout attribute to specify your layout name:

<div data-flair-product-badge data-product-id={{ product.id }}
  data-layout="my layout"></div>