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.
Enter a descriptive name for your layout.
The name may only contain letters, numbers and spaces.
Select the pages to apply the layout automatically:
- 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.
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.
You can optionally add spacing around the Banner Layout: top, bottom, left and right.
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%:
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:
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>