Flair Banner Layouts

2 min read
updated Nov 30 2023

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

Flair banner layouts

To access banner layouts, visit Flair Banners and click the Layouts button.



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.

Choose the banners to show in this layout.

Flair banner selection
  • Show all banners - Show all Flair banners.
  • Show banners with tags - Only show banners with specific Flair banner tags.
  • Show banners without tags - Only show banners that do not have specific Flair banner tags.

Number of banners

Configure how many banners to show at the same time.


Enter the maximum number of banners to show, from 1-6.


Use the gap to adjust the spacing between banners.

Display Options


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

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>