Hero Split
Use a two-panel hero when your store has two strong paths to offer, such as two collections, two campaigns, or a product-and-story split.
Hero Split works when both sides deserve equal attention. If one action is much more important than the other, use a single hero instead.
Explore the two-panel hero before changing settings
Click the left panel, right panel, mobile behavior, overlay contrast, or motion controls. The inspector opens the matching Shopify settings and updates this local mock.
- Define the two destinations.
- Balance left and right media.
- Write short panel copy.
- Set mobile behavior.
- Check overlay contrast.
- Add motion last.
Build It In Shopify
Define the two destinations
Decide exactly where the left and right panels should send shoppers. Do this before choosing images.
Upload balanced media
Use images or videos with similar visual weight. Keep important subjects away from edges so both desktop and mobile crops work.
Set mobile layout
Choose whether panels stack, slide, or simplify on mobile. Confirm the first mobile panel is the highest-priority action.
Tune overlay and motion
Adjust overlay contrast, text position, animation, and height only after the content and media are final.
Common mistakes
- Using Hero Split when there is only one real primary action.
- Choosing desktop media before deciding the two destinations.
- Forgetting that mobile visitors see one panel before the other.
- Putting long headings or paragraph copy over both panels.
- Using overlay effects without checking contrast on both sides.