Flair multiple product badge support

By popular demand, I'm pleased to share the details of the latest Flair release unofficially dubbed the Multiple badge support release.

The multiple badge feature is unique in that it was the most requested feature for something I initially didn't think should be a feature of Flair.

Why did I not think Flair should support showing multiple badges for a single product?

Well for starters I believe less is more when it comes to capturing your customer's attention. If you have a lot of things on your shop competing for your customer's attention, they may end up also completing with each other and therefore not be as effective.

In addition, one of my primary goals with Flair badges was to make the badges stand out, but not interfere with the ability for your customers to shop for your products in your store. This is also why I am a firm believer that badges should not go on top of your product images, since they could interfere with your customer's ability to see your products.

However, over the past few months I've had lots of Flair customers writing in asking for support to display more than one product badge for a given Shopify product.

Like this one from Geoff:

I'm just wondering when you think the multiple badge product feature will be available?

Or this one from Ron:

I really like the app and am using it quite a lot. My question is; how can I get 2 or more badges to display at once.

And also this one from Eric:

Also, If i want to have a badge of "Clearance" and "Sale" on the same page can I do that?

Given the number of times people have asked for this, and the fact that I can see some great use cases for it, I decided to reconsider my initial stance.

With this latest Flair release, I'm happy to report that you can now show more than one Flair product badge at the same time.

This means you can now show badges such as Limited Quantity in addition to On Sale or Free Shipping.

Promoting these additional attributes of your products should help you convert even more sales in your Shopify store.

Multiple badges in action

Let's take a look at how multiple Flair badges look shall we?

Multiple badges — separate lines

You can specify the maximum number of badges to show when including the Flair badge snippet to your theme.

By default, badges will show on separate lines but you can change that (see the inline section below).

Flair snippet include syntax

You can change your theme to support multiple badges by passing in the following options when you include the snippet:

{% include 'flair-product-badges', with flair_badge_max: 2 %}

To center the badges vertically as shown in the screen shot above, you can use the following:

{% include 'flair-product-badges', with flair_badge_max: 2, flair_css_class: 'flair-center flair-space-md' %}

Showing badges on separate lines works best on collection pages where horizontal space is limited. I'd recommend using caution when using multiple Flair badges on collection pages though since collections typically have a lot going on already.

Multiple badges — inline

You can also show Flair badges side by side (aka - inline) as shown here. The inline badge option works well on product pages where you have more room.

Flair snippet include syntax

{% include 'flair-product-badges', with flair_badge_max: 2, flair_css_class: 'flair-inline flair-space-md' %}

Additional badge spacing options

In addition to the above options, you can also customize how much space shows around each badge by using one of the following flair_css_class choices:

• flair-space-sm — 5px margins around the Flair badges
• flair-space-md — 10px margins around the Flair badges
• flair-space-lg — 20px margins around the Flair badges

There are additional flair-space-* variations to limit the space to particular sides of the badges. You can see a full list of Flair spacing classes by referring to the snippets/flair-product-badges.liquid in your theme.

Existing Flair customers — how to enable multiple Flair badge support

If you are an existing Flair customer, you may need to have Flair update your snippet to enable multiple badge support.

The easiest way to do this is to visit your Flair settings and do one of the following:

• Reorder your badges
• Create a new badge
• Edit an existing badge

This will cause Flair to update your Flair snippet so you have the latest version which includes multiple badge support.