Image Banner Component

The Image Banner component combines compelling imagery with text overlays to create visually rich, brand-forward content at checkout. Perfect for maintaining brand identity and creating emotional connections during final purchase steps.

desc - Combine compelling imagery with text overlays for visually rich, brand-forward content.

Example

Seen on Muscle Nation

Description

Upload images and overlay text with customizable positioning, sizing, and styling. Perfect for brand messaging, seasonal campaigns, or promotional content. Text can be positioned at top, center, or bottom with full styling control. Images automatically optimized for checkout performance across mobile and desktop devices.

Limitations

• Requires image upload
• Text positioning: top, center, or bottom
• Images should be optimized for best performance

Sample Use Cases

• Seasonal Campaigns: Display seasonal campaign imagery (Holiday sales, Summer promotions) with branded messaging
• Brand Story: Show brand story elements like "Family-owned since 1995" with lifestyle photography
• Product Features: Highlight product features with hero-style imagery and overlay text

Display Rules

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

Key Features

• Image optimization for checkout performance
• Responsive design (mobile and desktop)
• Text positioning control (top, center, bottom)
• Text styling options
• Localization support

Best Practices

Image Optimization

• Recommended dimensions: 1200px x 400px for banners
• File format: JPEG or WebP for photos, PNG for graphics with transparency
• File size: Keep under 200KB for optimal loading
• Mobile consideration: Ensure key elements are visible when cropped for mobile

Text Positioning

• Top: Best for headlines that shouldn't be obscured by product images
• Center: Ideal for hero-style messaging with strong imagery
• Bottom: Works well for attribution or subtle calls-to-action

Text Readability

• Use high contrast between text and background
• Consider adding semi-transparent overlays for better text visibility
• Test on both mobile and desktop to ensure readability

Examples

Holiday Campaign

Image: Winter holiday scene with products
Text: "Holiday Sale - 25% Off Sitewide"
Position: Center
Text style: Large, bold, white with shadow

Brand Heritage

Image: Founder portrait or historical shop photo
Text: "Family Owned & Operated Since 1995"
Position: Bottom
Text style: Medium, elegant font, white

Summer Promotion

Image: Bright summer beach scene
Text: "Summer Collection Now Available"
Position: Top
Text style: Large, bold, yellow accent