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 the Variant badges setting 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 the Variant banners setting 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 variant refresh settings
The variant refresh feature is used to automatically reload any Flair promotions whenever the selected variant changes.
This is an advanced feature and the settings vary per theme. If you run into any issues, please contact support and we can set this up for you.
To configure the variant refresh settings:
- Visit Settings > Variant Refresh and click Edit.
Then enter the refresh settings for your theme (see popular theme settings below):
- Refresh on - select change or click. We recommend change unless your theme does not support this option.
- Delay in milliseconds - optionally enter a delay; 100 is a good default.
- Root selector - Enter the CSS selector of the root element (i.e. - the parent element to search within).
- Target selector - Enter the CSS selector of element to listen for the change or click event.
- Click Save
Verify variant refresh settings
Follow these steps to verify the variant refresh settings are working:
- Create a badge or banner with variant dynamic text support, and set the conditions so it shows on a product with variants.
- Visit the product page and change the selected variant.
- Verify the Flair badge or banner updates based on the selected variant.
Popular theme settings
Here is a list of variant refresh settings for some popular Shopify themes:
| Theme | Root Selector | Target Selector |
|---|---|---|
| Craft | :root | .product-variant-id |
| Colorblock | :root | .product-variant-id |
| Crave | :root | .product-variant-id |
| Dawn | :root | .product-variant-id |
| Origin | :root | .product-variant-id |
| Publisher | :root | .product-variant-id |
| Refresh | :root | .product-variant-id |
| Ride | :root | .product-variant-id |
| Sense | :root | .product-variant-id |
| Spotlight | :root | .product-variant-id |
| Studio | :root | .product-variant-id |
| Taste | :root | .product-variant-id |
| Trade | :root | .product-variant-id |
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