Impact + Flair theme guide for Shopify

By: Maestrooo

This guide includes instructions for setting up Flair badges and Flair banners in the Impact theme by Maestrooo.

How to edit your theme

Visit Shopify Admin > Themes and click ... > Edit code.

Install Flair product badges

On product pages

Edit snippets/product-info.liquid:

{%- when 'title' -%}
  {%- if request.page_type == 'product' -%}
    <h1 class="product-info__title {{ block.settings.heading_tag }}" {{ block.shopify_attributes }}>{{ product.title }}</h1>
  {%- else -%}
    <h2 class="product-info__title {{ block.settings.heading_tag }}" {{ block.shopify_attributes }}>
      <a href="{{ product.url }}">{{ product.title }}</a>
    </h2>
  {%- endif -%}
  <div data-flair-product-badge data-product-id={{ product.id }}></div>

And add line 9.

On collection pages

Edit snippets/product-item.liquid:

<div data-flair-product-badge data-product-id={{ product.id }}></div>
{%- render 'price-list', product: product, text_alignment: text_alignment -%}

And add line 1.

Flair banners

Open layout/theme.liquid.

Find the line containing:

<body>

And add this after it:

Flair Gen 3

<flair-banners></flair-banners>

Flair Gen 2

<div data-flair-banner></div>

Click Save.

Additional Resources

Flair badge layout guide - additional badge options including: multi-promotions, multiple badges, spacing and alignment, variant badges, and more
Flair banner layout guide - additional banner options including: multi-promotions, spacing, and more

Getting Started

Badges

Banners

Support