Sunrise + Flair Shopify theme guide
By: Rawsterne Web Design & Illustration
We've put together this guide for setting up Flair in the Sunrise Shopify theme by Rawsterne Web Design & Illustration. 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-template.liquid:
<h1 class="page-title">{{ product.title | escape}}</h1>
<div data-flair-product-badge data-product-id={{ product.id }}></div>And add line 2.
On collection pages
Edit snippets/product-loop.liquid:
<div data-flair-product-badge data-product-id={{ product.id }}></div>
<span class="product-title">And add line 1.
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