Burst Commerce Logo

Flair Install Guide

Updated: November 24, 2020

Setting up Flair in your Shopify theme

This Flair setup process should only take a few minutes to complete. If you need a hand getting setup feel free to contact us and we’d be happy to help.

Editing your theme in the Shopify Theme Editor

You can edit your theme files using Shopify’s built-in theme editor.

To access the editor from your Shopify admin, go to Online Store > Themes.

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

It’s a good idea to make a copy of your theme before making changes to your theme so you have a backup.

If you run into any issues, you can revert your changes in the Shopify Theme Editor and contact us for help.

How to follow these instrucitons

Here’s a quick example set of instructions like what you’ll see below:

For product pages
Edit sections/product-template.liquid:
1
2
  <h1 itemprop="name">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}
And add line 2.

The For product pages indicates where in your theme changes apply.

So in this case, to add Flair badges to product pages you would:

1
Open the file sections/product-template.liquid in the Shopify Theme Editor.
2
Search for a line similar to this one:
1
  <h1 itemprop="name">{{ product.title }}</h1>
NOTE: The line you are searching for may not match exactly.
3
Insert the Flair product badge snippet line:
1
  {% render 'flair-product-badges', product: product %}
4
Then save the file and verify your change by refreshing the corresponding page in your shop.

Installing the Flair app init snippet - step 1 of 3

The Flair app init snippet is used to setup common styles and features.

Edit layout/theme.liquid:

1
2
    {% render 'flair-app-init' %}
  </head>

And add line 1.


Installing the Flair banners snippet - step 2 of 3

The Flair banners snippet is used to display the Flair banners in your store.

Edit layout/theme.liquid:

1
2
  <body>
    {% render 'flair-banners' %}

And add line 2.


Installing the Flair product badges snippet - step 3 of 3

The Flair product badges snippet is used to display your product badges in your store.

Flair product badges can be added on: product pages, collection pages, search results, and the shopping cart

We’ve put together instructions for most popular Shopify themes.

Can’t find your theme? Try seeing if you can find a theme by the same author below as they will often follow the same structure. Or you can try looking in the same files as other popular themes.

If you get stuck or need a hand, feel free to contact us for help.


Activ8 by Activ8

For product pages

Edit templates/product.liquid:

1
2
  <h1 itemprop="name">{{ product.title | escape}}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
3
  {% render 'flair-product-badges', product: product %}
  <span class="product-title">
  {{ product.title | escape }}

And add line 1.


Atlantic by Pixel Union

For product pages

Edit snippets/product.liquid:

1
2
  <h1 class="title">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-item.liquid:

1
2
3
4
  <div class="product-card-details">
    ...
    {% render 'flair-product-badges', product: product %}
  </div>

And add line 3.


Basel by The4Studio + Jtheme

For product pages

Edit snippets/product_page_area.liquid:

1
2
  <h1 itemprop="name" class="product_title entry-title">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages - grid view

Edit one of the following files depending on your theme setting for products_hover:

  • snippets/section_loop_product_link.liquid
  • snippets/section_loop_product_base.liquid
  • snippets/section_loop_product_alt.liquid
  • snippets/section_loop_product_info.liquid
  • and several others that follow a similar naming convention.
1
2
  <h3 class="product-title"><a href="{{ url_nt | within: collection }}">{{ product.title }}</a></h3>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages - list view

Edit snippets/collection_list.liquid:

1
2
  <h3 class="product-title"><a href="{{ current_variant.url | within: collection }}">{{ product.title }}</a></h3>
  {% render 'flair-product-badges', product: product %}

And add line 2.


Blackdeers by Halothemes

For product pages

Edit sections/product-template.liquid:

1
2
  {% render 'flair-product-badges', product: product %}
  <span class="vendor">{{ product.vendor }}</span>

And add line 1.

For collection pages

Note: There are two files you may need to modify for collection views.

Edit snippets/product-grid-item.liquid AND snippets/product-grid-item-category.liquid:

1
2
  <div class="product-bottom">
    {% render 'flair-product-badges', product: product %}

And add line 2.

For search pages

Edit snippets/search-result-grid.liquid:

1
2
  <div class="product-bottom">
    {% render 'flair-product-badges', product: item %}

