Flair Settings

Updated: October 15, 2020

This page provides an overview of the settings available within Flair.

Master Switch

The Master Switch setting makes it easy to quickly enable or disable Flair in your shop.

If you need to remove all Flair badges and banners in your store, you can click the Disable Flair button.

Then when you’re ready to start showing your Flair badges and banners again you can click the Enable Flair button.

Billing Plan

If you’d like to take advantage of additional Flair features, you can upgrade your Flair plan under the Billing Plan section.

Your can upgrade or downgrade your Flair plan at any time.

Layouts

You can customize how badges and banners are displayed in your store by using Flair Layouts.

Check out the Flair Layouts guide to learn more about the available options and how to use them.

Dynamic Badge Refresh

This section allows you to configure how badges are refreshed when variants changes.

For example, if a customer is viewing a t-shirt in size Small, and then selects to size Medium, the Flair product badges will be dynamically refreshed to match the Medium shirt.

Badge refresh is only supported for product pages and only if variant badges enabled in your layout.

If you need a hand getting this working, feel free to contact us and we’ll be happy to help.

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.

However, if you are using the Brooklyn theme, use this value instead:

1
.single-option-selector__radio

Javascript API

You can use the Flair JavaScript API to build custom or 3rd party app integrations.

Check out the Flair JavaScript api page to learn more.