Flair Banner Layouts

2 min read
updated Apr 18, 2022

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.

Settings

Name

Enter a descriptive name for your layout.

The name may only contain letters, numbers and spaces.

Page Types

Select the pages to apply the layout automatically:

  • Home
  • Product
  • Collection
  • Search
  • Cart
  • Use as default

For example, if you select Product and Collection, the layout will be automatically applied to all product and collection pages when no other layout is specified.

The Use as default option will apply the layout if no other layout matches.

Banners

Flair banners can be organized and promoted based on how you want to use them. For example, you can show your sale and promotional banners in one part of your page layout, and your shipping-related banners elsewhere.

The following banner selection options are available:

  • Show all banners - All banners will be shown
  • Show banners with tags - Only banners that contain one of the specified tags will be shown
  • Show banners without tags - Only banners that do not contain one of the specified tags will be shown

These advanced layout controls enable you to run specific promotions, maximizing the impact of your merchandising and sales efforts, automatically.

Spacing

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

Display Options

Margin

You can optionally add spacing around the banner layout: top, bottom, left and right.

1
2
3

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%;

Using Banner Layouts By Name

You can apply Banner layouts by specifying the layout name in:

The Shopify Theme Customizer

To apply a layout within Shopify’s Theme Customizer, enter the layout name in the Layout field inside the Flair banners block:

Shopify Theme Customizer layout

Custom Flair setups

For custom Flair banner setups, you can use a data-layout attribute to specify your layout name:

  <div data-flair-banner data-layout="my layout"></div>