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
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:
To center the badges vertically as shown in the screen shot above, you can use the following:
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
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-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.