Callout Component

The Callout component creates eye-catching, bordered boxes that draw attention to important information, offers, or trust signals. This highly customizable component is perfect for highlighting key messages without being as prominent as a full banner.

desc - Create eye-catching callout boxes to highlight key information, offers, or trust signals.

Example

Seen on Booie Beauty

Description

Callouts are versatile content boxes with extensive styling options including custom borders, background colors, and text formatting. They're ideal for trust badges, guarantees, promotional messages, or special offers. Add icons for visual emphasis, making them perfect for security badges or feature highlights. Fully customizable to match your brand.

Sample Use Cases

• Trust Badges: Display trust badges like "30-Day Money Back Guarantee" with an icon
• Limited-Time Offers: Highlight limited-time offers in a visually distinct box
• Policy Highlights: Show shipping or return policy highlights to reduce customer anxiety

Display Rules

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

Key Features

• Customizable borders and background colors
• Text styling options
• Icon support for visual emphasis
• Localization support
• Conditional rendering based on cart/customer conditions

Examples

Money Back Guarantee

Create a trust callout with a guarantee badge:

Content: 🛡️ 30-Day Money Back Guarantee
Subtitle: Shop with confidence - if you're not satisfied, return it within 30 days for a full refund.
Border: Accent color
Background: Light accent

Limited Time Offer

Highlight a time-sensitive promotion:

Content: ⏰ Limited Time: Free Gift with Purchase!
Subtitle: Add $50+ to your order and receive a complimentary gift. Offer ends soon!
Border: Bold
Background: Subtle highlight

Secure Checkout Badge

Build customer confidence with a security callout:

Content: 🔒 Secure Checkout
Subtitle: Your payment information is encrypted and secure. We never store your credit card details.
Border: Subtle
Background: Neutral