Installing the Flair product badge snippet in your Shopify theme

Looking for instructions for how to install the Flair product badges snippet in your Shopify theme?

Well you've come to the right place.

Before you get started...

Make sure you've created at least one Flair badge so you have something to work with.

You can just create one badge in your Flair settings. It helps if you create a badge that you know will show up on a particular product so you can verify your Flair setup.

The Flair snippet is stored in your theme at snippets/flair-product-badges.liquid and will be updated everytime you change your Flair badges.

How to open your theme in the Shopify Theme Editor

From your Shopify admin, go to Online Store > Themes.

Find the theme you want to edit and click Actions, then click Edit code.

How to follow the snippet install instructions

To add Flair to your theme, you typically just need to add an include line where you'd like the badges to show similar to this one:

  {% include 'flair-product-badges' %}

There are detailed instructions for many popular Shopify themes below.

Let's walk through an example set of instructions like what you might see for your theme.

Example Flair instructions:

For product pages

Edit sections/product-template.liquid:

    <h1 itemprop="name">{{ product.title }}</h1>
    {% include 'flair-product-badges' %}

And add line 2.

In this example, the For product pages indicates where in your theme the badges will be shown. You can add Flair to your theme anywhere you show product info including: products, collections, search results and the shopping cart.

So based on these instructions, to add Flair to the product pages for this theme you would:

1
Open the file sections/product-template.liquid in the Shopify Theme Editor.
2
Search for a line similar to this one:
<h1 itemprop="name">{{ product.title }}</h1>
	

NOTE: The line you are searching for may not match exactly.

3
Insert the Flair snippet include line:
{% include 'flair-product-badges' %}
	
4
Then save the file and verify your change.

You can verify your change by reloading the corresponding page in your shop.

If you run into any issues, you can always revert your change in the Shopify Theme Editor.

Flair snippet options

In addition to the instructions below, there are several additional Flair snippet options available for things like multiple badge support and badge spacing and alignment.

You can read more about the Flair snippet options here.

Flair snippet instructions for each Shopify Theme

We've put together instructions for many popular Shopify themes.

If you can't find your theme, see if your theme is similar to one of these. Many themes follow a similar pattern.

Feel free to contact Tom via the Contact Us link at the bottom of this page if you run into any issues.

Choose your theme below:


Activ8 by Activ8

For product pages

Edit templates/product.liquid:

<h1 itemprop="name">{{ product.title | escape}}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

  {% include 'flair-product-badges' %}
  <span class="product-title">
     {{ product.title | escape }}

And add line 1.


Atlantic by Pixel Union

For product pages

Edit snippets/product.liquid:

<h1 class="title">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-item.liquid:

<div class="product-card-details">
  ...
  {% include 'flair-product-badges' %}
</div>

And add line 3.


Booster Premium by Booster Theme

For product pages

Edit sections/product-template.liquid:

<h1 itemprop="name" class="product-single__title heading">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit the following files:

  • snippets/product-card-grid.liquid - for grid view
  • snippets/product-card-list.liquid - for list view
{% include 'flair-product-badges' with flair_css_class: 'flair-space-sm' %}
<div class="grid-view-item__meta">
  {% include 'product-price' %}
</div>

And add line 1.


Boundless by Shopify

For product pages

Edit sections/product-template.liquid:

<h2 itemprop="name">{{ product.title }}</h2>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

  {% include 'flair-product-badges', with flair_css_class: 'flair-center flair-space-md' %}
  <span class="image-wrapper">

And add line 1.


Brooklyn by Shopify

For product pages

Edit sections/product-template.liquid:

<h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

  <a href="{{ product.url | within: collection }}" class="grid-product__meta">
    {% include 'flair-product-badges' %}
    <span class="grid-product__title">{{ product.title }}</span>

And add line 2.


Canopy by Clean Themes

For product pages

Edit templates/product.liquid:

<h1 class="product-title" ... ></h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-block.liquid:

  <div class="{% if settings.prod_block_layout contains 'beside' %}ft ftw ft-nm{% endif %}">
    <div class="ftr">
      <a class="title ftc" href="{{ url }}">{{ product.title }}</a>
    ...
    </div>
  </div>
  {% include 'flair-product-badges' %}

