Hero
Hero is the full-width opening section: a background image with an optional separate mobile image, an overlay opacity control, and a minimum height set per breakpoint. It accepts theme blocks for the heading, text and buttons inside it. When Hero is the first section on a template its image loads eagerly at high priority; anywhere else it loads lazily. The ghost word and scanline treatments are optional and off-switchable.
Settings
Section titled “Settings”| Setting | Type | Default | What it does |
|---|---|---|---|
| Color scheme | color_scheme | scheme-1 | Controls color scheme. |
| Media | header | Groups related controls in the Theme Editor. | |
| Image | image_picker | Controls image. | |
| Mobile image | image_picker | Optional. Shown below 750px instead of the main image. | |
| Layout direction | select | split-right | Choose one of: Text left, media right, Media left, text right, Media as full background. |
| Background overlay | range | 45 | Controls background overlay from 0 % to 90 %. |
| Style | header | Groups related controls in the Theme Editor. | |
| Minimum height (mobile) | range | 520 | Controls minimum height (mobile) from 360 px to 720 px. |
| Minimum height (desktop) | range | 600 | Controls minimum height (desktop) from 420 px to 900 px. |
| Show oversized ghost word | checkbox | true | Controls show oversized ghost word. |
| Ghost word | text | STAMINA | Controls ghost word. |
| Show scanline texture | checkbox | true | Controls show scanline texture. |
Accepted Blocks
Section titled “Accepted Blocks”Source
Section titled “Source”sections/hero.liquid