Callout Banner
A high-impact promotional banner with background image, overlay, and focused messaging. Perfect for announcements, sales, and brand statements.
Overview
The Callout Banner grabs attention with a full-width visual impact. Use it strategically to highlight key messages throughout your store.
🖼️
Background Image
Full-width visual impact
🎨
Overlay Control
Text readability on any image
🔘
Dual CTAs
Primary and secondary buttons
📐
Flexible Height
Adapt to content or fixed size
When to Use
- Homepage — Make a bold brand statement or announce sales
- Between sections — Break up content with a visual callout
- Landing pages — Direct attention to a key message or CTA
- Collection pages — Highlight seasonal promotions
Quick Setup
Add Callout Banner in 3 Steps
- 1In the Theme Editor, click Add section → Callout banner
- 2Add your Heading and optional Subheading
- 3Upload a Background image and configure the overlay
Section Settings
Content
| Setting | Type | Default | Description |
|---|---|---|---|
| Heading | richtext | Make a statement with a callout banner | Main headline. Supports rich text formatting (bold, italic, links). |
| Subheading | richtext | - | Supporting text below the heading. |
| Button text | text | - | CTA button label. Leave blank to hide the button. |
| Button URL | url | - | Link for the CTA button. |
Background
| Setting | Type | Default | Description |
|---|---|---|---|
| Image | image | - | Background image. Recommended: 1920×800px or larger. |
| Focal point | select | Center | Which part of the image stays visible when cropped. Options: Top, Center, Bottom. |
| Mobile height | select | Portrait (4:5) | Aspect ratio for mobile. Options: Adapt to image, Square (1:1), Portrait (4:5), Tall portrait (3:4), Full screen (9:16). |
| Show overlay | checkbox | true | Add a dark overlay to improve text readability. |
| Overlay opacity | range | 40% | Darkness of the overlay. Range: 0–90%. |
Layout
| Setting | Type | Default | Description |
|---|---|---|---|
| Content width | select | Boxed | 'Full width' stretches content edge-to-edge. 'Boxed' constrains to page width. |
| Text alignment | select | Center | Alignment of text content: Left, Center, Right. |
Animation
| Setting | Type | Default | Description |
|---|---|---|---|
| Image effect | select | Reveal on scroll | Background image animation. Options: None, Reveal on scroll, Zoom on scroll. |
| Text effect | select | None | Text animation. Options: None, Fade up on scroll. |
Colors
| Setting | Type | Default | Description |
|---|---|---|---|
| Color scheme | color_scheme | Scheme 1 | Apply a predefined color scheme to the section. |
Use Case Examples
Sale Announcement
- Heading: "Black Friday Sale"
- Subheading: "Up to 50% off everything"
- Button: "Shop Now" →
/collections/sale - Overlay: 50% opacity for readability
Brand Statement
- Heading: "Crafted with Purpose"
- Subheading: "Sustainable luxury for the modern home"
- No button (brand awareness focus)
- Animation: Reveal on scroll, Fade up text
Collection Highlight
- Heading: "New Collection"
- Button: "Explore" →
/collections/new - Image: Lifestyle photo from the collection
Best Practices
Visual Design
- Use high-quality images — The banner is full-width; low-resolution images look blurry
- Keep text concise — Short, impactful messages work best
- Test the overlay — Adjust opacity until text is readable against the image
- Consider focal point — Important image elements should stay visible
Content Strategy
- One clear CTA — Don't overwhelm with multiple actions
- Create urgency — Time-limited offers perform better
- Match the landing page — Button should lead to relevant content
Mobile Considerations
- Choose an appropriate mobile height — Portrait ratios show more image
- Test text length — Long headings may wrap awkwardly on small screens
- Verify readability — Overlay may need adjusting for mobile
Troubleshooting
Image looks stretched or cropped
- Adjust the Focal point setting
- Try a different Mobile height aspect ratio
- Use an image with the correct proportions
Text is hard to read
- Enable Show overlay if disabled
- Increase Overlay opacity
- Choose a color scheme with better contrast
Button not showing
- Ensure both Button text and Button URL are filled in
- Check that the URL is valid
Animation not playing
- Verify Image effect is not set to "None"
- Check if reduced motion is enabled in the visitor's browser
- Animations only play when scrolling the section into view