Hero Section

The Hero Section is the first visual element customers see when they land on your homepage. It is designed to capture attention, communicate your brand message, and guide customers toward key actions. A compelling hero section can significantly increase engagement and conversion rates.

Overview

The Hero Section is positioned directly below the Navigation Bar and spans the full width of the page. It is your store's most prominent visual space and sets the tone for the entire shopping experience.

The Hero Section can include:

Large banner images or background visuals
Main headline and sub-headline text
Promotional messaging and offers
Call-to-action buttons (Shop Now, Explore, View Collection)
Multiple slides or a single static banner

Design Layouts

The Hero Section provides multiple professionally designed layouts. Each layout changes the arrangement of banners, text, and promotional content.

Available layout options include:

Design 1 — Full-width single banner with centered text overlay
Design 2 — Split layout with image on one side and text on the other
Design 3 — Multiple banner carousel with navigation dots
Design 4 — Video background with text overlay
Design 5 — Minimal text-focused layout with subtle background

Select the layout that best matches your store's branding and the type of promotion you want to highlight.

Figure 1: Hero Section layout variations with different text and image arrangements

Color & Style Options

The Hero Section inherits colours from your global Color & Style configuration. You can further customize the Hero Section to create visual impact.

Customizable elements include:

Overlay Colour — Semi-transparent overlay on banner images for text readability
Text Colour — Headline, sub-headline, and body text colours
Button Colours — Primary CTA button background and text colours
Secondary Button — Outline or ghost button styles
Gradient Overlay — Add gradient effects for modern visual appeal

Banner Images

Banner images are the visual foundation of your Hero Section. They should be high-quality, relevant to your brand, and optimized for web display.

Image Guidelines:

Use high-resolution images (recommended 1920x800 pixels or higher)
Ensure images are relevant to your current promotions or brand message
Leave space for text overlay — avoid busy or cluttered images
Use consistent image dimensions across all hero banners
Optimize file size for fast loading without compromising quality
Consider seasonal updates to keep the homepage fresh

Figure 2: Example hero banner with text overlay and call-to-action

Text Readability

Always ensure text is readable over your banner images. Use overlay colours or choose images with natural dark/light areas where text will be placed.

Headings & Text

Configure the textual content displayed in your Hero Section to communicate your brand message effectively.

Available text fields:

Main Heading — The primary headline (e.g., "Summer Collection 2026")
Sub Heading — Supporting text below the main headline
Promotional Text — Special offers, discounts, or urgency messaging
Description — Brief paragraph explaining the promotion or brand

// Example hero content
Main Heading:    "Discover Your Style"
Sub Heading:     "New Summer Collection"
Promo Text:      "Up to 50% Off"
Description:     "Explore the latest trends in fashion with our curated summer collection."
CTA Button:      "Shop Now"

Call-to-Action Buttons

Call-to-action (CTA) buttons guide customers toward key actions. The Hero Section supports one or more CTA buttons depending on the selected layout.

Configuration options:

Button Text — Custom labels (e.g., "Shop Now", "Explore", "Learn More")
Button Link — URL or internal page to navigate to
Button Style — Solid, outline, or ghost button designs
Button Colour — Background and text colours
Button Size — Small, medium, or large

Effective CTAs

Use action-oriented language for CTA buttons. "Shop Now", "Get Started", and "Explore Collection" perform better than generic labels like "Click Here".

Best Practices

Keep the main headline short and impactful — under 6 words is ideal
Use high-quality, relevant images that reflect your brand
Update hero banners regularly for seasonal campaigns and promotions
Ensure text is readable with sufficient contrast against images
Use one primary CTA — avoid confusing customers with too many options
Test the hero section on mobile devices — it should look great on all screens
Align hero messaging with your current marketing campaigns
Keep load times fast by optimizing banner image file sizes
Use urgency or scarcity messaging sparingly but effectively