Burst Commerce Logo

Flair Install Guide

Updated: February 17, 2021

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.

#How to edit your theme

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.

#Example instructions

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.

#1. Install the Flair app init snippet

The Flair app init snippet is required to setup common CSS styles and features such as countdown banners and variant badge refresh.

Edit layout/theme.liquid:

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

And add line 1.


#2. Install the Flair banners snippet

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.


#3. Install the Flair product badges snippet

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

#For product pages

Edit sections/product.liquid or on older versions templates/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 or on older versions snippets/snippet-product-item.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.


#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

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 product pages (older versions)

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
  {% 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.


#Expression by Clean Canvas

#For product pages

Edit sections/product-template.liquid:

1
2
  <h1>{{ 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-block__title">{{ product.title }}</div>
  {% render 'flair-product-badges', product: product %}

And add line 2.


#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/template--product.liquid or in older versions of this theme 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
4
  <div class="product-grid--title">
    <a href="{{ product.url | within: collection }}">{{ product.title }}</a>
  </div>
  {% render 'flair-product-badges', product: product %}

And add line 4.

Edit sections/collection--featured-collection.liquid:

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

And add line 4.

#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 Switch

#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
  <p class="h6">
    <span class="product-grid-title">{{ product.title }}</span>
  </p>
  {% render 'flair-product-badges', product: product %}

And add line 4.


#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.


#Masonry by Clean Canvas

#For product pages

Edit sections/product-template.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
  <a class="product-block-title" href="{{ product_url }}">{{ product.title }}</a>
  {% render 'flair-product-badges', product: product %}

And add line 2.


#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.


#Showcase by Clean Canvas

#For product pages

Edit sections/product-template.liquid:

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

And add line 2.

#For collection pages

Edit snippets/product-block.liquid:

1
2
  {% if on_sale %}<span class="was-price theme-money">{{ product.compare_at_price | money }}</span>{% endif %}
  {% render 'flair-product-badges', product: product %}

And add line 2.


#Showtime by Mile High Themes

#For product pages

Edit sections/product.liquid:

1
2
3
  <h5>{{ 'products.general.description' | t }}
    {% render 'flair-product-badges', product: product %}
  </h5>

And add line 2. Note: You need to place Flair in between the h5 tags.

#For collection pages (grid view)

Edit snippets/product-loop.liquid:

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

And add line 2.

#For collection pages (list view)

Edit snippets/product-loop-list.liquid:

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

And add line 2.

#For search pages (grid view)

Edit snippets/search-result-grid.liquid:

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

And add line 2.

#For search pages (list view)

Edit snippets/search-result.liquid:

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

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

#For product pages

Edit snippets/product-details.liquid or on older versions templates/product.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 collection pages

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.


#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 product pages

Edit snippets/product-form.liquid or on older versions sections/product-template.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 or on older versions templates/search.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.


#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.