How to install Flair in your theme

Add Flair badges and banners where you want shoppers to see them. Choose a guide below for your page type or app, then customize the appearance and check your setup.

Before you start, enable Flair in your theme. If you haven't created a badge or banner yet, follow How to get started with Flair first.

Choose where Flair appears

These guides cover app blocks where your theme supports them, plus manual installation when you need to edit theme code.

• Product pages: add badges and banners near the product title or other product details.
• Collection, home, and search pages: show promotions in product grids, including featured collections and recommendations.
• Product images: position badges over product images on product pages and in product grids.

For help with the theme editor, app blocks, or editing code, see How to edit your Shopify theme.

Install Flair with another app

If another app controls your pages or product grids, use its integration guide to add Flair.

• Page builders: PageFly, GemPages, and Shogun.
• Search and filtering: Boost, Searchanise, Globo, SoBooster, Findify, and Visely.

Customize your installation

• Customize Flair with CSS: adjust font sizes, alignment, text wrapping, and visibility on mobile or desktop.
• Web components reference: use component attributes and CSS custom properties for more control over badges and banners in your theme code.

Check your installation

Follow How to verify your Flair setup to check your store's pages, filters, variant changes, and mobile display.

If something isn't working, see How to troubleshoot Flair or contact support.