Flair Variants
Overview
Promote specific variants with badges and banners.
What are variant promotions?
Let's say you want to promote scarcity and show an Only X left! badge on items with less than 10 available.
In Flair, you would create a badge with this dynamic text:
Only {{ inventory_total}} left!With a inventory condition set to between 1 and 9.
For this example, suppose you have a product with two variants:
- A blue t-shirt with 7 items remaining
- A red t-shirt with 3 items remaining
Without Flair variant promotions enabled:
The badge would not show because the inventory is combined for a total of 10.
With Flair variant promotions enabled:
The badge will dynamically update based on the selected variant:
- The blue t-shirt will display:
Only 7 left! - The red t-shirt will display:
Only 3 left!
How to setup variant promotions
There are two steps to setup Flair variant promotions:
Enable variant promotions
Flair variants can be enabled within Flair layouts and also directly on Flair web components.
On badge layouts
To enable badge variant promotions for a badge layout:
- Visit Badges and click Layouts.
- Create or edit a badge layout, and set Variant badges to Enabled.
- Click Save
On banner layouts
To enable variant promotions for a banner layout:
- Visit Banners and click Layouts.
- Create or edit a banner layout, and set Variant banners to Enabled.
- Click Save
On web components
By default, Flair variants only work with the main product on product pages.
You can enable variant badges on other pages, such as the cart page, by specifying the variant-id on the Flair web components like so:
<flair-badges product-id="123" variant-id="456"></flair-badges>Configure a variant change trigger
You can use Theme Triggers to watch for variant and cart changes to automatically refresh Flair promotions.
See the Theme Triggers guide for more details.
Variant condition support
The following Flair conditions are able to target specific variants:
- Inventory in stock, out of stock, between
- Product options
- Price
- Sale price
- Variant metafield
Variant dynamic text support
The following Flair dynamic text is able to display specific variant details:
- Discounted price
- Inventory total
- Price
- Sale amount
- Sale percent
- Variant metafield