And add line 7.


Capital by a good machine

For product pages

Edit snippets/product-title.liquid:

<h1 class="page-header simple product-title {{ show_at }}" id="product-title" data-product-title>{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-block.liquid:

  <div class="product-item-details">
    {% include 'flair-product-badges' with product: item %}

And add line 2.


Cypress by Pixel Union

For product pages

NOTE: There are two places to edit, one for desktop and one for mobile views

Edit templates/product.liquid:

For desktop:

<div class="product-details desktop">
  {% include 'flair-product-badges' %}

Add line 2.

For mobile:

<div class="product-details mobile">
  {% include 'flair-product-badges' %}

Add line 2.

For collection pages

Edit snippets/product-list-item.liquid:

<p class="title"><a href="{{ item.url | within: collection }}">{{ item.title }}</a></p>
{% include 'flair-product-badges', with product: item %}

And add line 2.


Debut by Shopify

For product pages

Edit sections/product-template.liquid:

 <h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-card-grid.liquid:

 <div class="grid-view-item__meta">
    {% include 'product-price' %}
 </div>
 {% include 'flair-product-badges' %}

And add line 4.


District by Style Hatch

NOTE: The product page you need to edit varies depending on which version of District you have.

For product pages - prior to v3.0

Edit sections/product-template.liquid:

<h1 itemprop="name">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For product pages - v3.0 and above

Edit snippets/product-form.liquid:

{% form 'product', product %}
  <div class="product-title">
  ...
  </div>
{% include 'flair-product-badges' %}

And add line 5.

For collection pages

Edit snippets/product-grid-item.liquid:

{% include 'flair-product-badges' %}
<div class="product-title">
        <a href="{{ product.url | within: collection }}" class="title">{{ product.title }}</a>

And add line 1.


Ecom Turbo by Shopify

For product pages

Edit sections/product-template.liquid:

<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

NOTE: There are three different collection snippets for this theme

Edit the following files:

  • snippets/product-card-grid.liquid
  • snippets/product-card-grid-collection.liquid
  • snippets/product-card-grid-related.liquid
<img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width }}" alt="{{ product.featured_image.alt }}">
{% include 'flair-product-badges', with flair_css_class: 'flair-center flair-space-sm' %}

And add line 2.

The above will show Flair badges centered. If you'd like them left aligned, use this Flair include instead:

    {% include 'flair-product-badges' %}

Ella by Halothemes

For product pages

Edit sections/product-template.liquid:

<h2 itemprop="name">
...
</h2>
{% include 'flair-product-badges' %}

And add line 4.

For collection pages

Edit snippets/product-grid-item.liquid:

<div class="product-bottom">
  {% include 'flair-product-badges' %}

And add line 1.


Empire by Pixel Union

For product pages

Edit snippets/product.liquid:

<h1 class="product-title">
  ...
</h1>
{% include 'flair-product-badges' %}

And add line 4.

For collection pages

Edit snippets/product-grid-item.liquid:

<h2 class="productitem--title">
  ...
</h2>
{% include 'flair-product-badges' %}

And add line 4.


Envy by WeTheme

For product pages

Edit sections/product-template.liquid:

<h1 class="custom-font product-description-header">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit sections/collection-template.liquid:

<div class="hp-title">
  ...
</div>
{% include 'flair-product-badges' %}

And add line 4.


Etheme by Yourstore

For product pages

Edit snippets/product-page-description.liquid:

<div class="product-info__title">
  <h2>{{ product.title }}</h2>
</div>
{% include 'flair-product-badges' %}

And add line 4.

For collection pages

Edit snippets/product-grid-item.liquid:

<div class="product__inside__name">
  <h2 class="product_title"><a href="{{ product.url | within: collection }}">{{ product.title }}</a></h2>
</div>
{% include 'flair-product-badges' %}

And add line 4.


Fashionopolism by Underground

For product pages

Edit sections/product-template.liquid:

<h1 itemprop="name">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-listing.liquid:

<div class="product-info">
  {% include 'flair-product-badges' %}

And add line 2.

For search pages