And add line 2.


Blockshop by Troop Themes

NOTE: The instructions vary depending on your theme.

For product pages

On newer versions of this theme:

Edit sections/product.liquid:

1
2
  <h1 class="product-page--title" itemprop="name">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

On older versions of this theme:

Edit templates/product.liquid:

1
2
  <h1 class="page-title" itemprop="name">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

On newer versions of this theme:

Edit snippets/partial–product.liquid:

1
2
3
4
5
  <div class="product--details">
    <a href="{{ url }}">
      <div class="product--title">{{ title }}</div>
    </a>
    {% render 'flair-product-badges', product: product %}

And add line 5.

On older versions of this theme:

Edit snippets/snippet-product-item.liquid:

1
2
3
4
5
6
  <p class="title">
    <a href="{{ product.url | within: collection }}">
      {{ product.title }}
    </a>
  </p>
  {% render 'flair-product-badges', product: product %}

And add line 6.


Booster Premium by Booster Theme

For product pages

Edit sections/product-template.liquid:

1
2
  <h1 itemprop="name" class="product-single__title heading">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

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
1
2
3
4
  {% render 'flair-product-badges', product: product %}
  <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:

1
2
  <h2 itemprop="name">{{ product.title }}</h2>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
  <p class="product-item__title">{{ product.title }}</p>
  {% render 'flair-product-badges', product: product %}

And add line 2.


Broadcast by Invisible

For product pages

Edit snippets/product.liquid:

1
2
  <h1 class="product__title">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
  <h3 class="title">{{ product.title }}</h3>
  {% render 'flair-product-badges', product: product %}

And add line 2.


Brooklyn by Shopify

For product pages

Edit sections/product-template.liquid:

1
2
  <h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
  <span class="grid-product__title">{{ product.title }}</span>
  {% render 'flair-product-badges', product: product %}

And add line 2.


Canopy by Clean Themes

For product pages

Edit sections/product.liquid:

1
2
  <h1 class="product-title">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-block.liquid:

1
2
3
4
5
6
7
  <a class="title" href="{{ url }}">
    {% if section.settings.grid_show_vendor %}
    <div class="vendor">{{ product.vendor }}</div>
    {% endif %}
    {{ product.title }}
  </a>
  {% render 'flair-product-badges', product: product %}

And add line 7.


Capital by a good machine

For product pages

Edit snippets/product-title.liquid:

1
2
  <h1 class="page-header simple product-title {{ show_at }}" id="product-title" data-product-title>{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-block.liquid:

1
2
  <div class="product-item-details">
    {% render 'flair-product-badges', 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:

1
2
  <div class="product-details desktop">
    {% render 'flair-product-badges', product: product %}

Add line 2.

For mobile:

1
2
  <div class="product-details mobile">
    {% render 'flair-product-badges', product: product %}

Add line 2.

For collection pages

Edit snippets/product-list-item.liquid:

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

And add line 2.


Debut by Shopify

For product pages

Edit sections/product-template.liquid:

1
2
  <h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-card-grid.liquid:

1
2
  <div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For search pages

Edit snippets/product-card-list.liquid:

1
2
3
4
  <div class="list-view-item__title" aria-hidden="true">
    <span class="product-card__title">{{ product.title }}</span>
  </div>
  {% render 'flair-product-badges', product: product %}

And add line 4.

For cart pages

Edit sections/cart-template.liquid:

1
2
3
4
5
6
  <div class="list-view-item__title">
    <a href="{{ item.url }}" class="cart__product-title" data-cart-item-title>
      {{ item.product.title }}
    </a>
  </div>
  {% render 'flair-product-badges', product: item.product %}

And add line 6.


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:

1
2
  <h1 itemprop="name">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For product pages - v3.0 and above

Edit snippets/product-form.liquid:

1
2
3
4
5
  {% form 'product', product %}
  <div class="product-title">
  ...
  </div>
  {% render 'flair-product-badges', product: product %}

And add line 5.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
3
  {% render 'flair-product-badges', product: product %}
  <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:

1
2
  <h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

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
1
2
  <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width }}" alt="{{ product.featured_image.alt }}">
  {% render 'flair-product-badges', product: product %}

