Turbo + Flair theme guide for Shopify

By: Out of the Sandbox
This guide includes instructions for setting up Flair badges and Flair banners in the Turbo 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:

<div class="feature_divider"></div>
<div data-flair-product-badge data-product-id={{ product.id }}></div>

And add line 2.

On older versions edit sections/product-template.liquid

On collection pages

There are multiple files you may need to edit depending on your theme setup

Edit snippets/product-thumbnail.liquid or snippets/product-info.liquid:

<span class="title" itemprop="name">{{ product.title }}</span>
<div data-flair-product-badge data-product-id={{ product.id }}></div>

And add line 2.

Install Flair banners

Edit sections/header.liquid:

<div data-flair-banner></div>
<header id="header" class="mobile_nav-fixed--{{ section.settings.fixed_header }}">

And add line 1.

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