Skip to main content

​
What It Does

The Card Callout section creates a visually distinct, centered card perfect for highlighting important messages, announcements, promotions, or calls-to-action. The card stands out from regular content with elevated styling, drawing attention to your key message.

​
Getting Started

1

Add the Section

Add the Card Callout section to any template where you want a prominent, standalone message
2

Write Your Message

Add a title and supporting content text for your callout
3

Add Call-to-Action

Set button text and URL to direct customers to a specific action or page
4

Adjust Width

Choose section width (Narrower, Page, Narrow, or Fullwidth) based on design preference

​
Settings

Type: Text field
Default: “Callout title text”Main heading displayed prominently on the callout card. Should be concise and attention-grabbing.Examples by Use Case:Promotion:
  • “Limited Time: 25% Off Sitewide”
  • “Spring Sale Ends Sunday”
  • “Free Shipping Over $50”
Announcement:
  • “We’ve Moved!”
  • “New Collection Dropping Friday”
  • “Holiday Hours: Dec 24-26”
Value Proposition:
  • “100% Organic Materials”
  • “Handcrafted in Portland”
  • “30-Day Money-Back Guarantee”
Call-to-Action:
  • “Not Sure What to Buy?”
  • “Looking for a Gift?”
  • “Want 10% Off Your First Order?”
Best practices:
  • Keep short: 3-8 words ideal (longer titles may wrap awkwardly)
  • Front-load value: Put key benefit first (“Free Shipping” not “Get Free Shipping”)
  • Create urgency: Use time-sensitive language when appropriate
  • Be specific: “25% Off” beats “Big Sale”
Type: Textarea
Default: “Callout content text”Supporting text below the title. Provides additional context, details, or persuasive copy to complement the headline.Content Guidelines:Length:
  • Minimum: 10-20 words (too short feels incomplete)
  • Optimal: 20-40 words (1-2 sentences, easily scannable)
  • Maximum: 60 words (longer text diminishes “callout” impact)
Tone by Purpose:Promotional:
  • “Use code SPRING25 at checkout. Offer valid through Sunday, April 30. Cannot be combined with other discounts.”
Informational:
  • “Our team will be offline December 24-26 for the holidays. Orders placed during this time will ship starting December 27.”
Value-driven:
  • “Every product is handmade in our Portland studio using sustainably-sourced organic materials. Quality you can feel, values you can trust.”
Action-oriented:
  • “Take our 2-minute quiz and we’ll recommend the perfect products for your needs. Free shipping on all quiz orders!”
Best practices:
  • Complement title: Don’t repeat title verbatim; expand on it
  • Add specifics: Include dates, codes, conditions the title doesn’t cover
  • End with benefit: Last sentence should reinforce value (“Ships same-day!”)
  • Keep scannable: Short sentences, clear language
Type: Text field
Default: “Button text”Label for the call-to-action button. Should be action-oriented and clearly indicate what happens when clicked.Effective Button Text Examples:Shopping Actions:
  • “Shop Now”
  • “Shop the Sale”
  • “Browse Collection”
  • “View Products”
  • “Start Shopping”
Information Actions:
  • “Learn More”
  • “Read Details”
  • “See Our Story”
  • “Get Answers”
Interactive Actions:
  • “Take the Quiz”
  • “Contact Us”
  • “Get Started”
  • “Sign Up”
Urgency Actions:
  • “Claim Offer”
  • “Get 25% Off”
  • “Don’t Miss Out”
Best practices:
  • Use verbs: Start with action words (Shop, Browse, Claim, Get)
  • Be specific: “Shop Spring Sale” beats generic “Click Here”
  • Create urgency: “Claim Offer” implies scarcity more than “Learn More”
  • Match title tone: Playful titles need playful buttons, serious titles need serious buttons
  • Keep short: 1-3 words ideal, 4-5 words maximum
Avoid:
  • Generic “Click Here” or “Submit” (no context)
  • Overly long “Browse Our Entire Collection of Products” (too wordy)
  • Confusing “Maybe Later” or “Skip” (negative/ambiguous actions)
Type: URL field
Default: ”/” (homepage)Destination page when customers click the button. Can link to any page on your site or external URLs.Common Link Destinations:Collections:
  • /collections/sale - Sale collection
  • /collections/new-arrivals - New products
  • /collections/best-sellers - Popular products
  • /collections/all - All products
