Hero Section

Overview

The Hero Section allows you to create engaging, conversion-focused banners with:

Multiple content blocks for flexible layouts
Advanced animations and transitions
Responsive design that looks great on all devices
Background image/video support
Call-to-action buttons with customizable styles
Statistics display to build trust
Overlay controls for text readability

Content Blocks

The Hero Section uses a block-based system for maximum flexibility:

Eyebrow Block

Add a small text element above your main heading to provide context or categorization.

{% when 'eyebrow' %}
  {% if block.settings.text != blank %}
    <p class="hero-section__eyebrow" {{ block.shopify_attributes }}>
      {{ block.settings.text }}
    </p>
  {% endif %}

Settings:

Text: The eyebrow text to display
Color: Text color (inherits from theme or custom)
Font Size: Small, Medium, Large

Heading Block

Your main headline - the most important text element.

{% when 'heading' %}
  {% if block.settings.text != blank %}
    <h1 class="hero-section__heading" {{ block.shopify_attributes }}>
      {{ block.settings.text }}
    </h1>
  {% endif %}

Settings:

Text: Your main headline
Color: Text color
Font Size: Extra Small, Small, Medium, Large, Extra Large
Font Weight: Light, Normal, Medium, Bold, Extra Bold

Subheading Block

Secondary headline to provide additional context.

{% when 'subheading' %}
  {% if block.settings.text != blank %}
    <h2 class="hero-section__subheading" {{ block.shopify_attributes }}>
      {{ block.settings.text }}
    </h2>
  {% endif %}

Settings:

Text: Subheading text
Color: Text color
Font Size: Small, Medium, Large
Font Weight: Light, Normal, Medium, Bold

Description Block

Longer text content to provide details or benefits.

{% when 'description' %}
  {% if block.settings.text != blank %}
    <div class="hero-section__description" {{ block.shopify_attributes }}>
      {{ block.settings.text }}
    </div>
  {% endif %}

Settings:

Text: Description content (supports HTML)
Color: Text color
Font Size: Small, Medium, Large
Line Height: Tight, Normal, Relaxed

Buttons Block

Call-to-action buttons to drive conversions.

{% when 'buttons' %}
  <div class="hero-section__buttons" {{ block.shopify_attributes }}>
    {% if block.settings.button_text_1 != blank %}
      <a href="{{ block.settings.button_url_1 | default: '#' }}" 
         class="btn btn--{{ block.settings.button_style_1 }} btn--{{ block.settings.button_size }}">
        {{ block.settings.button_text_1 }}
      </a>
    {% endif %}
    {% if block.settings.button_text_2 != blank %}
      <a href="{{ block.settings.button_url_2 | default: '#' }}" 
         class="btn btn--{{ block.settings.button_style_2 }} btn--{{ block.settings.button_size }}">
        {{ block.settings.button_text_2 }}
      </a>
    {% endif %}
  </div>

Settings:

Button 1 Text: Primary call-to-action text
Button 1 URL: Link destination
Button 1 Style: Primary, Secondary, Outline, Ghost
Button 2 Text: Secondary call-to-action text
Button 2 URL: Link destination
Button 2 Style: Primary, Secondary, Outline, Ghost
Button Size: Small, Medium, Large

Statistics Block

Display key statistics to build trust and credibility.

{% when 'stats' %}
  <div class="hero-section__stats" {{ block.shopify_attributes }}>
    {% if block.settings.stat_1_number != blank %}
      <div class="hero-section__stat">
        <span class="hero-section__stat-number">{{ block.settings.stat_1_number }}</span>
        <span class="hero-section__stat-label">{{ block.settings.stat_1_label }}</span>
      </div>
    {% endif %}
    {% if block.settings.stat_2_number != blank %}
      <div class="hero-section__stat">
        <span class="hero-section__stat-number">{{ block.settings.stat_2_number }}</span>
        <span class="hero-section__stat-label">{{ block.settings.stat_2_label }}</span>
      </div>
    {% endif %}
    {% if block.settings.stat_3_number != blank %}
      <div class="hero-section__stat">
        <span class="hero-section__stat-number">{{ block.settings.stat_3_number }}</span>
        <span class="hero-section__stat-label">{{ block.settings.stat_3_label }}</span>
      </div>
    {% endif %}
  </div>

