Flair badge and banner layouts
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:
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:
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.
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:
- Position your badges on top of things such as product images
- Horizontal Alignment:
- Vertical Alignment:
- 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:
- 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:
If you’d like to try out the new Flair Layouts instead, you can check out the Migrating to Layouts guide.