Pages:
  • /pages/about - About page
  • /pages/contact - Contact form
  • /pages/shipping - Shipping policy
  • /pages/quiz - Custom quiz page
Products:
  • /products/product-handle - Specific product
  • Useful for featured product promotions
Blog:
  • /blogs/news - Blog homepage
  • /blogs/news/article-title - Specific article
Cart/Discount:
  • /cart - Cart page
  • /discount/CODENAME - Auto-apply discount code
External:
  • https://yourapp.com/quiz - External quiz platform
  • https://instagram.com/yourstore - Social media
Best practices:
  • Test links: Verify URLs work before publishing
  • Use relative paths: /collections/sale instead of full URL when possible
  • Match button text: If button says “Shop Sale”, link to sale collection
  • Consider mobile: Ensure destination is mobile-friendly
Type: Select dropdown
Options: Narrower, Page, Narrow, Fullwidth
Default: Narrower (container—sm)Controls the maximum width of the callout card, affecting how prominent and spacious it appears.

​
Width Options

Narrower (container—sm) ← Default
  • Max width: ~600-700px
  • Use when: Short, punchy messages (promotional callouts, single CTAs)
  • Effect: Very focused, card “floats” prominently in center with significant whitespace
  • Best for:
    • “Free Shipping Over $50” promotions
    • Single-sentence announcements
    • Minimalist designs
    • Mobile-optimized layouts (minimal horizontal scrolling concern)
Page (container—default)
  • Max width: ~1000-1200px
  • Use when: Moderate content length, balanced between focus and readability
  • Effect: Card doesn’t feel cramped but maintains focus
  • Best for:
    • 2-3 sentence content
    • Value propositions with detail
    • Standard informational callouts
Narrow (container—md)
  • Max width: ~1400px
  • Use when: Longer content that needs breathing room
  • Effect: Wider card, content has more horizontal space
  • Best for:
    • Announcements with multiple details
    • Callouts with longer explanatory text
    • When adjacent to other fullwidth sections (maintain consistency)
Fullwidth (container—fullwidth)
  • Max width: Full page width (minus page margins)
  • Use when: Want maximum visual impact and horizontal space
  • Effect: Card spans nearly entire page, very prominent
  • Best for:
    • Homepage hero-style callouts
    • Bold promotional banners
    • When you need maximum horizontal content space
    • Below fullwidth sections (visual consistency)

​
Choosing the Right Width

Consider content length:
  • Short title + 1 sentence: Narrower or Page
  • Title + 2-3 sentences: Page or Narrow
  • Title + 3+ sentences: Narrow or Fullwidth
Consider page layout:
  • Standalone section: Narrower (creates strong focal point)
  • Between narrow sections: Narrower or Page (match adjacent widths)
  • Between fullwidth sections: Narrow or Fullwidth (maintain visual rhythm)
Consider aesthetic:
  • Minimalist: Narrower (emphasizes whitespace)
  • Balanced: Page or Narrow (standard layouts)
  • Bold: Fullwidth (maximum impact)
Mobile behavior: All widths become full-screen on mobile (minus margins), so width choice primarily affects desktop appearance.

​
Best practices

Keep It Concise

Callouts lose impact if too wordy. Aim for short title (under 8 words) and brief content (1-3 sentences). Length defeats “callout” purpose.

Use Strategic Placement

Place callouts where they add value without disrupting flow: between major page sections, above footer, or after key content. Avoid mid-paragraph breaks.

Create Visual Hierarchy

Don’t use multiple callout cards on one page—dilutes attention. Use one prominent callout, or space multiple callouts far apart (different page sections).

Match Button to Message

Button text and URL must align logically. “Shop Sale” should link to sale collection, not homepage. Mismatched CTAs confuse customers.

Test Urgency Language

Time-sensitive callouts (“Ends Sunday”) drive action but must be accurate. Update or remove expired promotions immediately to maintain trust.

Use Consistent Width

If your page has multiple sections with specific widths (narrow, fullwidth), choose callout width that matches adjacent sections for visual cohesion.

Highlight Value, Not Features

Focus on customer benefits (“Free Shipping”, “30-Day Returns”) rather than features (“We offer shipping”, “Returns available”). Benefits drive action.

