Burst Commerce Logo

Flair Banner Layouts

Updated: February 16, 2021

You can use banner layouts to customize how your banners are displayed in your store.

Banner layouts can be found within Flair under Settings > Layouts.

Flair supports two types of banner layouts: Automatic and Manual.

Automatic

Automatic banner layouts are applied based on the page type within your store. You can choose from any of the following page types:

  • Home
  • Product
  • Collection
  • Search
  • Cart

Note: There can be only one automatic banner layout for each page type.

You can also check the Use as default box to use this layout if no layout is specified.

Manual

Manual banner layouts give you a bit more control when applying layouts in your theme.

You can specify a manual banner layout by using the flair_layout option to specify the layout name.

For example, if you have a banner layout called My Layout, you can specify this layout like so:

1
  {% render 'flair-banners', flair_layout: 'My Layout' %}

Spacing

You can optionally add spacing around the Banner Layout: top, bottom, left and right.

Custom CSS

If you are comfortable with CSS, you can add custom CSS to your Banner Layout. Here is some example CSS to set the margin to 10px and maximum width to 80%:

1
2
  margin: 10px;
  max-width: 80%;

Migrating to Banner Layouts

This section only applies if you installed Flair before September 10th, 2020 and you are passing in custom options to your banner snippets

In prior versions of Flair, banner options were passed in directly to the Flair snippet like so:

1
  {% render 'flair-banners', flair_css: 'margin: 10px', flair_css_class: 'flair-inline' %}

Going forward, banner layouts are the preferred way to customize your Flair banner setup.

The following snippet options are now deprecated and may be removed in a future version of Flair:

  • flair_css
  • flair_css_class
  • flair_banner_max
  • flair_banner_init

Switching to Automatic Layouts

The easiest way to move over to layouts is to use an automatic banner layout.

Automatic banner layouts can be applied based on the page type in your theme.

For example, to customize how the banners look on your product pages, you can create an automatic banner layout and choose Product for the page type.