Customizing the layout of the banner

You can customize the layout and styling of your banner directly inside the application. This allows you to create a look and feel that matches your organization’s branding and user experience.

To access these options, navigate to:

Settings > Banner > Style

Position

Choose where and how the banner will appear on your website:

1. Popup: Centered on the screen.
2. Overlay: Works like the popup, but blocks the page until the user interacts with the banner.
3. Bar at the top: Fixed at the top of the screen.
4. Bar at the top (pushdown): Slides down from the top, pushing content below. (Note: may not work well with sticky headers.)
5. Floating at the top left: Positioned at the top left with a small margin.
6. Floating at the top center: Positioned at the top center with a small margin.
7. Floating at the top right: Positioned at the top right with a small margin.
8. Bar at the bottom: Fixed at the bottom of the screen.
9. Floating at the bottom left: Positioned at the bottom left with a small margin.
10. Floating at the bottom center: Positioned at the bottom center with a small margin.
11. Floating at the bottom right: Positioned at the bottom right with a small margin.

Theme

Select a theme to control padding, button style, and appearance:

1. Block: Small padding, square buttons with proportional width.
2. Classic: Small padding, rounded buttons of equal width.
3. Edgeless: No padding, square buttons of equal width.
4. Wired: Same as Block but with inverted button backgrounds and colors.

Theme Comparison Table

Text Alignment

Applies to banner title, message, and logo:

• Left
• Center
• Right

Width

Adjusts banner width using em units (relative to font size). Example: 2em = twice the font size.

• Controlled with a slider.
• Works with live preview for instant results.
• Useful for longer messages or button labels.
• Note: Applies only to banner positions, not bars (bars always span the full width).

Font Size

Adjusts text size using px units. Example: 1px = 1/96th of 1 inch.

• Controlled with a slider.
• Works with live preview.
• Defaults to the size set by your store’s theme.

Padding

Adjusts the space inside the banner using px units.

• Controlled with a slider.
• Works with live preview.
• Defaults vary depending on theme.
• Note: Not supported with the Edgeless theme.

Colors

Customize banner and button colors:

• Choose from a palette or define custom colors.
• Supports Hex (e.g., #123456) and RGBA formats.
• RGBA adds transparency support in addition to Red, Green, and Blue values.

Font Family

By default, the banner inherits your store’s theme font. You can also choose from web-safe fonts supported across browsers:

• Arial, Arial Black, Verdana, Tahoma, Trebuchet MS, Impact
• Times New Roman, Didot, Georgia, American Typewriter
• Andalé Mono, Courier, Lucida Console, Monaco
• Bradley Hand, Brush Script MT, Luminari, Comic Sans MS

If you want to use a custom font, first load it into your store assets and make it available in your CSS file.

z-index

Controls the stack order of the banner.

• Higher values ensure the banner appears above other page elements.
• Adjust if conflicts occur with other apps or scripts.

Container ID

Defines the HTML ID of the banner container.

• Only change this if you need to target the banner with custom scripts or CSS selectors.

Banner Shadow

Adds a shadow behind the banner.

• Useful when banner and background colors are similar, improving visibility.

Animation

Enables animations for banner appearance and closing:

• Fade-in / slide-in on open.
• Fade-out / slide-out on close.

Also applies to the Re-open banner (Revoke) link, if enabled under Behavior.

• Note: Not supported by all browsers.

Custom CSS

Add your own CSS rules for additional customization.

• Useful for fine-tuning button sizes, border colors, spacing, and more.

Video Guide

Updated on: 29/09/2025