Flair Gen 3 Upgrade Guide

4 min read
updated Oct 03 2024

Overview

This guide contains everything you need to know about upgrading to Flair Gen 3.

Upgrade Instructions

Heads Up! If you run into any issues during the upgrade, or need a hand, switch back to Flair Gen 2 and contact support so we can assist you.

Grant Flair data access if needed

Flair Gen 3 requires read-only access to some additional Shopify data (the Storefront APIs).

  • Visit Flair > Settings > Flair Generation.
  • If you see the following "Additional Shopify data access is needed" message, click the link and follow the instructions to grant Flair access to the new data. Flair data access

Upgrade to Flair Gen 3

  • Visit Flair > Settings > Flair Generation and click Edit .

  • Choose Flair Gen 3 (recommended).

  • Review the Flair Gen 3 changes (if any)

    Some features have changed in Flair Gen 3 (see the full list of changes). Review any impacted items before continuing. Flair review changes

  • Click the link to preview Flair Gen 3 in your store: Flair preview

  • Verify the Flair Gen 3 preview is running by viewing the browser console (in Chrome this is located under View > Developer > JavaScript Console) and you should see this message: Flair Gen 3 preview console message

  • Review your Flair promotions in your store to make sure they are displaying properly.

  • Once everything looks good, click Save & Publish to complete the upgrade.

How to cancel the Flair Gen 3 preview

  • You can cancel the Flair Gen 3 preview by clicking this link at the bottom of the Flair generation form:

    Cancel Flair Gen 3 preview

    Otherwise, the preview will expire automatically after 24 hours.

Flair Gen 3 changes in behavior

We made every effort to maintain backward compatibility. However, a handful of features have been modified or are no longer available in Flair Gen 3.

Here is a list of the possible Flair Gen 3 changes:

Shop metafields are no longer supported.

Shopify restricts access to shop metafields using their latest tools (Storefront APIs), so Flair can not access them.

Impact

  • After the upgrade, badges and banners using shop metafield rules or dynamic text will be unpublished.

The inventory rule availability option has changed.

The inventory rule availability options 'allow overselling' and 'can sell out' have been removed. The ‘out of stock’ rule has two new availability options: 'available for sale' and 'not available for sale'.

Impact

  • Inventory 'in stock' and 'between' badges will no longer support an availability option.
  • Inventory 'out of stock' badges will be modified from ‘allow overselling’ → 'available for sale' and from ‘can sell out’ → 'not available for sale'.

Custom CSS in layouts is no longer supported.

Custom CSS in badge and banner layouts is no longer supported. Flair now supports CSS custom properties to apply customizations.

Impact

  • Custom CSS will no longer be applied to badge and banner layouts, which may impact their display.

The variant badge setting has changed.

Previously, the variant badge setting supported multiple options for selecting the current variant, which allowed a fallback for some legacy themes. This should not be necessary going forward, so we’ve simplified this so variant badges are either ‘enabled’ or ‘disabled’.

Impact

  • After the upgrade, the variant badge settings 'use selected variant, or first available' and 'use selected variant, or first variant' will be set to 'enabled’.

The Gen 2 JavaScript API is no longer supported.

The Flair Gen 2 JavaScript API was used for custom Flair implementations. Flair Gen 3 provides web components which you can use for customizing your Flair setup going forward.

Impact

The following JavaScript functions will stop working after the upgrade:

  • FlairApp.getProductBadges
  • FlairApp.getProductBadgesMulti
  • FlairApp.getBanners
  • FlairApp.refreshBanners

Note: The FlairApp.refreshProductBadges function will continue to work in Flair Gen 3 to simplify the upgrade for existing integrations. This method is deprecated and will be removed in a future Flair version.

Need a hand?

If you have any questions or need help with the Flair upgrade process, contact us anytime and we'd be happy to assist you.