Flair Banner Layouts
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.
Banner Layout Types
Flair supports two types of banner layouts: Automatic and Manual.
Automatic banner layouts are applied based on the page type within your store. You can choose from any of the following page types:
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 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:
You can optionally add spacing around the Banner Layout: top, bottom, left and right.
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%:
Migrating to Banner Layouts
In prior versions of Flair, banner options were passed in directly to the Flair snippet like so:
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:
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.