And add line 2.


Ella by Halothemes

Use the next section of instructions for versions 3.0 and up

For product pages

Edit sections/product-template-default.liquid:

1
2
3
4
  <h1 class="product-title">
    {% render 'multilang' with product.title %}
  </h1>
  {% render 'flair-product-badges', product: product %}

And add line 4.

For collection pages

Edit snippets/product-grid-item.liquid:

Note: Depending on your settings you may need to edit: snippets/product-grid-item-2.liquid

1
2
3
4
  <a class="product-title" href="{{ product.url | within: collection }}">
    {% render 'multilang' with product.title %}
  </a>
  {% render 'flair-product-badges', product: product %}

And add line 4.

For search pages

Edit snippets/search-result-grid.liquid:

1
2
3
4
  <a class="product-title" href="{{ product.url | within: collection }}">
    {% render 'multilang' with product.title %}
  </a>
  {% render 'flair-product-badges', product: product %}

And add line 4.

Use the next section of instructions for versions prior to 3.0

For product pages

Edit sections/product-template.liquid:

1
2
3
4
  <h2 itemprop="name">
    ...
  </h2>
  {% render 'flair-product-badges', product: product %}

And add line 4.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
  <div class="product-bottom">
    {% render 'flair-product-badges', product: product %}

And add line 1.


Empire by Pixel Union

For product pages

Edit snippets/product.liquid:

1
2
  {% render 'flair-product-badges', product: product %}
  {% if settings.product_show_vendor and product.vendor != blank or onboarding %}

And add line 1.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
3
4
  <h2 class="productitem--title">
    ...
  </h2>
  {% render 'flair-product-badges', product: product %}

And add line 4.


Envy by WeTheme

For product pages

Edit sections/product-template.liquid:

1
2
  <h1 class="custom-font product-description-header">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

There are two collection related files to edit.

Edit each of these files:

  • sections/collection-template.liquid - for collections
  • sections/collection.liquid - for featured homepage products
1
2
3
4
  <div class="hp-title">
    ...
  </div>
  {% render 'flair-product-badges', product: product %}

And add line 4.

For search pages

Edit sections/search-template.liquid:

There are are many different sections in this template so you need to make your changes inside the object_type == ‘product’ section.

1
2
3
4
5
6
  {% elsif item.object_type == 'product' %}
    ...
    <div class="hp-title">
      ...
    </div>
    {% render 'flair-product-badges', product: item %}

And add line 6.


Etheme by Yourstore

For product pages

Edit snippets/product-page-description.liquid:

1
2
3
4
  <div class="product-info__title">
    <h2>{{ product.title }}</h2>
  </div>
  {% render 'flair-product-badges', product: product %}

And add line 4.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
3
4
  <div class="product__inside__name">
    <h2 class="product_title"><a href="{{ product.url | within: collection }}">{{ product.title }}</a></h2>
  </div>
  {% render 'flair-product-badges', product: product %}

And add line 4.


Express by Shopify

For product pages

Edit sections/product.liquid:

1
2
3
  <h1 id="ProductHeading" class="product__title product__title--template">{{ product.title | escape }}</h1>
  <h2 id="ProductHeadingModal" class="product__title product__title--template product__title--modal">{{ product.title | escape }}</h2>
  {% render 'flair-product-badges', product: product %}

And add line 3.

For collection pages

Edit snippets/product-card-grid.liquid:

1
2
  {% render 'flair-product-badges', product: product %}
  <div class="product-card__price-wrapper">

And add line 1.


Fashionopolism by Underground

For product pages

Edit sections/product-template.liquid:

1
2
  <h1 itemprop="name">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-listing.liquid:

1
2
3
4
5
  <a href="{{ product.url | within: collection }}">
    {% if settings.vendor %}<p>{{ product.vendor }}</p>{% endif %}
    <h3>{{ product.title }}</h3>
  </a>
  {% render 'flair-product-badges', product: product %}

And add line 5.

For search pages

Edit sections/search-template.liquid:

1
2
3
4
5
  <a href="{{ item.url }}">
    {% if item.object_type == 'product' %} {% if settings.vendor %}<h4>{{ item.vendor }}</h4>{% endif %} {% endif %}
    <h3>{{ item.title }}</h3>
  </a>
  {% render 'flair-product-badges', product: item %}

