Flair JavaScript API

You can use the Flair JavaScript API for custom integrations. The JavaScript API allows you to fetch Flair product badges and banners dynamically using JavaScript.

FlairApp.getProductBadges

The FlairApp.getProductBadges function can be used to fetch badges for one or more products.

Options

This function supports the following options:

• ids - (optional) An array of Shopify product ids; defaults to the current product ID
• layout - (optional) The Flair badge layout name

Example request

1
2
3
4
5
6

FlairApp.getProductBadges({
  "ids" : [ 123, 456 ],
  "layout" : "my layout"
}).then(function(result) {
  console.log(result);
})

Example response

1
2
3
4
5
6
7
8

<div id="shopify-section-flair-product-badges" class="shopify-section">
  <div data-flair-product-badge data-product-id="123" data-layout="my layout">
    *** PRODUCT 123 BADGE HTML ***
  </div>
  <div data-flair-product-badge data-product-id="456" data-layout="my layout">
    *** PRODUCT 456 BADGE HTML ***
  </div>
</div>

The response is returned as an HTML String, and each set of Flair product badges will be wrapped in a DIV with the following attributes:

• data-flair-product-badge - indicates the DIV contains Flair product badges
• data-product-id - the Shopify product ID
• data-layout - (optional) The Flair badge layout name, if specified

FlairApp.getBanners

The FlairApp.getBanners function can be used to fetch a Flair banner.

Options

This function supports the following option:

• layout - (optional) The Flair banner layout name

Example request

1
2
3
4
5

FlairApp.getBanners({
  "layout" : "my layout"
}).then(function(result) {
  console.log(result);
})

Example response

1
2
3
4
5

<div id="shopify-section-flair-banners" class="shopify-section">
  <div data-flair-banner data-layout="my layout">
    *** BANNER HTML ***
  </div>
</div>

The response is returned as an HTML String, and the the Flair banner will be wrapped in a DIV with the following attributes:

• data-flair-banner - indicates the DIV contains a Flair banner
• data-layout - (optional) The Flair banner layout name, if specified

FlairApp.refreshProductBadges

The FlairApp.refreshProductBadges function can be used to load Flair product badges on the page.

You can use this to load Flair badges within dynamic content such as:

• product recommendations
• quick shop views
• custom integrations

Flair badge HTML

You can add Flair product badges anywhere on the page by adding the following HTML:

1

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

Here’s a breakdown of the data attributes:

• data-flair-product-badge - indicates the DIV contains Flair product badges
• data-product-id - the Shopify product ID
• data-layout - (optional) The Flair badge layout name, if specified

Example

To refresh all Flair badges:

1

FlairApp.refreshProductBadges()

FlairApp.refreshBanners

The FlairApp.refreshBanners function can be used to load all Flair banners on the page.

You can use this to load Flair banners for:

• dynamic content sections
• custom integrations

Flair banner HTML

You can add Flair banners anywhere on the page by adding the following HTML:

1

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

Here’s a breakdown of the data attributes:

• data-flair-banner - indicates the DIV contains a Flair banner
• data-layout - (optional) The Flair banner layout name, if specified

Example

To refresh all Flair banners:

1

FlairApp.refreshBanners()

Need any help?

If you have any questions about using the Flair JavaScript API, feel free to contact us.