Variants
On this page
Overview
Flair variant promotions target badges and banners to the variant a shopper selects, instead of the product as a whole. Display rules and dynamic text then use that variant's details, such as its inventory, price, and metafields.
Variant promotions are available on select Flair plans. Compare plans.
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!Add an inventory display rule 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 set up variant promotions
There are two steps to set up 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 and banners 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 display rule support
The following Flair display rules can 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
Frequently Asked Questions
How do I show a badge or banner for a specific variant?
Enable variant promotions on your layout, then add a display rule that targets the variant, such as a product option or variant metafield. Inventory, price, and sale price rules also use the selected variant.
Why doesn't my badge or banner change when I select a different variant?
Flair needs to know when the variant changes. Add a variant change trigger in Theme Triggers, and make sure variant promotions are enabled on your layout.
Why is my low stock badge not showing when a variant is low?
By default, Flair combines inventory across all variants. Enable variant promotions in your layout to target the selected variant instead.
Can dynamic text show the selected variant's sale price, savings, or inventory?
Yes. With variant promotions enabled, dynamic text shows the selected variant's sale price, savings percent or amount, inventory, and metafields.
Can I show variant badges or banners outside the product page, such as in the cart?
Yes. By default, variant promotions only work with the main product on product pages. Elsewhere, add the variant ID to the Flair web component.