Hero

Signal’s hero is a hard 50/50 split: a white panel carrying the kicker, the headline, a subheading and one button, against a single full-bleed photograph. No overlay text, no gradient scrim, no caption floating over a face — the type gets its own plane and the picture gets its own.

That is a deliberate choice for a drop brand. One photograph has to carry the season, and type laid over it always compromises one or the other. Reach for this when you have a single strong campaign image and a headline of four to six words.

This section renders the page’s <h1>, so use it once per page.

Settings

Setting	Type	Default	What it does
Kicker	Text	—	Small accent-coloured line above the headline. Good for the drop name or the season.
Heading	Text	The new standard	The headline, set in the display face at the largest step in the type scale.
Subheading	Inline rich text	Avant-garde streetwear for the future. <strong>Shop now.</strong>	Subheading under the headline. It is accent-coloured by default; anything you bold flips to black instead.
Result button	Text	—	Button text. Leave it empty and no button renders.
Button link	URL	—	Where the button goes. If you set a label but no link, it falls back to the all-products collection.
Image	Image	—	The photograph. With nothing set, a placeholder renders so the layout is still readable in the editor.
Put the image on the left	Checkbox	false	Puts the image on the left and the type panel on the right.
Height	Range, 50–100 vh, step 2	74	Minimum height of the hero as a share of the viewport.
Image focal point	Select — Top / Upper / Centre / Lower / Bottom	center	Which part of the photograph stays in frame when it is cropped to the panel.
Top spacing	Range, 0–160 px	0	Top spacing. Zero by default so the hero sits flush under the header.
Bottom spacing	Range, 0–160 px	0	Bottom spacing.

No blocks. One preset, Hero.

Behaviour worth knowing

The photograph never dictates the height. The image is absolutely positioned inside its half and cropped to fill, so a portrait upload and a landscape upload produce exactly the same hero. height sets the floor; the type panel grows past it if the headline is long.

It is loaded as the page’s most important image. The hero image is requested eagerly at high fetch priority, which is what keeps it as the largest-contentful-paint element rather than something that arrives late. Keep the file under control — a 4000 px JPEG is still a 4000 px JPEG even with responsive sources.

The entrance is staged, and it is optional. With motion on, the photograph settles from a slight scale-up while the kicker, headline, subheading and button rise in sequence over about three quarters of a second. The whole thing is gated on the theme’s Motion setting and on the visitor’s reduced-motion preference — switch motion off in Theme settings → Motion and the hero simply renders.

On phones it stops being a split. Below 760 px the panel stacks above a square (1:1) crop of the photograph, and the height setting no longer applies — the square decides. Check the headline at that width; six words that balance on desktop can wrap to four lines on a phone.

Alt text. The image’s own alt text is used; if it has none, the headline is used instead. Set real alt text on the image in Shopify’s file picker.

Tip

The subheading’s accent/black inversion is the one typographic trick in this section — use it to put the call to action inside the sentence rather than only on the button. “Avant-garde streetwear for the future. Shop now.” reads better than a bare button, and the bold phrase is what the eye lands on. Keep it to two or three words.

Note

If you want several campaign images rather than one, use the Slideshow instead — it is built for full-bleed shots with copy laid over them. Putting two heroes back to back works, but the second one’s <h1> will compete with the first.