Turbo + Flair Shopify theme guide
By: Out of the Sandbox
We've put together this guide for setting up Flair in the Turbo Shopify theme by Out of the Sandbox. 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.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