Overview

The Banner is the top promotional section of the bundle widget.
It is used to display key messages such as offers, instructions, or value propositions.

The banner is typically the first visible element, helping users quickly understand the bundle and its benefits.

How to Add Banner

The banner can be added and configured from the Banner section inside Styling.

Steps:

1. Open Styling
2. Select Banner
3. Enable the banner option
4. Once enabled, the banner will appear at the top of the bundle

Important:

• The banner only appears when it is enabled
• Its visibility may also depend on the selected template

Content Source (Language)

All textual content of the banner is managed from the Language settings.

Quick Access

Press Alt + Double Click on the banner content in preview to directly navigate to the language settings where the content is managed.

Banner Heading

Defines the main message of the banner.

Usage:

• Highlight the offer
• Communicate the main value

Banner Description

Defines the supporting text below the heading.

Usage:

• Provide additional context
• Explain how the bundle works

Banner List

Defines a list of key points or highlights inside the banner.

Usage:

• Benefits
• Features
• Offer details

Important Notes:

• Content updates must reflect instantly in preview
• The same content is used across:
  • Editor preview
  • Storefront
  • Standalone bundle page

Styling (Banner Section)

All the visual styling on the banner is controlled here.

Typography

Controls text appearance:

• Font family (inherits from global settings or overridden)
• Heading size
• Description size
• Font weight

Colors

Background Color

Defines the banner background.

Text Color

Defines heading and description color.

Accent Color

Used to highlight important text or elements.

Layout & Spacing

Padding

Controls inner spacing:

• Top
• Bottom
• Left and right

Margin

Controls outer spacing:

• Space above
• Space below

Alignment

Controls text alignment:

• Left
• Center
• Right

Width Behavior

Defines how the banner fits within the layout:

• Full width
• Contained within bundle width

Responsive Behavior

Desktop

• Full layout with proper spacing

Mobile

• Content stacks vertically
• Font sizes adjust automatically

Important:

• Ensure readability on smaller screens
• Avoid text overflow

Dependency Rules

Template Dependency

• Some templates may:
  • Predefine banner placement
  • Limit customization options

Fixed Bundle Mode

• Banner may act as the primary message area
• Other elements may be hidden or simplified

Layout Interaction

• Banner appears above:
  • Product section
  • Bundle layout
• Spacing should align with overall layout settings

Common Issues to Avoid

• Banner not enabled but expected to show
• Content not updating from Language settings
• Poor contrast between text and background
• Spacing inconsistency
• Mobile layout issues

Best Practices

• Keep heading short and clear
• Use description for supporting information
• Use list items for quick readability
• Maintain strong visual contrast
• Keep spacing balanced with the layout

Final Summary

The Banner is a content-driven and styling-controlled component.

• Content is managed from Language
• Styling is controlled within the Banner section
• Visibility is controlled by enabling the banner