> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/global-sections/banners/hero.md). # Hero A large banner section with an image or video background and content blocks on top. Supports a single-panel or split two-panel layout, parallax, and a sticky content layer. ![Hero section overview](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-c6fe24365f0bab14f9e8d1a91fa6e2c3837e65d8%2Fglobal-sections-hero-overview.png?alt=media) *** ## Settings ### Layout | Setting | Description | | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Layout | **Classic** — A single media panel with your content blocks laid over it. Supports parallax. **Split** — Two media panels side by side, each with its own image or video. A single mobile media replaces the split on small screens. | ### Media Desktop and mobile media are set independently. Split layout adds a second panel and a separate mobile media. | Setting | Description | | -------------- | ----------------------------------------------- | | Type | Image or video for the panel. | | Image | Desktop background image. | | Image — Mobile | Separate image for mobile. Classic layout only. | | Video | Shopify-hosted video. Autoplays muted. | | Video — Mobile | Separate video for mobile. Classic layout only. | {% hint style="success" %} Always pair a video with an **Image** so the section shows straight away while the video loads. Upload videos via **Shopify Admin → Content → Files**. {% endhint %} For **Split** layout, a second **Media 2** panel and a separate **Mobile (optional)** media are shown, each with its own Type, Image, and Video settings. ### Link | Setting | Description | | --------------- | ------------------------------------ | | Link | Makes the whole section clickable. | | Open in new tab | Opens the link in a new browser tab. | {% hint style="info" %} Use the section link only when the hero itself is the sole call to action. If Button blocks are present inside the hero, leave **Link** empty. {% endhint %} ### Overlay A color layer between the background media and your content, to keep text legible. | Setting | Description | | ------------- | --------------------------------- | | Show overlay | Turns the color layer on or off. | | Overlay color | Color and opacity of the overlay. | ### Height | Setting | Description | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------ | | Desktop / Mobile | Section height for each device — a fixed size, Adapt (matches the media's natural ratio), or Full screen (fills the viewport). | ### Parallax Classic layout only. Adds a scroll motion effect to the background. | Setting | Description | | --------------- | ------------------------------------------------------------------------------- | | Parallax effect | Scroll motion for the background, such as fixed, vertical, horizontal, or zoom. | {% hint style="info" %} Parallax is turned off automatically on mobile, so make sure your mobile image works on its own. {% endhint %} ### Content | Setting | Description | | ------------------------ | ------------------------------------------------------------------------------------------- | | Full width | Stretches the content area edge to edge. Available when Width is Full or Full (no padding). | | Enable sticky | Pins the content in place while the background scrolls behind it. | | Position — Desktop | Where the content sits within the section. | | Position — Mobile | Independent content position for mobile. | | Desktop gap / Mobile gap | Spacing between the content blocks. | ### Appearance | Setting | Description | | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Width | **Page** — Keeps the content within the page width set in your theme settings. **Full** — Stretches the content across the full browser width, with a small space at the edges. **Full (no padding)** — Stretches the content across the full browser width, with no space at the edges. | | Allow transparent header | Lets the header float over the section with no background. Full (no padding) only, and only when this is the first section on the page. | | Corner radius | Rounding of the section corners. Not available in Full (no padding). | | Color scheme | Background color behind the section. Not available in Full (no padding). | | Content color scheme | Color scheme for the content area only — text and button colors, independent of the section background. | ### Padding | Setting | Description | | ------------------------- | ---------------------------------------------------------------------- | | Top / Bottom | Space above and below the section. Not available in Full (no padding). | | Custom padding for mobile | Set independent padding values for mobile. | *** ## Available Blocks | Block | Description | | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Heading](/helix/theme-blocks/basic/heading.md) | Main headline. | | [Subheading](/helix/theme-blocks/basic/subheading.md) | Small label above or below the heading. | | [Text](/helix/theme-blocks/basic/text.md) | Rich-text paragraph for supporting copy. | | [Button](/helix/theme-blocks/basic/button.md) | Single call-to-action with label, link, and style. | | [Buttons](/helix/theme-blocks/basic/buttons.md) | Two side-by-side buttons. | | [Image](/helix/theme-blocks/basic/image.md) | Inline image within the content, such as a logo or badge. | | [Icon](/helix/theme-blocks/basic/icon.md) | An icon from the theme library, shown inline. | | [Divider](/helix/theme-blocks/layout/divider.md) | A horizontal line between content blocks. | | [Spacer](/helix/theme-blocks/layout/spacer.md) | Empty block for adjusting vertical spacing. See [How to set up custom spacing](/helix/how-to-guides/how-to-set-up-custom-spacing.md) for per-breakpoint values. | | [Product Card](/helix/theme-blocks/cards/product-card-compact.md) | A compact product card, for shoppable banners. | | [Group](/helix/theme-blocks/layout/group.md) | A row that arranges several blocks side by side. | | [Popup](/helix/theme-blocks/links/popup.md) | A button that opens an overlay, such as a video or extra detail. | | [Countdown Timer](/helix/theme-blocks/basic/countdown-timer.md) | A live countdown to a set date. | | [Product Finder](/helix/theme-blocks/product/product-finder.md) | A short quiz that recommends a collection from the shopper's answers. | | [Colors](/helix/theme-blocks/basic/colors.md) | A swatch selector for showing color variants. |