Burst Commerce Burst Commerce
Flair
Getting Started
Badges
Banners
Support

Colorblock + Flair theme guide for Shopify

By: Shopify
This guide includes instructions for setting up Flair badges and Flair banners in the Colorblock theme by Shopify.

How to edit your theme

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

Flair badges

On collection pages

  • Open snippets/card-product.liquid.

  • Find the line containing:

    <div class="card-information">

    And add this before it:

    Flair Gen 3
    <flair-badges product-id="{{ card_product.id }}"></flair-badges>
    Flair Gen 2
    <div data-flair-product-badge data-product-id="{{ card_product.id }}"></div>

  • Click Save.

On product pages

  • Open sections/main-product.liquid.

  • Find the line containing:

    </h1>

    And add this after it:

    Flair Gen 3
    <flair-badges product-id="{{ product.id }}"></flair-badges>
    Flair Gen 2
    <div data-flair-product-badge data-product-id="{{ product.id }}"></div>

  • Click Save.

Flair banners

  • Open layout/theme.liquid.

  • Find the line containing:

    <body>

    And add this after it:

    Flair Gen 3
    <flair-banners></flair-banners>
    Flair Gen 2
    <div data-flair-banner></div>

  • Click Save.

Additional Resources

  • Flair badge layout guide - additional badge options including: multi-promotions, multiple badges, spacing and alignment, variant badges, and more
  • Flair banner layout guide - additional banner options including: multi-promotions, spacing, and more