Superstore + Flair theme guide for Shopify

By: Out of the Sandbox

This guide includes instructions for setting up Flair badges and Flair banners in the Superstore theme by Out of the Sandbox.

How to edit your theme

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

Install Flair product badges

On product pages

Edit snippets/product.liquid:

{% if template == 'index' %}
  <h2 class="product-title">
{% else %}
  <h1 class="product-title">
{% endif %}
  {% unless onboarding %}
    {{ product.title }}
  {% else %}
    {{ 'onboarding.product.title' | t }}
  {% endunless %}
{% if template == 'index' %}
  </h2>
{% else %}
  </h1>
{% endif %}
<div data-flair-product-badge data-product-id={{ product.id }}></div>

And add line 16.

On collection pages

Edit snippets/product-grid-item.liquid:

<h2 class="productitem--title">
  <a href="{{ product_link }}" data-product-page-link>
    {{ product_title }}
  </a>
</h2>
<div data-flair-product-badge data-product-id={{ product.id }}></div>

And add line 6.

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

Getting Started

Badges

Banners

Support