7.0 KiB
7.0 KiB
Hero Section Component
Contents
- Overview
- Hero Types and When to Use
- Content Guidelines
- Multiple Heroes (Carousel)
- Mobile Hero
- Performance
- Checklist
Overview
Hero section is the prominent banner at top of homepage, immediately below navigation. First content users see - sets tone for shopping experience.
Assumed knowledge: AI agents know how to build full-width banners with images and text overlays. This focuses on ecommerce hero patterns.
Key requirements:
- Above the fold (immediately visible)
- Clear value proposition or promotional message
- High-quality imagery
- Strong call-to-action
- Fast loading (critical for first impression)
Hero Types and When to Use
1. Full-Width Banner (Most Common)
Characteristics:
- Spans entire viewport width
- Large background image or video
- Text overlay with headline + CTA
- Single focused message
Best for:
- Seasonal campaigns ("Summer Sale")
- New product arrivals
- Brand storytelling
- Single promotional focus
- Simple, bold message
Example: Background image of products, headline "40% Off Summer Sale", CTA "Shop Now"
2. Split Hero (Image + Content)
Characteristics:
- 50/50 or 60/40 split layout
- Image on one side, text content on other
- No text overlay on image
- Cleaner, easier to read
Best for:
- Product launches (show product clearly)
- Detailed messaging (more text space)
- Accessibility (no text-on-image contrast issues)
- Professional/B2B stores
Example: Product image (left 50%), headline + benefits + CTA (right 50%)
3. Minimal Hero
Characteristics:
- Large image, minimal text
- Image does storytelling
- Subtle headline, small CTA
- Emphasis on visual brand
Best for:
- Luxury brands (sophisticated aesthetic)
- Lifestyle brands (aspirational imagery)
- Photography-focused products
- Brand over promotion
4. Video Hero
Characteristics:
- Background video (muted, looping)
- Text overlay on video
- Fallback image for slow connections
Best for:
- Fashion brands (show products in motion)
- Lifestyle products (demonstrate usage)
- High-budget campaigns
- Brand storytelling with motion
Important: Auto-play muted, provide play/pause controls, optimize file size (<5MB), use poster image fallback.
5. Product Showcase Hero
Characteristics:
- Multiple featured products in hero
- Grid of 2-4 products
- Quick links to product pages
- Less promotional, more discovery
Best for:
- Multi-category stores
- Product-focused (not campaign-focused)
- Quick product discovery
- Minimal marketing, maximum browsing
Content Guidelines
Headline best practices:
- Short and impactful (5-10 words)
- Clear value proposition ("Free Shipping on All Orders")
- Urgency if time-sensitive ("48-Hour Flash Sale")
- Benefit-focused ("Upgrade Your Style")
- Avoid generic ("Welcome to Our Store")
Subtext (optional):
- 10-20 words maximum
- Expand on headline benefit
- Add context or details
- Not always necessary (clean design)
Call-to-action:
- Single primary CTA button
- Action-oriented text ("Shop Now", "Explore Category", "Get Started")
- High contrast (stands out on image)
- Large enough (48px height minimum)
- Link to relevant landing page (sale, category, product listing)
Image selection:
- High quality, professional photography
- Shows products or lifestyle context
- Represents brand aesthetic
- Optimized for web (<500KB)
- Responsive (different crops for mobile)
- Ensure text overlay is readable (adequate contrast)
Multiple Heroes (Carousel)
Carousel pattern:
- 2-4 slides rotating automatically
- Each slide = independent hero (own message, image, CTA)
- Auto-rotate every 5-7 seconds (slow enough to read)
- Manual controls (prev/next arrows, dot indicators)
- Pause on hover (accessibility)
When to use carousel:
- Multiple concurrent campaigns (Winter Sale + New Arrivals)
- Different audience segments (Men/Women/Kids)
- Seasonal variety showcase
- Limited above-fold space
When NOT to use carousel:
- Single focused campaign (just use one hero)
- Users rarely see slides beyond first (carousel blindness)
- Slower page load (multiple images)
- Accessibility concerns (auto-rotating content)
Carousel best practices:
- Max 3-4 slides (more = ignored)
- First slide most important (most viewed)
- Consistent layout across slides
- Clear indicators showing progress
- Don't rely on later slides for critical info
- Pause on interaction (hover, focus)
Mobile Hero
Mobile adjustments (CRITICAL):
Layout:
- Full-width, portrait aspect (2:3 or 3:4)
- Vertical composition (text overlays center/bottom)
- Larger text for readability
- Simplified message (shorter headline)
Split hero on mobile:
- Stack vertically (image top, text bottom)
- Don't use side-by-side (too cramped)
Performance:
- Smaller images (<300KB)
- Different image crop for mobile portrait
- Use
srcsetor<picture>for responsive images - Consider static image instead of video (mobile data)
Touch interactions:
- Large CTA button (48px height minimum)
- Easy carousel controls (if used)
- Swipe gesture for carousel slides
Performance
Critical for first impression:
Image optimization:
- WebP format with JPEG fallback
- Lazy load below-fold content (not hero - it's above fold)
- Responsive images (mobile gets smaller size)
- Target: <500KB desktop, <300KB mobile
- Use CDN for faster delivery
Video optimization:
- <5MB file size maximum
- Muted, autoplay, loop
- Poster image (shows before video loads)
- Fallback to image on slow connections
- Consider not using on mobile (data/performance)
LCP optimization:
- Hero image is often Largest Contentful Paint
- Preload hero image:
<link rel="preload" as="image" href="hero.jpg"> - Inline critical CSS for hero
- Avoid layout shift (set image dimensions)
Target metrics:
- LCP < 2.5 seconds
- No layout shift (CLS < 0.1)
- Fast interaction (hero CTA clickable immediately)
Checklist
Essential features:
- Above the fold (immediately visible)
- Clear headline (5-10 words, value proposition)
- High-quality image (professional, on-brand)
- Primary CTA button (action-oriented, high contrast)
- Fast loading (<500KB image desktop, <300KB mobile)
- Responsive images (different sizes/crops for devices)
- Mobile: Portrait aspect ratio (2:3 or 3:4)
- Mobile: Vertical text placement (center/bottom)
- Mobile: Large CTA (48px height minimum)
- Text overlay readable (adequate contrast, background overlay)
- If carousel: Max 3-4 slides
- If carousel: Auto-rotate 5-7 seconds
- If carousel: Pause on hover/focus
- If carousel: Manual controls (arrows, dots)
- If video: Muted, autoplay, loop
- If video: Poster image fallback
- If video: <5MB file size
- Preload hero image (LCP optimization)
- No layout shift (set image dimensions)
- ARIA labels on carousel controls
- Keyboard accessible (Tab to CTA, arrow keys for carousel)