Burst Commerce Burst Commerce
Flair
Getting Started
Badges
Banners
Support

Flair Developer Guide (Gen 2)

2 min read
updated Sep 19 2024

This guide contains everything you need to know to customize your Flair installation.

Heads up! This is the developer guide for Flair Gen 2.

Flair badges

Add Flair product badges to any product by inserting this HTML:

<div data-flair-product-badge data-product-id="12345" data-layout="my layout"></div>

Options

  • data-product-id - the Shopify product ID
  • data-layout - (optional) The Flair badge layout name

Badge loading

If the Flair badge HTML is present on the initial page load, Flair will load the badges automatically.

For Flair badge HTML inserted via JavaScript after the page loads, use the FlairApp.refreshProductBadges method to load the badges:

FlairApp.refreshProductBadges()

Badge preloading

In some scenarios, it makes sense to preload the Flair badges so they are loaded when Shopify renders your theme page. This typically applies to themes that use JavaScript to dynamically load product information, such as on product recommendations and collection filters.

To use preloading, use this code instead of the Flair badge HTML listed above:

{% render "flair-product-badges" product: product, flair_layout: "my layout" %}

Options

  • product - the Shopify product; The 'product' variable name may change depending on your theme.
  • flair_layout - (optional) The Flair badge layout name

Flair banners

Add Flair banners to any page by inserting this HTML:

<div data-flair-banner data-layout="my layout"></div>

Options

If the Flair banner HTML is present on the initial page load, Flair will load the banners automatically.

For Flair banner HTML inserted via JavaScript after the page loads, use the FlairApp.refreshBanners method to load the banners:

FlairApp.refreshBanners()

In some scenarios, it makes sense to preload the Flair banners so they are loaded when Shopify renders your theme page. This typically applies to themes that use JavaScript to dynamically load product information, such as on product recommendations and collection filters.

To use preloading, use this code instead of the Flair banners HTML listed above:

{% render "flair-banners" flair_layout: "my layout" %}

Options