Flair Banner Layouts

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

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

Settings

Name

Enter a descriptive name for your layout.

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.

Banner selection

Choose the banners to show in this layout.

• 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.

Maximum

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

Gap

Use the gap to adjust the spacing between banners.

Display Options

Margin

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
• Custom Flair setups

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:

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>