Burst Commerce Burst Commerce
Flair
Getting Started
Badges
Banners
Support

Grid + Flair theme guide for Shopify

By: Pixel Union
This guide includes instructions for setting up Flair badges and Flair banners in the Grid theme by Pixel Union.

How to edit your theme

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

Install Flair product badges

On product pages

Edit snippets/product-form-content.liquid:

{{ 'products.product.onboarding.title' | t }}
  {% endif %}
</h1>
<div data-flair-product-badge data-product-id={{ product.id }}></div>

And add line 4.

On collection pages

Edit snippets/product-list-item.liquid:

<h2 class="product-list-item-title"><a href="{{ item.url | within: collection }}">{{ item.title }}</a></h2>
<div data-flair-product-badge data-product-id={{ item.id }}></div>

And add line 2.

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