Add Flair to Responsive Shopify themes
By: Out of the Sandbox
This guide includes instructions for setting up Flair badges and Flair banners in the Responsive Shopify theme made by Out of the Sandbox.
How to edit your theme
- Visit Shopify Admin > Themes and click ... > Edit code.
Add Flair badges
On collection pages
-
Open snippets/product-thumbnail.liquid.
-
Find the line containing:
</h3> -
And add this after it:
Flair Gen 3<flair-badges product-id="{{ product.id }}"></flair-badges>Flair Gen 2<div data-flair-product-badge data-product-id="{{ product.id }}"></div> -
Click Save.
On product pages
-
Open sections/product-template.liquid.
-
Find the line containing:
</h1> -
And add this after it:
Flair Gen 3<flair-badges product-id="{{ product.id }}"></flair-badges>Flair Gen 2<div data-flair-product-badge data-product-id="{{ product.id }}"></div> -
Click Save.
Resources
- Use a Flair badge layout to customize your badges, including: multiple badges, spacing and margin, variants, and more.
- Check out the Flair development guide for advanced badge customizations.