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.
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.
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.
Enter the maximum number of banners to show, from 1-6.
Use the gap to adjust the spacing between banners.
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>