Yanka + Flair Shopify theme guide
By: p-themes
We've put together this guide for setting up Flair in the Yanka Shopify theme by p-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 snippets/product_page_1_description.liquid:
<h1 class="pt-title" itemprop="name">{{ product.title }}</h1>
<div data-flair-product-badge data-product-id={{ product.id }}></div>And add line 2.
On collection pages
Edit snippets/product-grid-item-design-1.liquid OR snippets/product-grid-item-design-2.liquid:
<h2 class="pt-title prod-thumb-title-color"><a href="{{ product.url | within: collection }}">{{ product.title }}</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