Baseline + Flair Shopify theme guide

By: Switch

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

Heads up! This guide is for Flair Gen 2. For assistance with Flair Gen 3 (now in early access), please contact support.

How to edit your theme

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

Install Flair product badges

On product pages

Edit snippets/product-form.liquid:

{{ product.title }}
  {%- if feature_product_section -%}
  </a>
  {%- endif -%}
</h1>
<div data-flair-product-badge data-product-id={{ product.id }}></div>

And add line 6.

On older versions edit sections/product.liquid

On collection pages

Edit snippets/product-grid-item.liquid:

<div class="{{ title_class }} break-words">
  {% if settings.product_grid_show_vendor and product.vendor != '' %}
    <p class="mb-1 text-{{ section_color }}-meta {% if sold_out %} line-through{% endif %}">{{ product.vendor }}</p>
  {% endif %}
  <p  aria-hidden="true" class="product-grid-title {% if sold_out %}text-{{ section_color }}-meta line-through{% endif %}">{{ product.title }}</p>
  <div data-flair-product-badge data-product-id={{ product.id }}></div>
</div>

And add line 6.

On older versions edit snippets/product-loop.liquid

Install Flair banners

Edit layout/theme.liquid:

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

And add line 2.

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