ShowTime + Flair Shopify theme guide
By: Mile High Themes
We've put together this guide for setting up Flair in the ShowTime Shopify theme by Mile High Themes. This page includes instructions for setting up Flair badges (aka labels or stickers) and Flair banners.
How to edit your theme
- Visit Shopify Admin > Themes and click Actions > Edit code.
Install Flair product badges
On product pages
Edit sections/product.liquid:
<h5>{{ 'products.general.description' | t }}
<div data-flair-product-badge data-product-id={{ product.id }}></div>
</h5>And add line 2.
You need to place Flair in between the h5 tags.
On collection pages (grid view)
Edit snippets/product-loop.liquid:
<h5><a href="{{ product.url | within: collection }}">{{ product.title | escape }}</a></h5>
<div data-flair-product-badge data-product-id={{ product.id }}></div>And add line 2.
On collection pages (list view)
Edit snippets/product-loop-list.liquid:
<h2><a href="{{ product.url | within: collection }}">{{ product.title | escape }}</a></h2>
<div data-flair-product-badge data-product-id={{ product.id }}></div>And add line 2.
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
- Flair preloading guide - learn how to customize how Flair badges and banners are loaded to work better with your theme
- Product badge examples - a complete product badge guide with real-world examples