Preview on Mobile

Callouts are often viewed on mobile. Ensure text is readable at mobile sizes and button is easily tappable (not too small or close to other elements).

​
Common Use Cases

​
Free Shipping Promotion

Settings:
  • Title: “Free Shipping Over $50”
  • Content: “Add $50 to your cart and get free standard shipping to the continental US. No code needed—discount applies automatically at checkout.”
  • Button text: “Shop Now”
  • Button URL: /collections/all
  • Section width: Narrower
Best for: E-commerce sites wanting to increase average order value with free shipping threshold

​
Limited-Time Sale

Settings:
  • Title: “Spring Sale: 25% Off Ends Sunday”
  • Content: “Use code SPRING25 at checkout. Offer valid through April 30. Cannot be combined with other discounts.”
  • Button text: “Shop the Sale”
  • Button URL: /collections/sale
  • Section width: Page
Best for: Seasonal promotions, holiday sales, clearance events

​
Business Announcement

Settings:
  • Title: “We’ve Moved to a Bigger Space!”
  • Content: “Visit us at our new location: 123 Main Street, Portland. Same team, same quality, more room for you. Stop by for a grand opening celebration May 1-7.”
  • Button text: “Get Directions”
  • Button URL: /pages/contact (page with map/address)
  • Section width: Narrow
Best for: Physical retailers announcing location changes, events, or milestones

​
Value Proposition Callout

Settings:
  • Title: “Handcrafted with Care”
  • Content: “Every piece is made-to-order in our Portland studio using sustainably-sourced materials. We never cut corners, and we never compromise on quality.”
  • Button text: “Our Story”
  • Button URL: /pages/about
  • Section width: Page
Best for: Artisan brands, sustainable products, craft-focused businesses

​
Interactive Quiz CTA

Settings:
  • Title: “Not Sure What to Order?”
  • Content: “Take our 2-minute quiz and we’ll recommend the perfect products for your needs. Plus, get 10% off your first quiz order!”
  • Button text: “Take the Quiz”
  • Button URL: /pages/quiz or external quiz app URL
  • Section width: Narrower
Best for: Stores with complex product lines, personalized products, or quiz apps

​
Holiday Hours

Settings:
  • Title: “Holiday Hours: Dec 24-26”
  • Content: “Our team will be offline December 24-26 celebrating with family. Orders placed during this time will ship starting December 27. Happy holidays!”
  • Button text: “Contact Us”
  • Button URL: /pages/contact
  • Section width: Page
Best for: Seasonal closures, holiday schedules, temporary service changes

​
Layout Behavior

​
Desktop Layout (1200px+)

The callout card displays as a centered, elevated card:
  • Card styling: Subtle background, border, or shadow (depends on theme design)
  • Text alignment: Center-aligned (title, content, button all centered)
  • Width: Constrained by Section Width setting (Narrower to Fullwidth)
  • Spacing: Significant whitespace around card creates “floating” effect
Visual hierarchy:
  1. Title (large, bold)
  2. Content (medium, regular weight)
  3. Button (prominent, theme button styling)

​
Mobile Layout (Under 768px)

On mobile, the card adjusts:
  • Full-width: Card spans mobile screen (minus standard margins)
  • All width options behave similarly on mobile (no horizontal space for width variation)
  • Stacked content: Title, content, button stack vertically
  • Touch-optimized: Button sized for easy tapping (minimum 44px tap target)
Mobile spacing: Padding/margins reduce to prevent card from feeling cramped on small screens.

​
Card Design Elements

The callout card typically includes:
  • Background: Light background color or subtle pattern (distinguishes from page background)
  • Border/Shadow: Subtle border or drop shadow for elevation effect
  • Padding: Generous internal padding around content (prevents text from touching edges)
  • Button: Styled with theme’s primary button colors
Theme variation: Exact card appearance depends on theme’s design system. Some themes use bold shadows, others use subtle borders.

​
Responsive Breakpoints

The section adapts across three responsive ranges:
  • Desktop (1200px+): Full section width variation visible, generous spacing
  • Tablet (768px - 1199px): Moderate width, balanced spacing
  • Mobile (under 768px): Full-width cards, compressed spacing
  • Newsletter - Alternative CTA for email signups (more specific than general callout)
  • Banner Fullwidth - Fullwidth banner with image (more visual than card callout)
  • Rich Text - For longer announcements or informational content without card styling
  • Countdown Timer - Add urgency to time-sensitive callouts with countdown

