Flair Badge Layouts
You can use badge layouts to customize how your badges are displayed in your store.
Badge layouts can be found within Flair under Settings > Layouts.
Badge Layout Types
Flair supports two types of badge layouts: Automatic and Manual.
Automatic badge layouts are applied based on the page type within your store. You can choose from any of the following page types:
Note: There can be only one automatic badge layout for each page type.
You can also check the Use as default box to use this layout if no layout is specified.
Manual badge layouts give you a bit more control when applying layouts in your theme.
You can specify a manual badge layout by using the
flair_layout option to specify the layout name.
For example, if you have a badge layout called
My Layout, you can specify this layout like so:
You can show up to 5 badges at a time for each product, depending on your Flair plan.
Badges can be shown in a row:
Or in a column:
Use the gap to adjust the spacing between badges.
You can optionally add spacing around the badge layout: top, bottom, left and right.
The default position means the Flair badges will be shown within the normal flow of the page.
The absolute position, on the other hand, can be used to position the Flair badges on top of other elements in your shop, such as on top of your product images.
The absolute position requires the Flair Layout to be placed inside of a relatively positioned container.
You should be comfortable with CSS and HTML if you choose this option.
You can horizontally align badges to the left:
To the center:
Or to the right:
You can vertically align badges to the top:
Or to the bottom:
The z-index allows you to move this Layout above or below other items on your page. Elements with a higher z-index value will be placed on top of elements with a lower z-index value.
You can read more about z-index here.
You can use variant badges to show Flair badges based on a specific variant in your shop.
There are four possible variant badge settings you can choose from:
- Do not use variant badges - badges will be based on all product variants
- Use the selected variant, or the first available variant - badges will be based on the selected variant, or if there is no selected variant the first variant available for sale will be used
- Use the selected variant, or the first variant - badges will be based on the selected variant, or if there is no selected variant the first variant will be used
- Use the selected variant - badges will be based on the selected variant, or if there is no selected variant badges will be based on all product variants
You can read more about variant badges in the Flair Variant Badge docs.
If you are comfortable with CSS, you can add custom CSS to your badge layout. Here is some example CSS to set the margin to 10px and maximum width to 80%:
Migrating to Badge Layouts
In prior versions of Flair, badge options were passed in directly to the Flair snippet like so:
Going forward, badge layouts are the preferred way to customize your Flair badge setup.
The following badge snippet options are now deprecated and may be removed in a future version of Flair:
Switching to Automatic Layouts
The easiest way to move over to layouts is to use an automatic badge layout.
Automatic badge layouts can be applied based on the page type in your theme.
For example, let’s say you want to show 3 badges in a row on your product pages, and 1 badge on your collections and home page.
You can create two automatic badge layouts to handle each of these scenarios.
The product badges can use an automatic badge layout set to show on your
Product pages. You can then customize the display options for this layout to choose 3 badges displayed in a row.
The collection and home page badges can use another automatic badge layout set to show on your
If you run into any issues, you can always remove your automatic layouts, or set them to be
Manual, and Flair should revert back to your prior settings.