Settings:

Stat 1 Number: First statistic number
Stat 1 Label: Description for first statistic
Stat 2 Number: Second statistic number
Stat 2 Label: Description for second statistic
Stat 3 Number: Third statistic number
Stat 3 Label: Description for third statistic

Section Settings

Layout Settings

Full Width: Enable to make the section span the full viewport width
Hero Height: Set the minimum height of the hero section (300px - 800px)
Content Alignment: Left, Center, Right
Content Position: Top, Center, Bottom

Background Settings

Background Image: Upload or select a background image
Background Video: Upload a video file (MP4 format)
Background Color: Fallback color when no image/video is set
Overlay Color: Color overlay for better text readability
Overlay Opacity: Control overlay transparency (0% - 100%)

Spacing Settings

Padding Top: Space above the section (0px - 100px)
Padding Bottom: Space below the section (0px - 100px)
Content Spacing: Space between content blocks (Tight, Normal, Relaxed)

Animation Settings

Animation Type: None, Fade In, Slide Up, Slide Down, Zoom In
Animation Duration: Fast (0.3s), Normal (0.6s), Slow (1s)
Animation Delay: Delay before animation starts (0s - 2s)

CSS Classes

The Hero Section uses these CSS classes for styling:

.hero-section {
  position: relative;
  min-height: var(--hero-min-height);
  display: flex;
  align-items: center;
  padding-top: var(--section-padding-top);
  padding-bottom: var(--section-padding-bottom);
}

.hero-section--full-width {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.hero-section__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.hero-section__text-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hero-section__eyebrow {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hero-text-color);
}

.hero-section__heading {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--hero-text-color);
}

.hero-section__subheading {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--hero-text-color);
}

.hero-section__description {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--hero-text-color);
  opacity: 0.9;
}

.hero-section__buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-section__stats {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}

.hero-section__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-section__stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--hero-text-color);
}

.hero-section__stat-label {
  font-size: 0.875rem;
  color: var(--hero-text-color);
  opacity: 0.8;
}

