Flair Install Guide

Updated: September 3, 2020

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

Well you’ve come to the right place.

Note: This is a one-time process for each new theme. After this is complete you can manage your badges and banners easily from with Flair.

Why Flair doesn’t automatically install itself

You may be wondering why this install step is necessary in the first place.

You see, many apps attempt to automatically install themselves. But if you read the 1 star reviews of those apps many are the result of an auto-install gone bad.

That’s because themes are very complex and other people and apps might move things around at any time. For this reason, we use an approach that gives you complete control and is guaranteed to work without breaking your theme.

Before you get started…

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

Note: Flair updates your currently published theme. If you want to work on a copy of your theme, first create a badge and banner, and then make a theme copy.

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.

Setting up Flair in your Shopify theme

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

The Flair setup process requires the following 3 steps:

  1. Installing the Flair app init snippet
  2. Installing the Flair banners snippet
  3. Installing up Flair product badges snippet


Installing the Flair app init snippet

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

To add the Flair init snippet to your theme:

1
Open the file layout/theme.liquid in the Shopify Theme Editor.
2
Insert the Flair app init snippet just before the closing </head> tag:
1
2
    {% render 'flair-app-init' %}
  </head>
3
Then save the file and refresh your shop homepage to verify your change.
If you run into any issues, revert your change in the Shopify Theme Editor and contact us for help.


Installing the Flair banners snippet

To add Flair banners, you will typically just add one line like the following where you’d like the banner to show:

1
  {% render 'flair-banners' %}

You can also specify a Flair placement to customize how the banners are displayed in your store:

1
  {% render 'flair-banners', flair_placement: 'My placement' %}
Flair banners can be added anywhere in your theme including above the header or inside the content within your store.

To add the Flair banner at the top of your shop, you can use these instructions:

1
Open the file layout/theme.liquid in the Shopify Theme Editor.
2
Insert the flair banners snippet right after the opening <body> tag:
1
2
  <body>
    {% render 'flair-banners' %}
3
Then save the file and refresh your shop homepage to verify your change.
If you run into any issues, revert your change in the Shopify Theme Editor and contact us for help.


Installing the Flair product badges snippet

To add Flair product badges, you will typically just add one line like the following where you’d like the badges to show:

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

You can also specify a Flair placement to customize how the product badges are displayed in your store:

1
  {% render 'flair-product-badges', product: product, flair_placement: 'My placement' %}
Flair product badges can be added on: product pages, collection pages, search results, and even the shopping cart

We’ve included instructions for most popular themes below. But first let’s walk through an example set of instructions like what you might see for a specific theme.

Example instructions:

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.

In this example, the For product pages indicates where in your theme the badges will be shown.

So to add Flair badges to the 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.
If you run into any issues, revert your change in the Shopify Theme Editor and contact us for help.

How to add Flair product badges to your Shopify theme

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

If you can’t find your theme below, see if you can find a theme made by the same author as they often use the same structure.

Otherwise, you can try looking for similar files to the ones listed below as many themes follow a similar pattern.


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

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.


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
  {% render 'flair-product-badges', product: product %}
  <span class="image-wrapper">

And add line 1.


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
3
  <a href="{{ product.url | within: collection }}" class="grid-product__meta">
    {% render 'flair-product-badges', product: product %}
    <span class="grid-product__title">{{ product.title }}</span>

And add line 2.


Canopy by Clean Themes

For product pages

Edit templates/product.liquid:

1
2
  <h1 class="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
  <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>
  {% 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.


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.


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
  <div class="product-info">
  {% render 'flair-product-badges', product: product %}

And add line 2.

For search pages

The search template in either of the following places depending on your theme

Edit one of the following:

  • templates/search.liquid
  • sections/search-template.liquid

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

And add line 2.


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.


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
  {% render 'flair-product-badges', product: product %}
  <p class="grid-link__title">{{ product_title }}</p>

And add line 1.


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

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
  <h5 class="sub_title">
    <a href="{{ item.url }}" title="{{ item.title | escape }}">{{ item.title }}</a>
  </h5>
  {% 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>
  {% render 'flair-product-badges', product: product %}

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
  {% render 'flair-product-badges', product: product %}
  {% if settings.product_vendor_enable %}

And add line 1.


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.