Customizing the layout of the banner
You can customize the layout and styling of your banner from inside the application. This allows you to create a look and feel that matches your organization’s branding style.
To access this option please follow the Settings > Banner > Style
Popup: The popup banner appears in the center of the screen.
Overlay: The overlay banner works just like the popup banner but additionally blocks the page until the user makes an action with the banner buttons.
Bar at the top: The bar appears on the top of the screen.
Bar at the top (pushdown): The bar appears on the top of the screen and it opens with a pushdown effect which makes the page content appear after the bar. (Note: This position option may not work well with themes that have sticky header)
Floating at the top left: The banner is placed on the top left of the screen with a small margin from the edge of the window.
Floating at the top center: The banner is placed on the top center of the screen with a small margin from the edge of the window.
Floating at the top right: The banner is placed on the top right of the screen with a small margin from the edge of the window.
Bar at the bottom: The bar appears on the bottom of the screen.
Floating at the bottom left: The banner is placed on the bottom left of the screen with a small margin from the edge of the window.
Floating at the bottom center: The banner is placed on the bottom center of the screen with a small margin from the edge of the window.
Floating at the bottom right: The banner is placed on the bottom right of the screen with a small margin from the edge of the window.
Block: The content appears with small padding from the edges of the banner/bar. Also, there are no rounded corners on the buttons and they appear with a width that is proportional to their title.
Classic: The content appears with small padding from the edges of the banner/bar just like with the Block option. Here the buttons appear with rounded corners and the same width.
Edgeless: The content appears without any padding from the edges of the banner/bar. The buttons appear without rounded corners and with the same width.
Wired: It is the same with the Block option but the backgrounds and colors of the buttons are inverted.
This style property is applied to the banner/bar title, message, and logo. The available options are:
Left
Center
Right
The size of the banner can change to em unit. Em unit it relative to the font-size of the element (2em means 2 times the size of the current font). This can easily be changed with the slider control. By enabling the live preview on the top right of the screen you are able to play with the slider and adjust the width of the banner to the preferred option.
This is very helpful when the titles of the buttons or the message is too long and you need more space. (Note: this property works only with the banner positions and not with the bar positions because the bar positions cover the whole width of the window)
The size can change to px unit. Pixel unit pixels (1px = 1/96th of 1in). This option can easily be changed with the slider control. By enabling the live preview on the top right of the screen you are able to play with the slider and adjust the size of the text to the preferred option. On the left, the size is inherited by your store theme stylesheet.
The padding of the banner/bar content can change to px unit. This control is a slider as well. By enabling the live preview on the top right of the screen you are able to play with the slider and adjust the padding of the content to the preferred option. On the left, the padding is the default padding depending on the theme that has been selected. (Note: This property is not working with the Edgeless Theme)
Color may change either by selecting a set of colors from the palette or by selecting each color separately. The color picker supports both Hex and RGBA formats. Hex is a 6-digit, 24 bit, hexidecimal number that represents Red, Green, and Blue. An example of a Hex color representation is #123456, 12 is Red, 34 is Green, and 56 is Blue. There are 16 million possible colors. RGBA is similar to Hex in that it has 24 bits for RGB color, bit there is an additional 8 bit value for transparency.
This is by default the inherited font selected that your store theme has. But here you can use other fonts that you may like. Web Safe Fonts are supported by browsers and can be used here with no problem.
These are:
– Arial (sans-serif)
– Arial Black (sans-serif)
– Verdana (sans-serif)
– Tahoma (sans-serif)
– Trebuchet MS (sans-serif)
– Impact (sans-serif)
– Times New Roman (serif)
– Didot (serif)
– Georgia (serif)
– American Typewriter (serif)
– Andalé Mono (monospace)
– Courier (monospace)
– Lucida Console (monospace)
– Monaco (monospace)
– Bradley Hand (cursive)
– Brush Script MT (cursive)
– Luminari (fantasy)
– Comic Sans MS (cursive)
In case you want to use another font you will need to first load this font from your store assets and make it available to your CSS file in the theme.
The z-index property specifies the stack order of an element. Normally you want the bar/banner to appear on the top of everything on your store pages. Something though you may use other apps or scripts and this needs to be changed.
This is the ID of the bar/banner element. You can change it in cases you want to operate with other scripts or selectors. This needs to be changed only when you know what you want to do.
This option adds a shadow to the banner which is really helpful when you have a banner that has the same background color as the store background color.
You have the option to enable bar/banner animation which means that the banner will open with a fade-in/slide-in effect and close with a fade-out/slide-out effect depending on the position it has.
Also, the re-open bar/banner link can be animated. This is available only when you have enabled the Re-open banner (Revoke) button from the tab Behavior (Note: these properties are not supported by all browser versions).
Custom CSS gives you the option to add extra styles that the previous options are not covering. For example, here you can make changes to configure button sizes, border colors, etc.
To access this option please follow the Settings > Banner > Style
Position
Popup: The popup banner appears in the center of the screen.
Overlay: The overlay banner works just like the popup banner but additionally blocks the page until the user makes an action with the banner buttons.
Bar at the top: The bar appears on the top of the screen.
Bar at the top (pushdown): The bar appears on the top of the screen and it opens with a pushdown effect which makes the page content appear after the bar. (Note: This position option may not work well with themes that have sticky header)
Floating at the top left: The banner is placed on the top left of the screen with a small margin from the edge of the window.
Floating at the top center: The banner is placed on the top center of the screen with a small margin from the edge of the window.
Floating at the top right: The banner is placed on the top right of the screen with a small margin from the edge of the window.
Bar at the bottom: The bar appears on the bottom of the screen.
Floating at the bottom left: The banner is placed on the bottom left of the screen with a small margin from the edge of the window.
Floating at the bottom center: The banner is placed on the bottom center of the screen with a small margin from the edge of the window.
Floating at the bottom right: The banner is placed on the bottom right of the screen with a small margin from the edge of the window.
Theme
Block: The content appears with small padding from the edges of the banner/bar. Also, there are no rounded corners on the buttons and they appear with a width that is proportional to their title.
Classic: The content appears with small padding from the edges of the banner/bar just like with the Block option. Here the buttons appear with rounded corners and the same width.
Edgeless: The content appears without any padding from the edges of the banner/bar. The buttons appear without rounded corners and with the same width.
Wired: It is the same with the Block option but the backgrounds and colors of the buttons are inverted.
Text alignment
This style property is applied to the banner/bar title, message, and logo. The available options are:
Left
Center
Right
Width
The size of the banner can change to em unit. Em unit it relative to the font-size of the element (2em means 2 times the size of the current font). This can easily be changed with the slider control. By enabling the live preview on the top right of the screen you are able to play with the slider and adjust the width of the banner to the preferred option.
This is very helpful when the titles of the buttons or the message is too long and you need more space. (Note: this property works only with the banner positions and not with the bar positions because the bar positions cover the whole width of the window)
Font size
The size can change to px unit. Pixel unit pixels (1px = 1/96th of 1in). This option can easily be changed with the slider control. By enabling the live preview on the top right of the screen you are able to play with the slider and adjust the size of the text to the preferred option. On the left, the size is inherited by your store theme stylesheet.
Padding
The padding of the banner/bar content can change to px unit. This control is a slider as well. By enabling the live preview on the top right of the screen you are able to play with the slider and adjust the padding of the content to the preferred option. On the left, the padding is the default padding depending on the theme that has been selected. (Note: This property is not working with the Edgeless Theme)
Colors
Color may change either by selecting a set of colors from the palette or by selecting each color separately. The color picker supports both Hex and RGBA formats. Hex is a 6-digit, 24 bit, hexidecimal number that represents Red, Green, and Blue. An example of a Hex color representation is #123456, 12 is Red, 34 is Green, and 56 is Blue. There are 16 million possible colors. RGBA is similar to Hex in that it has 24 bits for RGB color, bit there is an additional 8 bit value for transparency.
Font family
This is by default the inherited font selected that your store theme has. But here you can use other fonts that you may like. Web Safe Fonts are supported by browsers and can be used here with no problem.
These are:
– Arial (sans-serif)
– Arial Black (sans-serif)
– Verdana (sans-serif)
– Tahoma (sans-serif)
– Trebuchet MS (sans-serif)
– Impact (sans-serif)
– Times New Roman (serif)
– Didot (serif)
– Georgia (serif)
– American Typewriter (serif)
– Andalé Mono (monospace)
– Courier (monospace)
– Lucida Console (monospace)
– Monaco (monospace)
– Bradley Hand (cursive)
– Brush Script MT (cursive)
– Luminari (fantasy)
– Comic Sans MS (cursive)
In case you want to use another font you will need to first load this font from your store assets and make it available to your CSS file in the theme.
z-index
The z-index property specifies the stack order of an element. Normally you want the bar/banner to appear on the top of everything on your store pages. Something though you may use other apps or scripts and this needs to be changed.
Container ID
This is the ID of the bar/banner element. You can change it in cases you want to operate with other scripts or selectors. This needs to be changed only when you know what you want to do.
Banner Shadow
This option adds a shadow to the banner which is really helpful when you have a banner that has the same background color as the store background color.
Animation
You have the option to enable bar/banner animation which means that the banner will open with a fade-in/slide-in effect and close with a fade-out/slide-out effect depending on the position it has.
Also, the re-open bar/banner link can be animated. This is available only when you have enabled the Re-open banner (Revoke) button from the tab Behavior (Note: these properties are not supported by all browser versions).
Custom CSS
Custom CSS gives you the option to add extra styles that the previous options are not covering. For example, here you can make changes to configure button sizes, border colors, etc.
Updated on: 20/02/2024
Thank you!