.hero-section__media {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-section__image {
  max-width: 100%;
  height: auto;
}

.hero-section__img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

Responsive Design

The Hero Section is fully responsive with these breakpoints:

/* Mobile (up to 768px) */
@media (max-width: 768px) {
  .hero-section__content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .hero-section__heading {
    font-size: 2rem;
  }
  
  .hero-section__subheading {
    font-size: 1.25rem;
  }
  
  .hero-section__buttons {
    justify-content: center;
  }
  
  .hero-section__stats {
    justify-content: center;
  }
}

/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero-section__heading {
    font-size: 2.5rem;
  }
  
  .hero-section__subheading {
    font-size: 1.375rem;
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .hero-section__content {
    gap: 3rem;
  }
  
  .hero-section__heading {
    font-size: 3rem;
  }
}

Best Practices

Content Strategy

Clear Value Proposition: Your heading should clearly communicate what you offer
Benefit-Focused: Focus on benefits, not just features
Action-Oriented: Use strong call-to-action buttons
Trust Signals: Include statistics or testimonials when relevant

Visual Design

High-Quality Images: Use professional, high-resolution background images
Text Readability: Ensure sufficient contrast between text and background
Visual Hierarchy: Use different font sizes to create clear hierarchy
White Space: Don’t overcrowd the hero section

Performance

Optimize Images: Compress background images for faster loading
Lazy Loading: Background images are automatically lazy-loaded
Critical CSS: Hero styles are inlined for faster rendering
Mobile Optimization: Test on various mobile devices

Examples

E-commerce Hero

{% section 'hero-section' %}
  {% block 'eyebrow' %}
    {% assign text = 'New Collection' %}
  {% endblock %}
  
  {% block 'heading' %}
    {% assign text = 'Premium Quality Products' %}
  {% endblock %}
  
  {% block 'subheading' %}
    {% assign text = 'Discover our latest collection of handcrafted items' %}
  {% endblock %}
  
  {% block 'description' %}
    {% assign text = 'Shop our curated selection of premium products designed for modern living. Free shipping on orders over $50.' %}
  {% endblock %}
  
  {% block 'buttons' %}
    {% assign button_text_1 = 'Shop Now' %}
    {% assign button_url_1 = '/collections/all' %}
    {% assign button_style_1 = 'primary' %}
    {% assign button_text_2 = 'Learn More' %}
    {% assign button_url_2 = '/pages/about' %}
    {% assign button_style_2 = 'outline' %}
  {% endblock %}
  
  {% block 'stats' %}
    {% assign stat_1_number = '10K+' %}
    {% assign stat_1_label = 'Happy Customers' %}
    {% assign stat_2_number = '500+' %}
    {% assign stat_2_label = 'Products' %}
    {% assign stat_3_number = '24/7' %}
    {% assign stat_3_label = 'Support' %}
  {% endblock %}
{% endsection %}

Service-Based Hero

{% section 'hero-section' %}
  {% block 'eyebrow' %}
    {% assign text = 'Professional Services' %}
  {% endblock %}
  
  {% block 'heading' %}
    {% assign text = 'Transform Your Business' %}
  {% endblock %}
  
  {% block 'subheading' %}
    {% assign text = 'Expert solutions for modern businesses' %}
  {% endblock %}
  
  {% block 'description' %}
    {% assign text = 'We help businesses grow with our comprehensive suite of professional services. From strategy to implementation, we\'ve got you covered.' %}
  {% endblock %}
  
  {% block 'buttons' %}
    {% assign button_text_1 = 'Get Started' %}
    {% assign button_url_1 = '/pages/contact' %}
    {% assign button_style_1 = 'primary' %}
    {% assign button_text_2 = 'View Services' %}
    {% assign button_url_2 = '/pages/services' %}
    {% assign button_style_2 = 'secondary' %}
  {% endblock %}
{% endsection %}

Troubleshooting

Common Issues

Text Not Visible: Check overlay opacity and text color contrast
Images Not Loading: Verify image file size and format
Layout Breaking: Check content length and responsive settings
Buttons Not Working: Verify URL settings and link validity

Performance Issues

Slow Loading: Optimize background images (compress, use WebP)
Layout Shift: Set proper image dimensions
Animation Lag: Reduce animation complexity on mobile devices

Featured Collection - Showcase products below the hero
Product Showcase - Highlight specific products
Testimonials - Build trust with customer reviews
Newsletter Signup - Capture leads

Getting Started

Theme sections

E-commerce Features

Customization

Overview

Content Blocks

Eyebrow Block

Heading Block

Subheading Block

Description Block

Buttons Block

Statistics Block

Section Settings

Layout Settings

Background Settings

Spacing Settings

Animation Settings

CSS Classes

Responsive Design

Best Practices

Content Strategy

Visual Design

Performance

Examples

E-commerce Hero

Service-Based Hero

Troubleshooting

Common Issues

Performance Issues

​Overview

​Content Blocks

​Eyebrow Block

​Heading Block

​Subheading Block

​Description Block

​Buttons Block

​Statistics Block

​Section Settings

​Layout Settings

​Background Settings

​Spacing Settings

​Animation Settings

​CSS Classes

​Responsive Design

​Best Practices

​Content Strategy

​Visual Design

​Performance

​Examples

​E-commerce Hero

​Service-Based Hero

​Troubleshooting

​Common Issues

​Performance Issues

​Related Sections

Overview

Content Blocks

Eyebrow Block

Heading Block

Subheading Block

Description Block

Buttons Block

Statistics Block

Section Settings

Layout Settings

Background Settings

Spacing Settings

Animation Settings

CSS Classes

Responsive Design

Best Practices

Content Strategy

Visual Design

Performance

Examples

E-commerce Hero

Service-Based Hero

Troubleshooting

Common Issues

Performance Issues

Related Sections