Flair Layouts

Updated: October 15, 2020

You can customize how your badges and banners are displayed in your store with Flair Layouts.

Flair Layouts can be found in your Flair app under Settings > Layouts.

There are two types of layouts you can create:

In addition, if you were using Flair before September 10th, 2020, check out the Migrating to Layouts section.

Badge Layouts

You can use Badge Layouts to customize how your badges are displayed in your store.

Badge Layout Types

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

Automatic Badge Layouts

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 Badge Layouts

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 configure Flair badges to use the selected variant, such as a size Small t-shirt, for inventory, price and sales price.

This means you can create badges like Only 3 left and Save $3.98 to show the exact inventory and savings for the selected item.

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

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

Banner Layouts

You can use Banner Layouts to customize how your banners are displayed in your store.

Banner Layout Types

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

Automatic Banner Layouts

Automatic banner 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 banner layout for each page type.

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

Manual Banner Layouts

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

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

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

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

Spacing

You can optionally add spacing around the Banner Layout: top, bottom, left and right.

Custom CSS

If you are comfortable with CSS, you can add custom CSS to your Banner 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 Layouts

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

In prior versions of Flair, badge and banner display 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, Flair Layouts are the preferred way to customize your Flair setup.

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

  • flair_css
  • flair_css_class
  • flair_badge_max, flair_banner_max
  • flair_badge_init, flair_banner_init

Switch to Automatic Layouts

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

Automatic 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 an automatic badge layout for 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.

Need any help?

If you have any questions or need any help with, feel free to contact us and we’d be happy to help.