Banner Component

The Banner component allows you to display important informational messages to customers during checkout with visual status indicators. This versatile component helps you communicate critical information, warnings, success messages, or general announcements in a way that catches customer attention without being intrusive.

desc - Display important informational messages with visual status indicators at checkout.

Example

Seen on Muscle Nation

Description

Banners appear as prominent message boxes with configurable visual styles that indicate the importance or type of message. You can choose from multiple status types including default, info, warning, success, and critical - each with distinct visual styling to communicate the right tone. The component supports rich content including titles, body text, and markdown formatting for emphasis. Banners can be made collapsible, allowing customers to dismiss them after reading.

Limitations

• Requires both title and text content
• Status types: default, info, warning, success, critical

Sample Use Cases

• Shipping Notifications: Display shipping delay notifications or holiday delivery warnings to manage customer expectations
• Promotional Announcements: Show promotional messages like "Free shipping on orders over $50"
• Policy Updates: Communicate important policy updates or safety measures at checkout

Display Rules

Supports advanced display rules for conditional rendering. See Display Rules System documentation for details.

Key Features

• Multiple status types (default, info, warning, success, critical)
• Markdown formatting support
• Collapsible banners
• Localization support for multi-language stores
• Conditional rendering based on cart/customer conditions

Examples

Shipping Delay Warning

Display a warning banner during holiday seasons to manage shipping expectations:

Title: Holiday Shipping Notice
Status: warning
Content: Due to increased holiday demand, orders may take an additional 2-3 business days to process. Order by Dec 18th to ensure delivery by Christmas.

Free Shipping Promotion

Show a success banner when customers qualify for free shipping:

Title: Free Shipping Unlocked! 🎉
Status: success
Content: Your order qualifies for free standard shipping. Your items will arrive in 5-7 business days.

COVID Safety Measures

Inform customers about safety protocols:

Title: Our Commitment to Safety
Status: info
Content: All orders are packed with enhanced safety measures. Our team follows strict hygiene protocols to ensure your order arrives safely.