Flair Preloading

1 min read
updated Jun 03, 2022

You can customize your Flair install to change how Flair loads promotions in your store.

You can use preloading to:

  • add Flair badges and banners to dynamically generated content, such as product recommendations and quick shop views
  • load Flair badges and banners as part of the initial page load without any content shifting

Preloading Flair product badges

To preload Flair product badges, change the data-flair-product-badge line in the Flair Theme Guides instructions from:

  <div data-flair-product-badge data-product-id={{ product.id }}></div>

To this variation:

  {% render 'flair-product-badges' product: product %}

Pay special attention to the name of the 'product' variable as this can change

You can also specify a badge layout like so:

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

Preloading Flair banners

To preload Flair banners, change the data-flair-banner line in the Flair Theme Guides instructions from:

  <div data-flair-banner></div>

To this variation:

  {% render 'flair-banners' %}

You can also specify a banner layout like so:

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