Flair Preloading

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 %}

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' %}