​
Technical Notes

​
Center Alignment

The Card Callout section uses CSS center alignment for all content:
  • text-align: center on title and content
  • margin: 0 auto on button (centered within card)
  • display: flex with justify-content: center for overall card positioning
This creates consistent, symmetrical presentation regardless of content length.

​
Section Width Implementation

Width options use CSS classes:
  • container--sm: ~600-700px max-width
  • container--default: ~1000-1200px max-width
  • container--md: ~1400px max-width
  • container--fullwidth: Full width (no max-width constraint)
These classes apply max-width values and margin: 0 auto for centering when below max-width.

​
Responsive Behavior

The card uses CSS media queries to adjust: 
@media (max-width: 768px) {
  .card-callout {
    padding: 20px; /* Reduce padding on mobile */
    margin: 15px; /* Reduce margins */
  }
}
Mobile breakpoints ensure card doesn’t feel cramped or excessively padded on small screens.

​
Button Styling

The button inherits theme’s button styles:
  • Colors from theme settings (primary button color)
  • Hover effects (color change, shadow, transform)
  • Font sizing and weight from theme typography
  • Border radius from theme’s button radius setting
Customization: To change button appearance beyond theme settings, use theme’s custom CSS.

​
Text Overflow Handling

Long titles:
  • Automatically wrap to multiple lines if needed
  • No character limit enforced (but readability suffers past ~12 words)
  • Font size doesn’t reduce (maintains readability)
Long content:
  • Wraps naturally within card width
  • No truncation (all text displays)
  • Consider visual balance—very long content makes card too tall
Best practice: Keep content concise to avoid excessive card height.

​
Accessibility Features

The section includes accessibility considerations:
  • Semantic HTML: Card uses <section> element
  • Heading hierarchy: Title uses appropriate heading level
  • Button accessibility: Button is keyboard-navigable with focus styles
  • ARIA labels: Button includes descriptive label (button text)
  • Color contrast: Theme ensures sufficient contrast for readability
Screen readers: Announce title, content, and button sequentially, providing complete context before action option.

​
Performance

The Card Callout section has minimal performance impact:
  • No images: Pure text/button (fast loading)
  • Minimal HTML: Simple DOM structure
  • CSS-only styling: No JavaScript dependencies
  • Fast render: Displays immediately (no data fetching or delays)
Mobile performance: Lightweight design ensures fast loading on slow connections.

​
Troubleshooting

Button not clickable/not working:
  • Verify Button URL is set (check it’s not empty)
  • Test URL directly in browser address bar (ensure it’s valid)
  • Check for typos in URL (extra spaces, missing slashes)
  • Ensure URL starts with / for internal links or https:// for external
Card looks cut off or too wide:
  • Check Section Width setting (try different width options)
  • Preview on actual screen size (editor may not show exact breakpoints)
  • If issue persists on mobile, may be theme CSS issue (contact theme support)
Text is hard to read (poor contrast):
  • Card background/text colors controlled by theme settings
  • Try changing theme’s color scheme (Theme settings > Colors)
  • For specific fixes, use custom CSS (requires theme code editing)
CTA button text truncated:
  • Keep button text short (1-4 words ideal)
  • Check mobile preview (longer text may wrap awkwardly on small screens)
  • Rephrase button with shorter synonym (“Shop Now” vs “Browse Full Collection”)
Card appears multiple times or in wrong location:
  • Check you haven’t added same section multiple times to template
  • Verify you’re editing correct template (Home vs Page vs Product)
  • Remove duplicate sections if found
Changes not saving:
  • Click “Save” in theme customizer before exiting
  • Hard refresh browser (Cmd/Ctrl + Shift + R) to clear cache
  • Check you’re editing live theme (not draft theme)
  • Try incognito/private window to rule out cache issues
Section doesn’t stand out visually:
  • Relies on theme’s card styling (some themes have subtle card designs)
  • Check theme settings for card shadow/border options
  • Consider using Banner Fullwidth section if you need more visual impact
  • For custom styling, add CSS (requires theme code editing)