Flair Placements

Updated: September 10, 2020

You can use Flair Placements to customize how your badges and banners show in different places within your Shopify store.

Included on this page:

Badge Placements

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

How to use Badge Placements

When you create a Badge Placement you’ll give it a name, such as My Placement.

Then, you can choose this Placement by passing in the flair_placement name when you install the Flair product badge snippet in your theme like so:

1
  {% render 'flair-product-badges', product: product, flair_placement: 'My Placement' %}

If you don’t specify a flair_placement, Flair will use the default Badge Placement if one is available.

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 Placement: 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 Placement 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 Placement 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 Placement. Here is some example CSS to set the margin to 10px and maximum width to 80%:

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

Banner Placements

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

How to use Banner Placements

When you create a Banner Placement you’ll give it a name, such as My Placement.

Then, you can choose this Placement by passing in the flair_placement name when you install the Flair banner snippet in your theme like so:

1
  {% render 'flair-banners', flair_placement: 'My Placement' %}

If you don’t specify a flair_placement, Flair will use the default Banner Placement if one is available.

Spacing

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

Custom CSS

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

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 Placements 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

How to migrate

To migrate your current display options to a Placement, you can use one of these two options:

Option A. Specify a named Placement

Use this option if you are showing your badges or banners using different display settings (such as number of badges, spacing, alignment) in sections of your store.

Create a Placement and give it a name such as My Placement.

You can now optionally make a copy of your published theme to work on these changes without affecting your live site.

Then modify your theme to pass in the Placement name using anywhere you’d like to use it like so:

1
{% render 'flair-product-badges', product: product, flair_placement: 'My Placement' %}

You can refer to this guide for common Flair snippet locations for your theme.

If you run into any issues, you can revert your changes and Flair should switch back to using your previous snippet options.

Option B. Use a default Placement

You can use this option to create a default placement that will be used anywhere you don’t specify the Flair placement.

Create a new Placement, and choose set as Default.

Your Flair badges or banners should automatically switch to using this default Placement as long as you don’t specify a flair_placement like so:

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

If you run into any issues, you should be able to uncheck the set as Default and save your Placement to switch back to your previous snippet options.

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.