Edit templates/search.liquid:

<div class="product-info">
  {% include 'flair-product-badges', with product: item %}

And add line 2.


Flow by WeTheme

For product pages

Edit sections/product-template.liquid:

<h1 itemprop="name" class="product-details-product-title">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/grid-view-item.liquid:

<div class="grid-view-item--desc-wrapper">
  <div>
    {% include 'flair-product-badges', with flair_css: "margin-bottom: 5px" %}

And add line 3.

For search pages

Edit templates/search.liquid:

<h3>{{ item.title | link_to: item.url }}</h3>
{% include 'flair-product-badges', with product: item %}

And add line 2.


Galleria by Mile High Themes

For product pages

Edit snippets/product-template.liquid:

<h1 class="product-item-caption-title">{{ product.title | escape }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-loop.liquid:

<h5 class="product-thumb-caption-title">{{ product.title | escape }}</h5>
{% include 'flair-product-badges' %}

And add line 2.

For search pages

Edit snippets/search-result-grid.liquid:

<div class="desc">
  {% include 'flair-product-badges', with product: item %}
  <h5><a href="{{ item.url }}">{{ item.title | escape }}</a></h5>

And add line 2.


Grid by Pixel Union

For product pages

Edit snippets/product.liquid:

You may need to edit sections/product.liquid in older versions of this theme.

<h1 class="product-title" itemprop="name">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-list-item.liquid:

<p class="product-list-item-price">
  ...
</p>
{% include 'flair-product-badges', with product: item %}

And add line 4.


Handy by Pixel Union

For product pages

Edit sections/static-product.liquid:

<h1 class="product-title">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-item.liquid:

 {% include 'flair-product-badges' %}
 <h1 class="product-item-title">

And add line 1.


Icon by Underground

For product pages

Edit sections/product-template.liquid:

<h1 itemprop="name">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-listing.liquid:

<div class="product-details">
  {% include 'flair-product-badges' %}

And add line 2.

For search pages

Edit templates/search.liquid:

<div class="product-details">
  {% include 'flair-product-badges', with product: item %}

And add line 2.


Impulse by Archetype Themes

For product pages

Edit snippets/product-template.liquid:

{% if isModal %}
  <p class="h2 product-single__title" itemprop="name">{{ product.title }}</p>
{% else %}
  <h1 class="h2 product-single__title" itemprop="name">{{ product.title }}</h1>
{% endif %}
{% include 'flair-product-badges' %}

And add line 6.

For collection pages

Edit snippets/product-grid-item.liquid:

<div class="grid-product__price">
  ...
</div>
{% include 'flair-product-badges' %}

And add line 4.


Kagami by Maestrooo

For product pages

Edit snippets/product-meta.liquid:

<h1 class="product-meta__title">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

<div class="product-item__info">
  ...
  {% include 'flair-product-badges' %}
</div>

And add line 3.


Label by Giraffic

For product pages

Edit sections/product-template.liquid:

<h1 itemprop="name" class="standard-single">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

{% include 'flair-product-badges', with flair_css_class: 'flair-center flair-space-b-md' %}
<p class="h6">
  <span class="product-grid-title">{{ product.title }}</span>
</p>

And add line 1.


Launchpad Star by Shopify

For product pages

Edit snippets/product.liquid:

<h1 class="title">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-loop.liquid:

{% include 'flair-product-badges' %}
<h4 class="title">{{ product.title }}</h4>

And add line 1.


Loft by Trailblaze Media

For product pages

Edit sections/product-template.liquid:

<h1 itemprop="name">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/grid-rework.liquid:

{% include 'flair-product-badges' %}
<p class="h2 product-title">

And add line 1.

For mobile collection pages

Edit snippets/product-price-mobile.liquid:

{% include 'flair-product-badges' %}
<p class="h2 product-title">

And add line 1.


Minimal by Shopify

For product pages

Edit sections/product-template.liquid:

<h1 itemprop="name">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

{% include 'flair-product-badges' %}
<p class="grid-link__title">{{ product_title }}</p>

And add line 1.


Motion by Archetype Themes

For product pages

Edit snippets/product-template.liquid:

<h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

<div class="grid-product__price">
  ...
</div>
{% include 'flair-product-badges' %>

And add line 4.


Mr Parker by Underground

For product pages

Edit sections/product-template.liquid:

<h1 itemprop="name">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-listing.liquid:

<div class="product-info">
  {% include 'flair-product-badges' %}

And add line 2.

For search pages

Edit templates/search.liquid:

<div class="product-info">
  {% include 'flair-product-badges', with product: item %}

And add line 2.


Narrative by Shopify

For product pages

Edit sections/product-template.liquid:

<h1 class="product__title h2 text-center" itemprop="name">{{ product.title }}</h1>
{% include 'flair-product-badges', with flair_css_class: 'flair-center' %}

And add line 2.

For collection pages

Edit snippets/product-card.liquid:

<h3 class="card__name h4">{{ product.title }}</h3>
{% include 'flair-product-badges' %}

And add line 2.


Pacific by Pixel Union

For product pages

Edit snippets/product-form.liquid:

<div class="product-form" data-product-form="{{ form_id }}">
  <div class="product-details">
    {% include 'flair-product-badges' %}
    {% comment %}
    <h1 class="page-title" itemprop="name">{{ product.title }}</h1>

And add line 3.

For collection pages

Edit snippets/product-list-item.liquid:

    {% else %}
      {{ 'products.product.sold_out' | t }}
    {% endif %}
  </p>
  {% include 'flair-product-badges', with product:item %}
</div>

And add line 4.

NOTE: If your collection items do not line up, you may need to adjust their height to make room for Flair. Some versions of this theme use a fixed height.

You can try editing assets/custom.css.liquid and adding this to the bottom:

.product-list-item-details {
  min-height: 94px;
}

Parallax by Out of the Sandbox

NOTE: These instructions vary depending on which version you have.

For product pages - with sections

Edit sections/product-template.liquid:

<h1 class="product_name" itemprop="name">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For product pages - without sections

Edit templates/product.liquid:

<h1 class="product_name" itemprop="name">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-thumbnail.liquid:

<span class="title" itemprop="name">{{ product.title }}</span>
{% include 'flair-product-badges' %}

And add line 2.


Pipeline by Groupthought

For product pages

Edit snippets/product.liquid:

<h1 itemprop="name" class="h2">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

{% include 'flair-product-badges' %}
<p class="h6 name_wrapper">
  {{ product.title }}
</p>

And add line 1.


Porto by Smartwave

For product pages

Edit snippets/product.liquid:

<div class="product-name top-product-detail">
  <h1>
  ...
  </h1>
</div>
{% include 'flair-product-badges' %}

And add line 6.

For collection pages

Edit snippets/product-grid-item.liquid:

<div class="details-area">
  {% if settings.move_product_name == blank %}
  <h2 class="product-name">
    ...
  </h2>
  {% endif %}
  {% include 'flair-product-badges' %}

And add line 7.


Prestige by Maestrooo

For product pages

Edit snippets/product-meta.liquid:

<h1 class="ProductMeta__Title Heading u-h2">
  ...
</h1>
{% include 'flair-product-badges' %}

And add line 4.

For collection pages

Edit snippets/product-item.liquid:

<div class="ProductItem__Info ...">
  ...
  {% include 'flair-product-badges' %}
</div>

And add line 3.


Responsive by Out of the Sandbox

For product pages

NOTE: There are three different product snippets for this theme

Edit the following files:

  • sections/product-template.liquid
  • sections/product-details-template.liquid
  • sections/product-description-bottom-template.liquid
<h1 class="product_name" itemprop="name">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-thumbnail.liquid:

{% include 'flair-product-badges', with flair_css: '' %}
<span class="title" itemprop="name">{{ product.title }}</span>

And add line 1.


Retina by Out of the Sandbox

For product pages

NOTE: There are three different product snippets for this theme

Edit the following files:

  • sections/product-template.liquid
  • sections/product-details-template.liquid
  • sections/product-description-bottom-template.liquid
<h1 class="product_name" itemprop="name">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-thumbnail.liquid:

{% include 'flair-product-badges', with flair_css: '' %}
<span class="title" itemprop="name">{{ product.title }}</span>

And add line 1.


RS Sales Machine by ReallySuccessful

For product pages

Edit templates/product.liquid:

<h1 itemprop="name">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-item.liquid:

{% include 'flair-product-badges' %}
<h5 class="title">{{ product.title }}</h5>

And add line 1.


Shoptimized by Shoptimized

For product pages

Edit sections/product-template.liquid:

<h1 itemprop="name">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

<div class="grid__product-content text-center">
  <div class="price-section ...>
  ...
  </div>
  {% include 'flair-product-badges' %}

And add line 5.


Showtime by Mile High Themes

For product pages

Edit sections/product.liquid:

<h1>...</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-loop.liquid:

<div class="desc">
  {% include 'flair-product-badges' %}

And add line 2.

For search pages

Edit snippets/search-result-grid.liquid:

<div class="desc">
  {% include 'flair-product-badges', with product: item %}
  <h5><a href="{{ item.url }}">{{ item.title | escape }}</a></h5>

And add line 2.


Startup by Pixel Union

NOTE: These instructions vary depending on which version of Startup you have.

For product pages - with sections

Edit snippets/product-details.liquid:

{% if title_in_details and product_title %}
  {{ product_title }}
{% endif %}
{% include 'flair-product-badges' %}

And add line 4.

For product pages - without sections

Edit templates/product.liquid:

  <h1 class="page-title" itemprop="name">{{ product.title }}</h1>
  {% include 'flair-product-badges', with flair_css_class: 'flair-center flair-space-md' %}

And add line 2.

For collection pages - with sections

Edit snippets/product-list-item.liquid:

<h1 class="product-list-item-title">
  ...
</h1>
{% include 'flair-product-badges', with product: item, flair_css_class: '' %}

And add line 4.

For collection pages - without sections

Edit snippets/product-list-item.liquid:

<div class="product-list-item-details">
  {% include 'flair-product-badges', with product: item, flair_css: '' %}

  <p class="product-list-item-vendor vendor meta">{{ item.vendor }}</p>

And add line 1.


Sunrise by Rawsterne Web Design & Illustration

For product pages

Edit sections/product-template.liquid:

<h1 class="page-title">{{ product.title | escape}}</h1>
  {% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-loop.liquid:

  {% include 'flair-product-badges' %}
  <span class="product-title">

And add line 1.


Supply by Shopify

For product pages

Edit sections/product-template.liquid:

<h1 class="h2" itemprop="name">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

<p>{{ product.title }}</p>
<div class="price-align">
  {% include 'flair-product-badges' %}

And add line 3.


Symmetry by Clean Themes

For product pages

Edit sections/product-template.liquid:

<h1 class="title">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-block.liquid:

<div class="title">{{ product.title }}</div>
<div class="dash">-</div>
{% include 'flair-product-badges' %}

And add line 3.

For collection detail view pages (when you click a collection)

Edit snippets/product-block.liquid:

<h2 class="h1-style title"><a href="{{ product_url }}">{{ product.title }}</a></h2>
{% include 'flair-product-badges' %}

And add line 2.


Testament by Underground

For product pages

Edit sections/product-template.liquid:

<h1 itemprop="name">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-listing.liquid:

<div class="product-info">
  {% include 'flair-product-badges' %}

And add line 2.

For search pages

Edit templates/search-template.liquid:

<div class="product-info">
  {% include 'flair-product-badges', with product: item %}

And add line 2.


Turbo by Out of the Sandbox

For product pages

NOTE: There are three different product pages for this theme

Edit the following files:

  • sections/product-template.liquid
  • sections/product-details-template.liquid
  • sections/product-description-bottom-template.liquid
  <h1 class="product_name" itemprop="name">{{ product.title }}</h1>
  {% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-info.liquid:

  {% include 'flair-product-badges', with flair_css: '' %}
  <span class="title">{{ product.title }}</span>

And add line 1.


Venture by Shopify

For product pages

Edit sections/product-template.liquid:

<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>
{% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-card.liquid:

{% include 'flair-product-badges' %}
{% if settings.product_vendor_enable %}

And add line 1.

Still need help? Contact Us Contact Us