Hero Split
A dramatic two-column hero layout with side-by-side images or videos. Perfect for showcasing dual campaigns, collections, or complementary product categories.
Overview
Hero Split creates visual impact by presenting two equally powerful visual columns, each with its own content overlay. An optional center overlay can span across both columns for unified messaging.
⚡
Dual Columns
Two independent image or video sections
🎬
Video Support
Background video with autoplay
📱
Mobile Stacking
Columns stack vertically on small screens
✨
Animation Effects
Reveal and zoom scroll animations
When to Use
- Homepage — Feature two collections or campaigns side by side
- Landing pages — Compare products or showcase complementary categories
- Campaign pages — Highlight "Him & Her" or "Before & After" concepts
- Seasonal launches — Display two different seasons or themes
Quick Setup
Add Hero Split in 3 Steps
- 1In the Theme Editor, click Add section → Hero – Split (2 columns)
- 2Upload images or videos for the Left and Right columns
- 3Add headings and buttons for each column
Section Settings
Layout
| Setting | Type | Default | Description |
|---|---|---|---|
| Desktop height | select | Full screen | Height on desktop. Options: Full screen (100vh), Tall (90vh), Medium (75vh). |
| Mobile height | select | Tall | Height on mobile. Options: Full screen, Tall (80vh), Medium (60vh). |
Animation
| Setting | Type | Default | Description |
|---|---|---|---|
| Image effect | select | Reveal on scroll | Animation for images/videos. Options: None, Reveal on scroll (curtain effect), Zoom on scroll. |
| Text effect | select | None | Animation for text content. Options: None, Fade up on scroll. |
Left Column — Media
| Setting | Type | Default | Description |
|---|---|---|---|
| Type | select | Image | Media type: Image or Video. |
| Image | image | - | Image for the left column. Recommended: 1200×1600px or larger. |
| Video | video | - | Video plays automatically, muted, and loops. |
| Play video once, then show image | checkbox | false | When enabled, the video plays once and then fades to the static image. Perfect for intro animations that settle into a hero image. |
| Focal point | select | Center | Which part of the image stays visible when cropped. Options: Top, Center, Bottom. |
Left Column — Content
| Setting | Type | Default | Description |
|---|---|---|---|
| Heading | text | - | Main headline for the left overlay. |
| Subheading | text | - | Supporting text below the heading. |
| Position | select | Bottom left | Placement of the text overlay. Options: All 9 positions (top/middle/bottom × left/center/right). |
| Light text | checkbox | true | Use white text for dark backgrounds. |
| Primary button | text | Shop now | Label for the primary CTA button. |
| Primary button URL | url | - | Link for the primary button. |
| Secondary button | text | - | Label for the secondary CTA button. |
| Secondary button URL | url | - | Link for the secondary button. |
Right Column — Media
| Setting | Type | Default | Description |
|---|---|---|---|
| Type | select | Image | Media type: Image or Video. |
| Image | image | - | Image for the right column. |
| Video | video | - | Video plays automatically, muted, and loops. |
| Play video once, then show image | checkbox | false | When enabled, the video plays once and then fades to the static image. Perfect for intro animations that settle into a hero image. |
| Focal point | select | Center | Which part of the image stays visible when cropped. |
Right Column — Content
| Setting | Type | Default | Description |
|---|---|---|---|
| Heading | text | - | Main headline for the right overlay. |
| Subheading | text | - | Supporting text below the heading. |
| Position | select | Bottom left | Placement of the text overlay. |
| Light text | checkbox | true | Use white text for dark backgrounds. |
| Primary button | text | Discover | Label for the primary CTA button. |
| Primary button URL | url | - | Link for the primary button. |
| Secondary button | text | - | Label for the secondary CTA button. |
| Secondary button URL | url | - | Link for the secondary button. |
Block Types
Left Overlay Block
Override the left column's content settings using a block for more flexibility.
| Setting | Type | Default | Description |
|---|---|---|---|
| Heading | text | - | Section heading. |
| Subheading | text | - | Supporting text. |
| Light text | checkbox | true | Use white text. |
| Placement | select | Bottom left | Position of the overlay content. |
| Primary/Secondary buttons | text + url | - | CTA buttons with links. |
Right Overlay Block
Same settings as the Left Overlay, applied to the right column.
Middle Overlay Block
A special overlay that spans the center of both columns, creating a unified message across the split.
| Setting | Type | Default | Description |
|---|---|---|---|
| Heading | text | - | Central headline. |
| Subheading | text | - | Supporting text. |
| Light text | checkbox | true | Use white text. |
| Vertical placement | select | Middle | Position: Top, Middle, or Bottom of the center. |
| Primary/Secondary buttons | text + url | - | CTA buttons with links. |
⚠️ Important: When the middle overlay is enabled, avoid adding content to the left and right column overlays. The middle overlay is designed for a single, unified message that spans both columns — adding competing text on the sides creates visual clutter and dilutes the impact of your message.
💡 Middle Overlay Tip: Use the middle overlay to create a single unified message (like your brand name or campaign title) that floats in the center where both columns meet.
Mobile Behavior
On mobile devices (below 990px):
- Columns stack vertically (left on top, right below)
- Each column takes half the screen height
- Both columns remain visible above the fold
- Text overlays adjust to fit the smaller space
Use Case Examples
👫
Him & Her Campaign
Men's collection on left, Women's on right. Each with 'Shop' buttons for their category.
Best for: Gender-split campaigns
🌞❄️
Seasonal Split
Summer video on left, Winter image on right. Highlight current and upcoming seasons.
Best for: Seasonal transitions
📦
Product Categories
Lifestyle imagery on left, product close-up on right. Category name with CTA.
Best for: Category showcases
Best Practices
Visual Balance
- Use similar imagery styles — Both columns should feel cohesive
- Balance contrast — If one column is dark, consider the other being lighter
- Match aspect ratios — Upload images with similar proportions
Content Strategy
- Keep text minimal — Let the visuals do the work
- Use one CTA per column — Two buttons can be overwhelming
- Consider the middle overlay — For brand-level messaging
Performance
- Optimize images — Large hero images impact load time
- Use video sparingly — One video column is usually enough
- Keep videos short — 5-10 second loops are ideal
Troubleshooting
Images look stretched or cropped
- Adjust the Focal point setting (Top, Center, Bottom)
- Use images with the correct aspect ratio for your height setting
- Full-screen heroes work best with portrait-oriented images
Mobile layout looks cramped
- Switch to Medium height on mobile
- Reduce text length in headings
- Consider hiding secondary buttons on mobile (use primary only)
Video not playing
- Ensure video is uploaded to Shopify (not an external URL)
- Videos must be under 20MB for optimal playback
- Check that video format is supported (MP4 recommended)
Text hard to read
- Toggle the Light text setting based on your background
- Choose positions that don't overlap busy image areas
- Consider adding a gradient overlay via custom CSS