Variant Badges
You can use variant badges to show Flair badges based on a specific variant in your shop.
By default, Flair product badges will be based on all product variants. So, if you create a badge based on inventory, such as In Stock, Flair will show this badge if any variant has stock available.
With Flair variant badges, you can show the In Stock badge only if particular variant, such as size Small, has stock.
Flair variant badges can be used with the following conditions:
Enabling Variant Badges
Variant badges can be enabled within the Flair Badge Layout settings.
Variant Badge Refresh
You can also refresh your Flair badges whenever the selected variant changes.
So if a customer is viewing a t-shirt in size Small, and then selects size Medium, the Flair product badges can be dynamically refreshed based on the Medium shirt.
The variant badge refresh settings can be found within Flair under Settings > Variant Badge Refresh.
See below for details about the variant badge refresh settings available.
Badge Refresh
- Refresh on change - badges will be refreshed when the product option selector changes. This is the preferred way to listen for variant changes.
- Refresh on click - badges will be refreshed when an element on the page is clicked. Use this option only if your product form does not allow listening for changes.
Delay
The delay is used to add a brief pause before reloading the badges. The value is in milliseconds. Typically a value of 100 is a good default.
Parent Selector
Specify the CSS selector of the parent element, such as the product form.
The default value for the parent selector is:
form[action="/cart/add"]This value has been verified to work on all of the free Shopify themes.
Selector
Specify the CSS selector of the product options selectors.
The default value for the selector is:
.single-option-selectorThis value has been verified to work on all of the free Shopify themes.
The one exception is if you are using the Brooklyn theme, use this value instead:
.single-option-selector__radioTroubleshooting: Invalid Product Option Combos
Some Shopify themes display product option combinations that are not available for sale. For example, this could happen if you sold t-shirts with a Size and Color option, but not all sizes and color combinations are available.
If your Flair badges are not displaying properly when an invalid combination of options is selected, you can use the following fix.
The fix is commonly referred to as Linked Product Options. When this fix is applied, only valid combinations of options will be available for a given product. So whenever an option changes, all the other option lists will be modified to only include valid options.
Here are some resources you can use to apply the Linked Product Options fix to your theme: