Split hero

Split hero divides the screen into two images, each with its own button, for example "Shop women" and "Shop men". A large heading runs across the top, on a solid band of color, so it stays readable over any photo. On phones, the two images stack.

Best practices#

• Use two portrait images of 1200 × 1600 px, with similar light and framing so the pair looks deliberate.
• Keep the heading very short. It's set at display size across both images. A season or a drop name, like "Fall / Winter 2026", works well.
• Pick the height. Height on desktop sets the section as a share of the screen height, from 50% to 100%. 90% leaves a hint of the next section, which invites scrolling.
• Point each button somewhere specific. Until you set a link, both buttons go to all products.
• The two images are decorative and have no alt text, so make the button labels describe where they go.

Preset tips#

• Graphite opens with Split hero at 90% height, with its black scheme for the heading band and buttons.
• With Vellora or Sorrel, a light Heading color scheme over two calm images gives a softer version of the same layout.

Handle

split-hero

Group

Heroes and banners

Where

Add it to any template with Add section in the theme editor.

Settings#