And add line 5.


Flex by Out of the Sandbox

For product pages

Edit sections/product__main.liquid:

1
2
  <h1 class="product_name title" itemprop="name">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-thumbnail__product-info.liquid:

1
2
  <a href="{{ product.url | within: collection }}" class="product-thumbnail__title">{{ product.title }}</a>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages hover

Edit snippets/product-thumbnail.liquid:

1
2
  <p class="product-thumbnail__title">{{ product.title }}</p>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For search pages

Edit sections/search__main.liquid:

1
2
3
4
  <h5 class="search-result__title">
    <a href="{{ item.url }}" title="{{ item.title | escape }}">{{ item.title }}</a>
  </h5>
  {% render 'flair-product-badges', product: item %}

And add line 4.


Flow by WeTheme

For product pages

Edit sections/product-template.liquid:

1
2
  <h1 itemprop="name" class="product-details-product-title">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/grid-view-item.liquid:

1
2
3
  <div class="grid-view-item--desc-wrapper">
    <div>
      {% render 'flair-product-badges', product: product %}

And add line 3.

For search pages

Edit templates/search.liquid:

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

And add line 2.


Fastor by RoarTheme

For product pages

Edit snippets/product-page-info.liquid:

1
2
  <h2 class="name {% if settings.reviews_enable == false %}no-review{% endif %}">{{product.title}}</h2>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-item.liquid:

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

And add line 2.


Focal by Maestrooo

For product pages

Edit snippets/product-meta.liquid:

1
2
  <h1 class="product__title" itemprop="name">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product_item.liquid:

1
2
  <a href="{{ product.url }}" class="product-item__title">{{ product.title }}</a>
  {% render 'flair-product-badges', product: product %}

And add line 2.


Galleria by Mile High Themes

For product pages

Note: There are two changes you need to make, one for mobile and one for desktop.

For Desktop, edit snippets/product-template.liquid:

1
2
  <h1 class="product-item-caption-title">{{ product.title | escape }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For Mobile, edit snippets/product-template.liquid:

1
2
  <p class="product-item-caption-title {{title_class}}">{{ product.title | escape }}</p>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-loop.liquid:

1
2
  <h5 class="product-thumb-caption-title">{{ product.title | escape }}</h5>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For search pages

Edit snippets/search-result-grid.liquid:

1
2
3
  <div class="desc">
    {% render 'flair-product-badges', 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.

1
2
  <h1 class="product-title" itemprop="name">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-list-item.liquid:

1
2
3
4
  <p class="product-list-item-price">
    ...
  </p>
  {% render 'flair-product-badges', product: item %}

And add line 4.


Handy by Pixel Union

For product pages

Edit sections/static-product.liquid:

1
2
  <h1 class="product-title">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-item.liquid:

1
2
  {% render 'flair-product-badges', product: product %}
  <h1 class="product-item-title">

And add line 1.


Icon by Underground

For product pages

Edit sections/product-template.liquid:

1
2
  <h1 itemprop="name">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-listing.liquid:

1
2
  <div class="product-details">
    {% render 'flair-product-badges', product: product %}

And add line 2.

For search pages

Edit templates/search.liquid:

1
2
  <div class="product-details">
    {% render 'flair-product-badges', product: item %}

And add line 2.


Impulse by Archetype Themes

For product pages

Edit snippets/product-template.liquid:

1
2
  {% render 'flair-product-badges', product: product %}
  {%- if settings.enable_product_reviews and settings.reviews_layout == 'full' -%}

And add line 1.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
  {% render 'flair-product-badges', product: product %}
  <div class="grid-product__price">

And add line 1.


Kagami by Maestrooo

For product pages

Edit snippets/product-meta.liquid:

1
2
  <h1 class="product-meta__title">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
3
4
  <div class="product-item__info">
    ...
    {% render 'flair-product-badges', product: product %}
  </div>

And add line 3.


Kalles The4Studio

For product pages

Edit sections/pr_summary.liquid:

1
2
3
4
5
6
7
  {%- when 'title' -%}
    {%- if call_cl == "_ppr" -%}
    <h1 class="product_title entry-title" style="font-size: {{block.settings.size}}px">{{product.title}}</h1>
    {%- else -%}
    <h1 class="product_title entry-title" style="font-size: {{block.settings.size}}px"><a href="{{product.url | within: collection}}">{{product.title}}</a></h1>
    {%- endif -%}
    {% render 'flair-product-badges', product: product %}

And add line 7.

For collection pages

Edit snippets/prloopgrid_1.liquid:

1
2
  <h3 class="product-title pr fs__14 mg__0 fwm"><a class="cd chp" href="{{pr_url}}">{{product.title}}</a></h3>
  {% render 'flair-product-badges', product: product %}

And add line 2.


Kingdom by KrownThemes

For product pages

Edit sections/product-page.liquid:

1
2
  <h1 itemprop="name" class="product-title">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/collection_item.liquid:

1
2
  <h3 class="product-item__title h3  underline-animation ">{{ product.title }}</h3>
  {% render 'flair-product-badges', product: product %}

And add line 2.


Label by Giraffic

For product pages

Edit sections/product-template.liquid:

1
2
  <h1 itemprop="name" class="standard-single">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
3
4
  {% render 'flair-product-badges', product: product %}
  <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:

1
2
  <h1 class="title">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-loop.liquid:

1
2
  {% render 'flair-product-badges', product: product %}
  <h4 class="title">{{ product.title }}</h4>

And add line 1.


Loft by Trailblaze Media

For product pages

Edit sections/product-template.liquid:

1
2
  <h1 itemprop="name">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/grid-rework.liquid:

1
2
  {% render 'flair-product-badges', product: product %}
  <p class="h2 product-title">

And add line 1.

For mobile collection pages

Edit snippets/product-price-mobile.liquid:

1
2
  {% render 'flair-product-badges', product: product %}
  <p class="h2 product-title">

And add line 1.


Maker by Troop Themes

For product pages

Edit sections/product.liquid:

1
2
  <h1 class="product-page--title" itemprop="name">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/partial–product.liquid:

1
2
3
4
5
6
  <a href="{{ product.url | within: collection  }}" title="{{ product.title }}">
    <h2 class="title font--block-heading">
      {{ product.title }}
    </h2>
  </a>
  {% render 'flair-product-badges', product: product %}

And add line 6.


Minimal by Shopify

For product pages

Edit sections/product-template.liquid:

1
2
  <h1 itemprop="name">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
  <p class="grid-link__title">{{ product_title }}</p>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For search pages

Edit snippets/search-result.liquid:

1
2
  <h2 class="h3">{{ item.title | link_to: item.url }}</h2>
  {% render 'flair-product-badges', product: item %}

And add line 2.


Motion by Archetype Themes

For product pages

Edit snippets/product-template.liquid:

1
2
  {% render 'flair-product-badges', product: product %}
  {% if settings.enable_product_reviews and settings.reviews_layout == 'full' %}

And add line 1.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
  {% render 'flair-product-badges', product: product %}
  <div class="grid-product__price">

And add line 1.


Mr Parker by Underground

For product pages

Edit sections/product-template.liquid:

1
2
  <h1 itemprop="name">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-listing.liquid:

1
2
  <div class="product-info">
    {% render 'flair-product-badges', product: product %}

And add line 2.

For search pages

Edit templates/search.liquid:

1
2
  <div class="product-info">
    {% render 'flair-product-badges', product: item %}

And add line 2.


Narrative by Shopify

For product pages

Edit sections/product-template.liquid:

1
2
  <h1 class="product__title h2 text-center" itemprop="name">{{ product.title }}</h1>
  <div class="text-center">{% render 'flair-product-badges', product: product %}</div>

And add line 2.

For collection pages

Edit snippets/product-card.liquid:

1
2
  <h3 class="card__name h4">{{ product.title }}</h3>
  {% render 'flair-product-badges', product: product %}

And add line 2.


Mobilia, Parallax, Responsive, Retina, Turbo and others by Out of the Sandbox

Out of the Sandbox themes follow a consistent set of conventions for how things are laid out. These instructions should work for most of their themes.

For product pages

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
1
2
  <h1 class="product_name" itemprop="name">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

The collection product info may be in either of the following places depending on your theme

Edit one of the following:

  • snippets/product-thumbnail.liquid
  • snippets/product-info.liquid

1
2
  <span class="title" itemprop="name">{{ product.title }}</span>
  {% render 'flair-product-badges', product: product %}

And add line 2.

If your theme supports a Quick Shop view, you may also need to add another Flair include similar to:

1
2
  <h3>{{ product.title }}</h3>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For search pages

Edit sections/search-template.liquid:

1
2
3
4
  <h3 class="search-result__title">
    <a href="{{ item.url }}" title="{{ item.title | escape }}">{{ item.title }}</a>
  </h3>
  {% render 'flair-product-badges', product: item %}

And add line 4.


Pacific by Pixel Union

For product pages

Edit snippets/product-form.liquid:

1
2
3
4
5
  <div class="product-form" data-product-form="{{ form_id }}">
    <div class="product-details">
      {% render 'flair-product-badges', product: product %}
      {% comment %}
      <h1 class="page-title" itemprop="name">{{ product.title }}</h1>

And add line 3.

For collection pages

Edit snippets/product-list-item.liquid:

1
2
3
4
5
6
      {% else %}
        {{ 'products.product.sold_out' | t }}
      {% endif %}
    </p>
    {% render 'flair-product-badges', 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:

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


Pipeline by Groupthought

For product pages

Edit snippets/product.liquid:

1
2
  <h1 itemprop="name" class="h2">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
3
4
  {% render 'flair-product-badges', product: product %}
  <p class="h6 name_wrapper">
    {{ product.title }}
  </p>

And add line 1.


Pop by Shopify

For product pages

Edit sections/product-template.liquid:

1
2
  <h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
  <p class="h4 product__title">{{ product_title }}</p>
  {% render 'flair-product-badges', product: product %}

And add line 2.


Porto by Smartwave

For product pages

Edit snippets/product.liquid:

1
2
3
4
5
6
  <div class="product-name top-product-detail">
    <h1>
    ...
    </h1>
  </div>
  {% render 'flair-product-badges', product: product %}

And add line 6.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
3
4
5
6
7
  <div class="details-area">
    {% if settings.move_product_name == blank %}
    <h2 class="product-name">
      ...
    </h2>
    {% endif %}
    {% render 'flair-product-badges', product: product %}

And add line 7.


Prestige by Maestrooo

For product pages

Edit snippets/product-meta.liquid:

1
2
3
4
  <h1 class="ProductMeta__Title Heading u-h2">
    ...
  </h1>
  {% render 'flair-product-badges', product: product %}

And add line 4.

For collection pages

Edit snippets/product-item.liquid:

1
2
3
4
  <h2 class="ProductItem__Title Heading">
    <a href="{{ product.url | within: collection }}">{{ product.title }}</a>
  </h2>
  {% render 'flair-product-badges', product: product %}

And add line 4.


Providence by Station

For product pages

Edit sections/product-template.liquid:

1
2
  {% include 'page-header' class:'no-margin-bottom', title: product.title %}
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product.liquid:

1
2
  {% include 'pricing' %}
  {% render 'flair-product-badges', product: product %}

And add line 2.


RS Sales Machine by ReallySuccessful

For product pages

Edit templates/product.liquid:

1
2
  <h1 itemprop="name">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-item.liquid:

1
2
  {% render 'flair-product-badges', product: product %}
  <h5 class="title">{{ product.title }}</h5>

And add line 1.


Shoptimized by Shoptimized

For product pages

Edit sections/product-template.liquid:

1
2
  <h1 itemprop="name">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
3
4
5
  <div class="grid__product-content text-center">
    <div class="price-section ...>
    ...
    </div>
  {% render 'flair-product-badges', product: product %}

And add line 5.


Showtime by Mile High Themes

For product pages

Edit sections/product.liquid:

1
2
  <h1>...</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages (grid view)

Edit snippets/product-loop.liquid:

1
2
  <div class="desc">
    {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages (list view)

Edit snippets/product-loop-list.liquid:

1
2
  {% render 'flair-product-badges', product: product %}
  <h2><a href="{{ product.url | within: collection }}">{{ product.title | escape }}</a></h2>

And add line 1.

For search pages

Edit snippets/search-result-grid.liquid:

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

And add line 2.


Simple by Shopify

For product pages

Edit sections/product-template.liquid:

1
2
  <h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
3
4
  <div class="product__title text-center">
    <a href="{{ product.url | within: collection }}">{{ product.title }}</a>
  </div>
  <div class="text-center">{% render 'flair-product-badges', product: product %}</div>

And add line 4.


Split by KrownThemes

For product pages

Edit sections/product.liquid:

1
2
  <h1 class="product-title" itemprop="name">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/collection_product-content.liquid:

1
2
3
4
5
6
7
  <div class="caption">
    <div>
      ...
      {% render 'flair-product-badges', product: product %}
      <span aria-hidden="true">{% include 'asset_svg' with 'arrow_icon_long_overflowed' %}</span>
    </div>
  </div>

And add line 4.


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:

1
2
3
4
  {% if title_in_details and product_title %}
    {{ product_title }}
  {% endif %}
  {% render 'flair-product-badges', product: product %}

And add line 4.

For product pages - without sections

Edit templates/product.liquid:

1
2
  <h1 class="page-title" itemprop="name">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages - with sections

Edit snippets/product-list-item.liquid:

1
2
3
4
  <h1 class="product-list-item-title">
    ...
  </h1>
  {% render 'flair-product-badges', product: item %}

And add line 4.

For collection pages - without sections

Edit snippets/product-list-item.liquid:

1
2
3
  <div class="product-list-item-details">
    {% render 'flair-product-badges', product: item %}
    <p class="product-list-item-vendor vendor meta">{{ item.vendor }}</p>

And add line 1.


Streamline by Archetype Themes

For product pages

Edit snippets/product-template.liquid:

1
2
3
4
5
6
7
8
9
10
  {% if isModal %}
    <p class="h1 product-single__title">
      {{ product.title }}
    </p>
  {% else %}
    <h1 class="h1 product-single__title">
      {{ product.title }}
    </h1>
  {% endif %}
  {% render 'flair-product-badges', product: product %}

And add line 10.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
3
4
  <div class="grid-product__price">
    ...
  </div>
  {% render 'flair-product-badges', product: product %}

And add line 4.


Sunrise by Rawsterne Web Design & Illustration

For product pages

Edit sections/product-template.liquid:

1
2
  <h1 class="page-title">{{ product.title | escape}}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-loop.liquid:

1
2
  {% render 'flair-product-badges', product: product %}
  <span class="product-title">

And add line 1.


Superstore by Pixel Union

For product pages

Edit snippets/product.liquid:

1
2
  {% render 'flair-product-badges', product: product %}
  {% if settings.product_ratings_reviews %}

And add line 1.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
  {% render 'flair-product-badges', product: product %}
  {% if settings.product_ratings_reviews %}

And add line 1.


Supply by Shopify

For product pages

Edit sections/product-template.liquid:

1
2
  <h1 class="h2" itemprop="name">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
  <p>{{ product.title }}</p>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For search pages

Edit snippets/search-result-grid.liquid:

1
2
  <p>{{ item.title }}</p>
  {% render 'flair-product-badges', product: item %}

And add line 2.


Symmetry by Clean Themes

For product pages

Edit sections/product-template.liquid:

1
2
  <h1 class="title">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-block.liquid:

1
2
3
  <div class="title">{{ product.title }}</div>
  <div class="dash">-</div>
  {% render 'flair-product-badges', product: product %}

And add line 3.

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

Edit snippets/product-block.liquid:

1
2
  <h2 class="h1-style title"><a href="{{ product_url }}">{{ product.title }}</a></h2>
  {% render 'flair-product-badges', product: product %}

And add line 2.


Testament by Underground

For product pages

Edit sections/product-template.liquid:

1
2
  <h1 itemprop="name">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-listing.liquid:

1
2
  <div class="product-info">
    {% render 'flair-product-badges', product: product %}

And add line 2.

For search pages

Edit templates/search-template.liquid:

1
2
  <div class="product-info">
    {% render 'flair-product-badges', product: item %}

And add line 2.


Trademark by Maestrooo

For product pages

Edit snippets/product-meta.liquid:

1
2
  <h1 class="product__title {% if template.name == 'product' %}h2{% else %}h4{% endif %}">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-item.liquid:

1
2
3
4
  <h3 class="product-item__title">
    <a href="{{ product.url | within: collection }}" class="link">{{ product.title }}</a>
  </h3>
  {% render 'flair-product-badges', product: product %}

And add line 4.


Vantage by Underground

For newer versions of this theme

For product pages

Edit snippets/product-form.liquid:

1
2
  {% render 'flair-product-badges', product: product %}
  <h5 id="product-price" class="clearfix">

And add line 2.

For collection pages

Edit snippets/product-listing.liquid:

1
2
3
4
5
  </h4>
  {% render 'flair-product-badges', product: product %}
  {% if settings.vendor %}
    <p class="product-vendor">{{ product.vendor }}</p>
  {% endif %}

And add line 2.

For search pages

Edit sections/search-template.liquid:

1
2
3
4
5
  </h4>
  {% render 'flair-product-badges', product: item %}
  {% if settings.vendor %}
    <p class="product-vendor">{{ item.vendor }}</p>
  {% endif %}

And add line 2.

For older versions of this theme

For product pages

Edit sections/product-template.liquid:

1
2
  <h1 itemprop="name">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-listing.liquid:

1
2
3
4
5
6
  <div class="product-info">
    <div class="product-info-inner">
      ...
      {% render 'flair-product-badges', product: product %}
    </div>
  </div>

And add line 4.

For search pages

Edit templates/search.liquid:

1
2
3
4
5
6
  <div class="product-info">
    <div class="product-info-inner">
      ...
      {% render 'flair-product-badges', product: item %}
    </div>
  </div>

And add line 4.


Venture by Shopify

For product pages

Edit sections/product-template.liquid:

1
2
  <h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-card.liquid:

1
2
  <div class="product-card__name">{{ product.title }}</div>
  {% render 'flair-product-badges', product: product %}

And add line 2.


Venue by Safe As Milk

For product pages

Edit sections/product-template.liquid:

1
2
  <h1 itemprop="name" class="section__title-text product-single__title-text">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
  <h3 class="product__title h4">{{ product.title }}</h3>
  {% render 'flair-product-badges', product: product %}

And add line 2.


Warehouse by Maestrooo

For product pages

Edit snippets/product-info.liquid:

1
2
3
4
5
6
7
8
9
  <div class="product-meta">
  {%- if template.name == 'product' and template != 'product.quick-view' -%}
    <h1 class="product-meta__title heading h1">{{ product.title }}</h1>
  {%- else -%}
    <h3 class="product-meta__title heading h2">
      <a href="{{ product.url }}">{{ product.title }}</a>
    </h3>
  {%- endif -%}
  {% render 'flair-product-badges', product: product %}

And add line 9.

For collection pages

Edit snippets/product-item.liquid:

1
2
3
4
5
6
7
  <a href="{{ filtered_variant.url | default: product.url | within: collection }}" class="product-item__title text--strong link">{{ product.title }}</a>

  {%- if settings.product_price_position == 'before_title' -%}
    {{ vendor }}
  {%- endif -%}

  {% render 'flair-product-badges', product: product %}

And add line 7.


Wokiee by p-themes

For product pages

Edit snippets/product_page_1_description.liquid

1
2
  <h1 class="tt-title" itemprop="name">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-grid-item-design-1.liquid:

1
2
  <div class="tt-description">
  {% render 'flair-product-badges', product: product %}

And add line 2.


Yanka by p-themes

For product pages

Edit snippets/product_page_1_description.liquid (this file may vary based on theme settings):

1
2
  <h1 class="pt-title" itemprop="name">{{ product.title }}</h1>
  {% render 'flair-product-badges', product: product %}

And add line 2.

For collection pages

Edit snippets/product-grid-item-design-1.liquid OR snippets/product-grid-item-design-2.liquid:

1
2
  <h2 class="pt-title prod-thumb-title-color"><a href="{{ product.url | within: collection }}">{{ product.title }}</a></h2>
  {% render 'flair-product-badges', product: product %}

And add line 2.