Burst Commerce Logo

Flair Badge Layouts

Updated: February 16, 2021

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.

Badge Layout Types

Flair supports two types of badge layouts: Automatic and Manual.

Automatic

Automatic badge layouts are applied based on the page type within your store. You can choose from any of the following page types:

  • Home
  • Product
  • Collection
  • Search
  • Cart

Note: There can be only one automatic badge layout for each page type.

You can also check the Use as default box to use this layout if no layout is specified.

Manual

Manual badge layouts give you a bit more control when applying layouts in your theme.

You can specify a manual badge layout by using the flair_layout option to specify the layout name.

For example, if you have a badge layout called My Layout, you can specify this layout like so:

1
  {% render 'flair-product-badges', product: product, flair_layout: 'My Layout' %}

Multiple Badges

Badge max

You can show up to 5 badges at a time for each product, depending on your Flair plan.

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

Spacing

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

1
2
3

Positioning

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.

Use caution when choosing the absolute position.

The absolute position requires the Flair Layout to be placed 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.

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.

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

Migrating to Badge Layouts

This section only applies if you installed Flair before September 10th, 2020 and you are passing in custom options to your product badge snippets.

In prior versions of Flair, badge options were passed in directly to the Flair snippet like so:

1
  {% render 'flair-product-badges', flair_css: 'margin: 10px', flair_css_class: 'flair-inline', flair_badge_max: 2 %}

Going forward, badge layouts are the preferred way to customize your Flair badge setup.

The following badge snippet options are now deprecated and may be removed in a future version of Flair:

  • flair_css
  • flair_css_class
  • flair_badge_max
  • flair_badge_init

Switching to Automatic Layouts

The easiest way to move over to layouts is to use an automatic badge layout.

Automatic badge layouts can be applied based on the page type in your theme.

For example, let’s say you want to show 3 badges in a row on your product pages, and 1 badge on your collections and home page.

You can create two automatic badge layouts to handle each of these scenarios.

The product badges can use an automatic badge layout set to show on your Product pages. You can then customize the display options for this layout to choose 3 badges displayed in a row.

The collection and home page badges can use another automatic badge layout set to show on your Home and Collection pages.

If you run into any issues, you can always remove your automatic layouts, or set them to be Manual, and Flair should revert back to your prior settings.