Appearance

Hero ​

What This Section Does ​

Create an eye-catching split-screen layout that combines stunning visuals (images or videos) with your most important message. This section is designed to make a strong first impression and immediately communicate your brand's value to visitors.

Perfect for:

  • Homepage hero sections that introduce your brand or main product
  • Landing pages for specific campaigns or promotions
  • Product launches with dramatic visual impact
  • Brand storytelling with lifestyle imagery and compelling copy

How to Add It ​

Step 1: Add the Section

  1. In your Shopify admin, go to Online Store → Themes
  2. Click Customize next to your live theme
  3. Click Add section in your main content area
  4. Choose Hero from the list

Step 2: Set Up Your Visual

  1. Choose between image or video for your visual element
  2. Upload a high-quality image or video file
  3. Select whether the visual appears on the left or right side
  4. Add your headline, description, and call-to-action button

Key Settings to Configure ​

Visual Content ​

Image vs. video selection: Choose the right media type for your message

  • When to use images: For product showcases, lifestyle shots, or when you want fast loading
  • When to use videos: For product demonstrations, brand stories, or to show movement and action
  • Pro tip: Videos can be more engaging but use larger file sizes - keep videos under 10MB for good performance

Layout Positioning ​

Split-screen arrangement: Control how content is organized

  • Image position: Choose left or right side for your visual element
  • Content alignment: Position your text content (top, middle, bottom) within its panel
  • Aspect ratio: Select the height ratio that works best with your image (square, widescreen, etc.)
  • Best practice: Place your most compelling visual element on the side that customers see first

Content Strategy ​

Text and call-to-action setup: Create compelling messaging that drives action

  • Headline focus: Make your main message clear and benefit-focused
  • Supporting text: Add 1-2 sentences that explain your value proposition
  • Strong CTA: Use action-oriented button text that tells customers exactly what to do next
  • Pro tip: Keep text concise since you have limited space in the split-screen layout

Pro Tips for Success ​

Best Practices

  • Use high-resolution images (at least 1800px wide) for crisp display on all devices
  • Keep headlines short and punchy - customers scan quickly on hero sections
  • Choose images that complement rather than compete with your text content
  • Test your hero section on mobile to ensure both image and text are clearly visible
  • Use contrasting colors between your image and text areas for better readability

Common Mistakes

  • Using busy background images that make text hard to read
  • Making headlines too long for the available space
  • Choosing images that don't relate to your message or products
  • Forgetting to optimize video file sizes which can slow page loading
  • Using low-contrast color combinations that reduce text readability