The Hero: Split section allows you to create a visually engaging hero banner using two media areas displayed side by side. Each media area can use an image or video, while content such as headings, descriptions, icons, spacers, and call-to-action buttons can be displayed over the media.
This section is suitable for showcasing collections, campaigns, seasonal promotions, or other featured content with a strong visual impact.
Click the section name to see the section settings on the right-hand sidebar.
Customize the overall appearance of the hero section.
Reveal on scroll: Show an animation when the section becomes visible while scrolling.
Make section full width: Expand the section to use the full available width.
Color scheme: Select the color scheme applied to the section. You can choose an available color scheme or customize it through Edit scheme.
Configure the media displayed on the first side of the split hero.
Media type: Choose between Image and Video.
Image: Select the image displayed in the first media area. A 3200 × 1600 px image is recommended. Depending on the screen size and section dimensions, part of the image may be cropped.
Mobile image: Select a separate image optimized for mobile devices. If no mobile image is selected, the desktop image will be used.
Configure the media displayed on the second side of the split hero.
Media type: Choose between Image and Video.
Image: Select the image displayed in the second media area.
Mobile image: Select a separate image for mobile devices. If no mobile image is selected, the desktop image will be used.
When Video is selected as the media type, the corresponding media area can be used to display video content instead of an image.
Click Add block under Hero: Split to add content displayed over the media.
The available blocks include:
Heading: Add the main heading of the hero section, such as Summer Collections.
Icon: Add an icon to the hero content.
Spacer: Add additional spacing between content blocks.
Sub text: Add a short secondary text or label.
Text: Add supporting content or a description below the heading.
Group button: Create a container for one or more call-to-action buttons.
Blocks can be reordered by dragging and dropping them in the Theme Editor.