Burst Commerce Logo

Variant Badges

Updated: April 05, 2021

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 support the following variant attributes:

  • Inventory
  • Price
  • Sale Price

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:

1
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:

1
.single-option-selector

This 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:

1
.single-option-selector__radio

Troubleshooting: 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: