Homepage Banner Setup
Create compelling homepage banners to showcase your brand, promotions, and featured products:
Adding Banner Section
- Navigate to Theme Customizer > Home page
- Click "Add section"
- Select from banner options:
- "Image banner" - Full-width hero banner
- "Slideshow" - Multiple rotating banners
- "Video" - Video background banner
- "Rich text" - Text-based promotional banner
- Configure banner settings and content
- Save and preview changes
Image Banner Configuration
- Banner Image: Upload high-quality image (recommended: 1920x800px)
- Mobile Image: Optional separate image optimized for mobile (750x1000px)
- Image Position: Set focal point (center, top, bottom, left, right)
- Height: Choose from small (400px), medium (550px), large (750px), or adapt to image
- Overlay: Add color overlay with opacity control
Banner Content
- Heading: Main banner title (keep under 50 characters)
- Subheading: Supporting text or tagline
- Description: Additional promotional text
- Button Text: Call-to-action button label
- Button Link: Link to collection, product, or page
- Text Alignment: Left, center, right, or custom position
Slideshow Banner Setup
- Add slideshow section to homepage
- Click "Add slide" to create multiple slides
- Configure for each slide:
- Upload unique banner image
- Add slide-specific content and CTA
- Set slide duration and transition
- Configure slideshow settings:
- Auto-rotate: Enable/disable automatic sliding
- Slide duration: Time per slide (4-8 seconds recommended)
- Navigation: Show arrows and dots
- Transition style: Fade, slide, or custom effects
Banner Design Best Practices
Visual Guidelines:
- High Contrast: Ensure text is readable against background
- Focal Point: Place important text away from busy image areas
- Brand Consistency: Use brand colors and fonts
- Mobile-First: Test banner appearance on mobile devices
- Loading Speed: Optimize images (under 300KB recommended)
Banner Types and Use Cases
🎯 Promotional Banner
Highlight sales, discounts, or special offers with urgency-driven messaging.
Example: "50% Off Summer Collection - Limited Time!"
🏷️ Brand Story Banner
Introduce your brand values, mission, or unique selling proposition.
Example: "Sustainable Fashion for the Modern World"
🆕 Product Launch Banner
Feature new arrivals or featured products with direct shopping links.
Example: "Introducing Our Latest Collection - Shop Now"
Advanced Customization
- Custom CSS: Add unique animations and hover effects
- Parallax Scrolling: Create depth with background attachment
- Video Backgrounds: Use video files or YouTube/Vimeo embeds
- Interactive Elements: Add hotspots or product tags
- A/B Testing: Test different versions to optimize conversion
Performance Optimization
- Image Optimization: Use WebP format when possible
- Lazy Loading: Load banner images after critical content
- Responsive Images: Serve appropriate image sizes per device
- Minimize Slides: Limit slideshow to 3-5 slides maximum
- Preload Critical Images: Preload first slide image for instant display
Banner Analytics & Testing
- Click-through Rates: Monitor banner CTA performance
- Conversion Tracking: Measure sales from banner traffic
- Heat Mapping: Understand user interaction patterns
- Mobile vs Desktop: Compare performance across devices
- Seasonal Updates: Refresh banners regularly for relevance
Pro Tip: Use the "Image with text overlay" section for a more flexible banner that automatically adapts text size and positioning across all devices.