How to upgrade Flair to Gen 3
On this page
Visit Flair > Settings > Flair Generation and choose Gen 3 (recommended).
Step 1. Preview Gen 3 in your store
Click Preview Gen 3 to open your store with Gen 3 active. You can also preview manually by adding ?_flair_gen=3 to any store URL.
Look for the 'Flair Gen 3 preview' badge to confirm it's active. The preview is only visible to you. Click the badge or close the tab to end it.
Step 2. Review your preview
Check a few product and collection pages to make sure everything looks correct. If you added custom CSS to your theme, review it and reapply if needed.
If any of the following apply to your store, Flair will flag the affected badges, banners, or layouts for review.
Shop metafields are no longer supported
Gen 3 doesn't support shop metafield rules. Any badges or banners using these rules will be unpublished when you switch. You can update their rules and republish afterward.
Inventory conditions updated automatically
Gen 3 simplifies how inventory rules work. "In stock" and "between" conditions now show strictly based on available quantity. "Out of stock" conditions have a new "available for sale" setting that follows your Shopify configuration.
Worth a quick check to confirm affected badges still display correctly.
Custom CSS in layouts is no longer supported
Gen 3 doesn't support custom CSS on badge or banner layouts. Customizations can be applied using CSS custom properties instead.
Variant settings have been simplified
Variant targeting is now either enabled or disabled. Previous options have been consolidated into a single setting. Your existing badges will carry over as enabled.
No action needed, but worth a look to confirm they display correctly.
Step 3. Publish Gen 3
Once everything looks correct, click Save & Publish. Gen 3 will go live for all shoppers and the preview will end.
Update your theme for Gen 3
Gen 3 is backward compatible with Gen 2 theme changes, so your existing setup will continue to work. For the most performant and up-to-date approach, we recommend switching to Flair web components.
Before you start
- Make sure Flair is enabled in your theme
- Duplicate your theme so you can safely make changes
To learn more, see How to edit your Shopify theme.
Update Flair badges
Search your theme files for flair-product-badge. You may find a DIV version like this:
<div data-flair-product-badge data-product-id="{{ product.id }}"></div>Or a snippet version like this:
{% render "flair-product-badges" product: product %}Replace each occurrence with the Flair Gen 3 web component like this:
<flair-badges product-id="{{ product.id }}"></flair-badges>Update Flair banners
Search your theme files for flair-banner. You may find a DIV version like this:
<div data-flair-banner></div>Or a snippet version like this:
{% render "flair-banners" %}Replace each occurrence with the Flair Gen 3 web component like this:
<flair-banners></flair-banners>