How to show Flair on product pages

Apr 08, 2026
On this page

This guide shows how to add Flair badges and banners to your product pages.

Before you start

  • Make sure Flair is enabled in your theme
  • Duplicate your theme so you can safely make changes

To learn more, see How to edit your Shopify theme.

Most Shopify themes support app blocks on product pages, especially modern themes. New to app blocks? Check out our app block guide.

  1. Open the theme editor and navigate to a product page.
  2. Click Add block and select Flair badges or Flair banners.
  3. Drag the block to the position where you want it to appear.
  4. Click Save.
  5. Verify Flair is working on your live store.
Flair badges app block on a product page in the theme editor

If your theme doesn't support app blocks on product pages, use the manual method below.

Add Flair manually

This section uses badges as the example, but the same approach works for banners using the <flair-banners> element.

Find the correct template file

Open the Shopify theme code editor. Look for your product page template. The most common files:

  • snippets/product.liquid
  • snippets/product-info.liquid
  • snippets/product-template.liquid
  • sections/main-product.liquid
  • sections/product-template.liquid

See our theme-specific instructions for popular themes.

Insert the Flair code snippet

Search the file for </h1>. This is where the product title ends and is the most common anchor point. Add the following tag right after it:

<flair-badges product-id="{{ product.id }}"></flair-badges>

Save and test

Click Save. Then visit a product page on your store to verify the badges are displaying correctly.

Looking for Gen 2 instructions? See How to show Flair on Gen 2.

Theme-specific instructions

The table below lists the template file and installation location for popular Shopify themes. Find your theme to see exactly which file to edit and where to add the Flair code.

Theme File Notes
Dawn, Colorblock, Craft, Crave, Origin, Publisher, Refresh, Ride, Sense, Spotlight, Studio, Taste, Trade sections/main-product.liquid Find the line containing </h1> and add the Flair code after it.
Prestige snippets/product-info.liquid Find the line containing </h1> and add the Flair code after it.
Impulse, Motion, Streamline snippets/product-template.liquid Find the line containing </h1> and add the Flair code after it.
Empire snippets/product.liquid Find the line containing {% when 'vendor' %} and add the Flair code before it.
Warehouse snippets/product-meta.liquid Find the line containing </h1> and add the Flair code after it.
Symmetry sections/main-product.liquid Find the line containing class="title-row" and add the Flair code before it.
Debut, Fashionopolism, Minimal, Responsive, Supply, Venture sections/product-template.liquid Find the line containing </h1> and add the Flair code after it.
Focal, Impact snippets/product-info.liquid Find the line containing </h1> and add the Flair code after it.
Broadcast sections/product.liquid Find the line containing render 'product-title' and add the Flair code after it.
Expanse snippets/block-title.liquid Find the line containing </h1> and add the Flair code after it.
Reformation snippets/product-information.liquid Find the line containing </h1> and add the Flair code after it.
District, Blockshop, Brooklyn, Canopy, Envy, Testament, Boost, Venue sections/main-product.liquid Find the line containing </h1> and add the Flair code after it.
Superstore, Atlantic, Turbo, Flex snippets/product.liquid Find the line containing </h1> and add the Flair code after it.
Showcase sections/main-product.liquid Find the line containing {%- when 'title' -%} and add the Flair code after it.
Icon sections/main-product.liquid Find the line containing {% if show_vendor %} and add the Flair code before it.
Retina snippets/product.liquid Find the line containing class="product__title" and add the Flair code before it.
Ella snippets/product-title.liquid Add the Flair code at the end of the file.
Pipeline, Mr Parker snippets/product-title.liquid Find the line containing </h1> and add the Flair code after it.
Grid snippets/product-form-content.liquid Find the line containing </h1> and add the Flair code after it.
Flow sections/template--product.liquid Find the line containing </h1> and add the Flair code after it.
ShowTime sections/s_product.liquid Find the line containing </h1> and add the Flair code after it.
Wokiee snippets/product_page_1_description.liquid Find the line containing </h1> and add the Flair code after it.
Navigation