Flair Release Notes: Badge & Banner Placements

September 10, 2020 Flair Release Notes: Badge & Banner Placements

I’m excited to share with you the details about the latest Flair release. This release features a new and improved way to customize your Flair setup called Flair Placements.

Flair Placements make it easy to display your badges and banners exactly how you’d like throughout your store. You can use Placements for specifying lots of different display options including: multiple badges, spacing, positioning, alignment and more.

Keep reading below to find out more about how you can take advantage of Flair Placements in your store. And at the end of this post I’ll even give you a sneak peak of some upcoming features made possible by Placements.

In this post, we’ll discuss:

Placements Overview

So what exactly are Flair Placements?

Placements provide a way for you to customize how your Flair badges and banners are displayed in your store.

Want to show multiple badges, or add a bit of space around your badge or banners? Flair Placements have you covered.

Prior to Flair Placements you could pass in a limited set of options when you added Flair to your theme like so:

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

Now with Flair Placements, you have a full range of display options easily available right from within Flair.

I think you’ll find Flair Placements give you a lot more flexibility and are easier to manage. This also means you can configure your options in one place and share them across multiple places within your store such as: product pages, collection pages, search pages and checkout.

Badge Placements

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

Badge Placements support the following options:

  • Multiple badges
  • Direction of badges: row or column
  • The gap between badges
  • Spacing: top, bottom, left, right
  • Position your badges on top of things such as product images
  • Horizontal Alignment: left, right or center
  • Vertical Alignment: top, bottom
  • Custom CSS

To see examples and learn more head on over to the Badge Placements doc.

Banner Placements

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

You can use Banner Placements to configure:

  • Spacing: top, bottom, left, right
  • Custom CSS

To see examples and learn more head on over to the Banner Placements docs.

Migrating to Placements

Prior to Flair Placements, options were passed 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 %}

If you’d like to try out the new Flair Placements instead, you can check out the Migrating to Placements guide.

Sneak Peak: Upcoming Flair Updates

Two of the most highly requested features on the Flair roadmap are coming soon and will be based on Flair Placements:

Variant badges

Flair will soon support variant badges. This means you can use Flair to display badges based on the selected variant (e.g. ‘Mens XL T-shirt’).

Variant badges will let you promote scarcity for each individual variant such as Only 7 left. This is a much more effective way to advertise limited quantities.

You can also show the savings amount for each variant such SAVE $5.79 or SAVE 15% rather than showing the minimum or maximum savings across all variants.

If you’d like to try variant badges before anyone else, click here to contact us and we’ll add you to the early access list.

Show badges / banners per Placement

Coming soon to Flair, you’ll be able to choose exactly which badges and banners to show in a given Placement. This means you can show different badges and banners in different places in your shop.

Showing specific badges & banners should give you one more powerful tool to help your sales and promotions be even more successful.

If you’d like to try the badges / banners per Placement feature before anyone else, click here to contact us and we’ll add you to the early access list.

Boost your sales with Flair product badges
Flair product badges are designed to increase sales and conversions in your Shopify store by promoting urgency, scarcity, and social proof. You can use Flair to make more sales from your existing traffic — and stop losing sales immediately.