The Hero: Split section creates a hero banner with two images or videos displayed side by side and content overlaid on top.
It is ideal for showcasing two visuals together while highlighting your main message, promotion, collection, or call to action.
The section includes Media 1 and Media 2. Each media can be set as an image or video.
You can also upload a separate Mobile image for each side. If no mobile image is selected, the desktop image will be used on mobile.
Tip: For a balanced split layout, use two media files with similar dimensions or aspect ratios.
Use blocks to add content over the media:
Block | Purpose |
|---|---|
Heading | Main title or message |
Text | Supporting description |
Button | Add a call-to-action |
Group button | Display multiple buttons together |
You can reorder the blocks to create your preferred content structure.
The Layout settings control the overall appearance of the hero.
Setting | Use it to |
Media height | Control the hero height on desktop. Use Adapt to first media to follow the height of Media 1. |
Media height mobile | Control the hero height on mobile. |
Mobile fixed height | Set a specific mobile height when Fixed height is selected. |
Media overlay opacity | Add a darker or stronger overlay to make text easier to read over the media. |
Content maximum width | Limit the width of the heading, text, and buttons. |
Desktop content position | Position the content within the hero on desktop. |
Content position | Adjust the content position for the responsive/mobile layout. |
Stack media on mobile | Stack Media 1 and Media 2 vertically on mobile instead of keeping the split layout. |
Use Color scheme to match the section with your store design and maintain good contrast between the content and media.
You can also enable:
Reveal on scroll to animate the section when it enters the screen.
Make section full width to extend the section across the available page width.
For further styling, use Theme Settings or Custom CSS.