Burst Commerce Burst Commerce

Flair badge and banner layouts

2 min read
created Sep 10 2020

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

Flair Layouts make it easy to display your badges and banners exactly how you'd like throughout your store. You can use Layouts 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 Layouts in your store.

In this post, we'll discuss:

Layouts Overview

So what exactly are Flair Layouts?

Layouts 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 Layouts have you covered.

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

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

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

I think you'll find Flair Layouts 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 Layouts

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

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

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

You can use Banner Layouts to configure:

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

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

Migrating to Layouts

Prior to Flair Layouts, options were passed directly to the Flair snippet like so:

{% 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 Layouts instead, you can check out the Migrating to Layouts guide.

Products using Flair badges

Learn How to Double (2X) Your Shopify Sales with Product Labels

  • Boost sales by highlighting key features with product badges
  • Increase conversions by promoting scarcity, urgency and social proof
  • Sell more with targeted promotions to increase average order sizes

See the guide

On this page