Split Hero Section

The Split Hero creates a two-column layout with an image on one side and content on the other.

Adding a Split Hero

1. Open the theme editor
2. Click Add section
3. Select Split Hero

Image Settings

Selecting an Image

1. Click Select image in section settings
2. Upload a high-quality image
3. Recommended: 1200px wide minimum

Image Position

Choose which side the image appears:

• Left - Image on left, content on right
• Right - Image on right, content on left

Mobile Image Position

On mobile, the split becomes stacked. Choose:

• Top - Image above content
• Bottom - Image below content

Split Ratio

Control the width distribution:

| Ratio | Image | Content | |-------|-------|---------| | 40/60 | 40% | 60% | | 50/50 | Equal | Equal | | 60/40 | 60% | 40% |

Use larger image ratios for visual impact, larger content ratios for detailed text.

Height Options

| Option | Effect | |--------|--------| | Small | Compact section | | Medium | Standard height | | Large | Taller section | | Full | Full viewport height |

Overlay Options

Add an overlay to the image side:

• None - No overlay
• Solid - Flat color overlay
• Gradient - Gradual fade
• Vignette - Darkened edges

Adjust opacity with the slider.

Content Alignment

Vertical Alignment

Position content vertically within its column:

• Top - Align to top
• Middle - Center vertically (default)
• Bottom - Align to bottom

Horizontal Alignment

Align text within the content area:

• Left - Left-aligned text
• Center - Centered text
• Right - Right-aligned text

Available Blocks

Subheading

Small introductory text above the heading.

Heading

Main title text with size options (H1-H4).

Text

Paragraph content describing your message.

Button

Call-to-action with style options:

• Primary, Outline, or Underline
• Optional arrow icon

Parallax Effect

Enable Parallax for depth as users scroll. The image moves at a different rate than content.

Color Scheme

Select a color scheme for the content side background and text colors.

Use Cases

Product Launch

• Large product image on one side
• Launch details and CTA on other

Brand Story

• Lifestyle/brand image
• Mission statement and "Learn More" button

Collection Intro

• Collection imagery
• Description and "Shop Now" button

Best Practices

• Balance visual weight between image and content
• Use the split ratio that matches your content length
• Test mobile layout to ensure good reading order