Flair Badge Layouts

4 min read
updated Apr 18, 2022

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

Badge layouts can be found within Flair under Settings > Layouts.

Settings

Name

Enter a descriptive name for your layout.

The name may only contain letters, numbers and spaces.

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.

Badges

Flair badges can be organized and promoted based on how you want to use them. For example, you can show your sale and promotional badges in one part of your page layout, and your shipping-related badges elsewhere.

The following badge selection options are available:

  • Show all badges - All badges will be shown
  • Show badges with tags - Only badges that contain one of the specified tags will be shown
  • Show badges without tags - Only badges that do not contain one of the specified tags will be shown

These advanced layout controls enable you to run specific promotions, maximizing the impact of your merchandising and sales efforts, automatically.

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:

1
2
3

Or in a column:

1
2
3

Gap

Use the gap to adjust the spacing between badges.

1
2
3

Variant badges

You can use variant badges to show Flair badges based on a specific variant in your shop.

There are four possible variant badge settings you can choose from:

  • 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.

When using absolute positioning

Be sure to place the layout inside of a relatively positioned container. You should be comfortable with CSS and HTML if you choose this option.

Horizontal Alignment

You can horizontally align badges to the left:

1
2
3

To the center:

1
2
3

Or to the right:

1
2
3

Vertical Alignment

This option only applies for the absolute position.

You can vertically align badges to the top:

1
2

Or to the bottom:

1
2

Z-index

This option only applies for the absolute position.

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.

Margin

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

1
2
3

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%:

1
2
  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

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

Shopify Theme Customizer layout

Custom Flair setups

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

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