Banner Install Guide

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

How to follow these instructions

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

  {% include 'flair-banners' %}

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

Example instructions:

Top placement

Edit layout/theme.liquid:

  <body id="{{ page_title | handle }}" class="{% if customer %}customer-logged-in {% endif %}template-{{ request.page_type | handle }}">
  {% include 'flair-banners' %}

In this example, the Top placement indicates where in your theme the banner will be shown.

So to add Flair banners the Top of your shop you would:

1
Open the file layout/theme.liquid in the Shopify Theme Editor.
2
Search for the body tag:
<body id="{{ page_title | handle }}" class="{% if customer %}customer-logged-in {% endif %}template-{{ request.page_type | handle }}">
	

NOTE: The line you are searching for may not match exactly.

3
Insert the Flair banner snippet include line:
{% include 'flair-banners' %}
	
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 banner placement options

You can put Flair banners anywhere in your theme. Common placement locations include:

  • Top - The banner is placed at the top of your shop above everything else
  • Top of content - The banner is placed above the primary content in your shop, typically below the header
  • Bottom of content - The banner is placed below the primary content in your shop, typically above the footer
  • Bottom - The banner is placed at the bottom of your shop below everything else

Additional Flair banner snippet options

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

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

You can even put the Flair banner in multiple locations for maximum visibility, such as both the Top Content and Bottom Content placements.

How to add Flair the banner snippet to your theme

The rest of this guide will show you examples of adding the Flair banner to your theme. These examples are based on the Simple Shopify theme, but your theme should require very similar changes.

Feel free to contact Tom via the Contact Us link at the bottom of this page if you run into any issues.

Top placement

This will place the banner at the very top of your shop above all other content.

Edit layout/theme.liquid:

<body id="{{ page_title | handle }}" class="{% if customer %}customer-logged-in {% endif %}template-{{ request.page_type | handle }}">
  {% include 'flair-banners' %}

And add line 2 just inside the opening body HTML tag.

Sticky Top placement

If you'd like the Top Bar to "stick" to the top and always be visible use this variation instead:

<body id="{{ page_title | handle }}" class="{% if customer %}customer-logged-in {% endif %}template-{{ request.page_type | handle }}">
  {% include 'flair-banners', flair_css: 'position: sticky; top: 0; z-index: 100;' %}

Top of content placement

This will place the banner above the primary content in your shop.

Edit layout/theme.liquid:

{% include 'flair-banners' %}
{{ content_for_layout }}

And add line 1 just above the {{ content_for_layout }}.

Top of content with extra space

If you'd like to add space above and below the banner you can try this variation to add 10px:

{% include 'flair-banners', flair_css_class: 'flair-space-tb-md' %}
{{ content_for_layout }}

Bottom of content placement

This will place the banner below the primary content in your shop.

Edit layout/theme.liquid:

{{ content_for_layout }}
{% include 'flair-banners' %}

And add line 2 just below the {{ content_for_layout }}.

Bottom of content with extra space

If you'd like to add space above and below the banner you can try this variation to add 10px:

{{ content_for_layout }}
{% include 'flair-banners', flair_css_class: 'flair-space-tb-md' %}

Bottom placement

This will place the banner at the very bottom of your shop below all other content.

Edit layout/theme.liquid:

  {% include 'flair-banners' %}
</body>

And add line 1 just inside the closing body HTML tag.

Sticky Bottom placement

If you'd like the Bottom Bar to "stick" to the bottom and always be visible use this variation instead:

  {% include 'flair-banners', flair_css: 'position: fixed; bottom: 0; width: 100%; z-index: 100;' %}
</body>

Still need help? Contact Us Contact Us