Burst Commerce Logo

Flair Banner Options

Updated: October 15, 2020
NOTE: These options are now deprecated and may be removed in a future Flair update. Please refer to the Layouts doc for available display options.

The Flair banner snippet supports additional options so you can get your banners showing exactly the way you’d like.

Multiple banner support

You can show multiple Flair banners by adding the optional flair_banner_max setting when you include the Flair snippet.

By default, Flair will only show one banner at a time.

Here is how you can configure Flair to show up to 3 banners:

{% include 'flair-banners', flair_banner_max: 3 %}

Position your banners by specifying CSS classes

You can customize the alignment and spacing of your Flair banners by specifying additional CSS classes that will be applied to your banners using the flair_css_class option.

Flair includes a number of built-in CSS classes you can use, or you can specify your own CSS classes for complete control.

Built-in banner spacing CSS classes

You can customize how much space (aka - margin) shows around each banner.

For example, to add a 10px margin around each banner you would specify the flair-space-md CSS class like so:

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

Here is a list of the most commonly used spacing options:

  • flair-space-sm — 5px margin on all sides
  • flair-space-md — 10px margin on all sides
  • flair-space-lg — 20px margin on all sides
  • flair-space-sm — 5px margin on all sides
  • flair-space-tb-sm — 5px margin on top and bottom
  • flair-space-tb-md — 10px margin on top and bottom
  • flair-space-tb-lg — 20px margin on top and bottom
  • flair-space-lr-sm — 5px margin on left and right
  • flair-space-lr-md — 10px margin on left and right
  • flair-space-lr-lg — 20px margin on left and right

For the full list, you can look in your snippets/flair-banners.liquid file.

Banner positioning using custom CSS

You can also apply custom CSS to your Flair banners by using the flair_css option.

Example: Setting a custom margin

For example, if you wanted to manually specify a 3px margin on the top and bottom you could pass this in like so:

{% include 'flair-banners', flair_css: 'margin-top: 3px; margin-left: 3px;' %}

Example: Making a banner that sticks to the top when a user scrolls

{% include 'flair-banners', flair_css: 'position: sticky; top: 0; z-index: 100' %}