Flair Badge Install Guide

Updated: March 16, 2020

This guide contains instructions for setting up Flair product badges in your Shopify theme.

How to follow these instructions

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

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

We’ve included detailed instructions for most popular Shopify themes below.

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

Example instructions:

For product pages
Edit sections/product-template.liquid:
1
2
  <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.

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 include line:
1
  {% 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 product badge placement options

You can add Flair product badges anywhere you show products including:

  • product pages
  • collection pages
  • search results
  • the shopping cart

Additional Flair product badge snippet options

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

Click here to read more about the Flair product badge snippet options available.

How to add Flair product badges to your 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.

Choose your theme below:


Activ8 by Activ8

For product pages

Edit templates/product.liquid:

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

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
3
  {% 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:

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

And add line 2.

For collection pages

Edit snippets/product-item.liquid:

1
2
3
4
  <div class="product-card-details">
    ...
    {% include 'flair-product-badges' %}
  </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>
  {% include 'flair-product-badges' %}

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>
  {% include 'flair-product-badges' %}

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>
  {% include 'flair-product-badges' %}

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>
  {% include 'flair-product-badges' %}

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>
    {% include 'flair-product-badges' %}

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

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

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

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

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

1
2
  <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:

1
2
3
  <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:

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

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>
  {% include 'flair-product-badges' %}

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>
  {% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-block.liquid:

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

Add line 2.

For mobile:

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

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>
  {% include '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>
  {% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-card-grid.liquid:

1
2
3
4
  <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:

1
2
  <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:

1
2
3
4
5
  {% 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:

1
2
3
  {% 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:

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


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">
    {% include 'multilang' with product.title %}
  </h1>
  {% include 'flair-product-badges' %}

And add line 4.

For collection pages

Edit snippets/product-grid-item.liquid:

Note: There are two sections in this file that may need to be modified, one for the grid view and one for the list view. Both of them should follow this same example.

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

And add line 5.

For search pages

Edit snippets/search-result-grid.liquid:

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

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>
  {% include 'flair-product-badges' %}

And add line 4.

For collection pages

Edit snippets/product-grid-item.liquid:

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

And add line 1.


Empire by Pixel Union

For product pages

Edit snippets/product.liquid:

1
2
  {% include 'flair-product-badges' %}
  {% 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>
  {% include 'flair-product-badges' %}

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>
  {% include 'flair-product-badges' %}

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>
  {% include 'flair-product-badges' %}

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>
    {% include '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>
  {% include 'flair-product-badges' %}

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>
  {% include 'flair-product-badges' %}

And add line 4.


Fashionopolism by Underground

For product pages

Edit sections/product-template.liquid:

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

And add line 2.

For collection pages

Edit snippets/product-listing.liquid:

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

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">
    {% include '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>
  {% include 'flair-product-badges' %}

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>
  {% include 'flair-product-badges' %}

And add line 2.

For collection pages hover

Edit snippets/product-thumbnail.liquid:

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

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>
  {% include '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>
  {% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/grid-view-item.liquid:

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

And add line 3.

For search pages

Edit templates/search.liquid:

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

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>
  {% include 'flair-product-badges' %}

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>
  {% include 'flair-product-badges' %}

And add line 2.


Galleria by Mile High Themes

For product pages

Edit snippets/product-template.liquid:

1
2
  <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:

1
2
  <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:

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

And add line 2.

For collection pages

Edit snippets/product-list-item.liquid:

1
2
3
4
  <p class="product-list-item-price">
    ...
  </p>
  {% include '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>
  {% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-item.liquid:

1
2
  {% include 'flair-product-badges' %}
  <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>
  {% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-listing.liquid:

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

And add line 2.

For search pages

Edit templates/search.liquid:

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

And add line 2.


Impulse by Archetype Themes

For product pages

Edit snippets/product-template.liquid:

1
2
  {% include 'flair-product-badges' %}
  {%- 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
  {% include 'flair-product-badges', flair_css_class: 'flair-space-sm' %}
  <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>
  {% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
3
4
  <div class="product-item__info">
    ...
    {% include 'flair-product-badges' %}
  </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>
  {% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/collection_item.liquid:

1
2
  <div class="grid-item-image" style="padding-top:{{ aspect_ratio }}%">
    {% include 'flair-product-badges', flair_css: 'position: absolute; top: 4px; left: 4px; z-index: 10' %}

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>
  {% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

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

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

And add line 2.

For collection pages

Edit snippets/product-loop.liquid:

1
2
  {% 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:

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

And add line 2.

For collection pages

Edit snippets/grid-rework.liquid:

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

And add line 1.

For mobile collection pages

Edit snippets/product-price-mobile.liquid:

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

And add line 1.


Minimal by Shopify

For product pages

Edit sections/product-template.liquid:

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

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
  {% 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:

1
2
  <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:

1
2
  {% include 'flair-product-badges', flair_css_class: 'flair-space-b-sm' %}
  <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>
  {% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-listing.liquid:

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

And add line 2.

For search pages

Edit templates/search.liquid:

1
2
  <div class="product-info">
    {% include '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>
  {% include 'flair-product-badges', flair_css_class: 'flair-center' %}

And add line 2.

For collection pages

Edit snippets/product-card.liquid:

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

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>
  {% include 'flair-product-badges' %}

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>
  {% include 'flair-product-badges' %}

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>
  {% include 'flair-product-badges' %}

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>
  {% include '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">
      {% 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:

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

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

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

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

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

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>
  {% include 'flair-product-badges' %}

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 %}
    {% include 'flair-product-badges' %}

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, flair_badge_init: flair_badge_init %} {% assign flair_badge_init = false %}

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, flair_badge_init: flair_badge_init %} {% assign flair_badge_init = false %}

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 %}
  {% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product.liquid:

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

And add line 2.


RS Sales Machine by ReallySuccessful

For product pages

Edit templates/product.liquid:

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

And add line 2.

For collection pages

Edit snippets/product-item.liquid:

1
2
  {% 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:

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

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>
    {% include 'flair-product-badges' %}

And add line 5.


Showtime by Mile High Themes

For product pages

Edit sections/product.liquid:

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

And add line 2.

For collection pages (grid view)

Edit snippets/product-loop.liquid:

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

And add line 2.

For collection pages (list view)

Edit snippets/product-loop-list.liquid:

1
2
  {% include 'flair-product-badges' %}
  <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">
    {% include '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>
  {% include 'flair-product-badges' %}

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>
  {% include 'flair-product-badges' %}

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>
  {% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/collection_product-content.liquid:

1
2
3
4
5
6
7
  <div class="caption">
    <div>
      ...
      {% include 'flair-product-badges', flair_css_class: "overflowed flair-space-tb-md" %}
      <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 %}
  {% include 'flair-product-badges' %}

And add line 4.

For product pages - without sections

Edit templates/product.liquid:

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

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

And add line 4.

For collection pages - without sections

Edit snippets/product-list-item.liquid:

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

And add line 10.

For collection pages

Edit snippets/product-grid-item.liquid:

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

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>
  {% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-loop.liquid:

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

And add line 1.


Superstore by Pixel Union

For product pages

Edit snippets/product.liquid:

1
2
  {% include 'flair-product-badges' %}
  {% if settings.product_ratings_reviews %}

And add line 1.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
  {% include 'flair-product-badges', flair_css_class: "flair-space-tb-sm" %}
  {% 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>
  {% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

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

And add line 2.

For search pages

Edit snippets/search-result-grid.liquid:

1
2
  <p>{{ item.title }}</p>
  {% include '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>
  {% include 'flair-product-badges' %}

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>
  {% include 'flair-product-badges' %}

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>
  {% include 'flair-product-badges' %}

And add line 2.


Testament by Underground

For product pages

Edit sections/product-template.liquid:

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

And add line 2.

For collection pages

Edit snippets/product-listing.liquid:

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

And add line 2.

For search pages

Edit templates/search-template.liquid:

1
2
  <div class="product-info">
    {% include '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, flair_badge_init: flair_badge_init %} {% assign flair_badge_init = false %}

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, flair_badge_init: flair_badge_init %} {% assign flair_badge_init = false %}

And add line 4.


Vantage by Underground

For newer versions of this theme

For product pages

Edit snippets/product-form.liquid:

1
2
3
4
5
6
  <h4 class="product-title">
    <a href="{{ product.url | within: collection }}">
      {{ item.title }}
    </a>
  </h4>
  {% include 'flair-product-badges', product: item, flair_css_class: 'flair-space-tb-sm' %}

And add line 6.

For collection pages

Edit snippets/product-listing.liquid:

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

And add line 4.

For search pages

Edit templates/search.liquid:

1
2
3
4
5
6
7
  <div class="product-info-inner">
    <h4 class="product-title">
      <a href="{{ product.url | within: collection }}">
        {{ item.title }}
      </a>
    </h4>
    {% include 'flair-product-badges', product: item, flair_css_class: 'flair-space-tb-sm' %}

And add line 7.

For older versions of this theme

For product pages

Edit sections/product-template.liquid:

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

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">
      ...
      {% include 'flair-product-badges', flair_css_class: 'flair-space-tb-sm' %}
    </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">
      ...
      {% include 'flair-product-badges', product: item, flair_css_class: 'flair-space-tb-sm' %}
    </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>
  {% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-card.liquid:

1
2
  {% include 'flair-product-badges' %}
  {% 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>
  {% include 'flair-product-badges' %}

And add line 2.

For collection pages

Edit snippets/product-grid-item.liquid:

1
2
  <h3 class="product__title h4">{{ product.title }}</h3>
  {% include 'flair-product-badges', flair_css_class: 'flair-space-tb-sm' %}

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 -%}
  {% include 'flair-product-badges' %}

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 -%}

  {% include 'flair-product-badges', flair_css_class: 'flair-space-b-md' %}

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>
  {% include 'flair-product-badges' %}

And add line 2.

For collection pages

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

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

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>
  {% include 'flair-product-badges' %}

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>
  {% include 'flair-product-badges' %}

And add line 2.