Burst Commerce Burst Commerce
Flair
Getting Started
Badges
Banners
Customization
Support

Avatar + Flair Shopify theme guide

By: Skup
We've put together this guide for setting up Flair in the Avatar Shopify theme by Skup. This page includes instructions for setting up Flair badges (aka labels or stickers) and Flair banners.

How to edit your theme

  • Visit Shopify Admin > Themes and click Actions > Edit code.

Install Flair product badges

On product pages

Edit sections/main-product.liquid:

There may be multiple h1 tags in this template. Edit the one with class 'd-md-block'

{%- when 'title' -%}
  <h1 class="product-title mb-3 font-3 d-none d-md-block">
    {{ product.title }}
  </h1>
  <div data-flair-product-badge data-product-id={{ product.id }}></div>

And add line 5.

On collection pages

Edit snippets/product-card.liquid:

<h3 class="product-card-title tw-font-semibold tw-text-xl tw-leading-tight tw-font-base">
    {{ product.title | link_to: link_url | replace: '<a', '<a class="focus-visible:tw-ring-2 focus-visible:tw-ring-btn-bg focus:tw-outline-none tw-text-color hover:tw-text-link"'  }}
</h3>
<div data-flair-product-badge data-product-id={{ product.id }}></div>

And add line 4.

Install Flair banners

Edit layout/theme.liquid:

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

And add line 2.

Additional Resources