> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kwebby.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Hero film

> The opening section of the home page: a silent film or a photograph behind the main heading, a short text and two links.

![Hero film on the storefront](https://mintcdn.com/kwebby/Y7lUE3PaLXfHjaRp/images/vesper/hero-film.webp?fit=max\&auto=format\&n=Y7lUE3PaLXfHjaRp\&q=85\&s=e6f5f8e28297c5942e1148ae4f7570d2)

Hero film, highlighted with the demo content

## Where to find it

Home page, first section. In the theme editor choose Home page in the page selector, then select Hero film. Only one per page.

## How it works

* An uploaded film plays muted on a loop, only while it is on screen. Visitors who ask for reduced motion or turn on data saving see the poster instead.
* The poster loads first, so the page appears quickly, and the film fades in over it once it plays. A Mobile poster can replace it on screens under 750 px wide.
* With a YouTube or Vimeo link instead of an uploaded film, the poster shows with a play button. The player loads only after a click, then fills the hero.
* The heading is the main heading (h1) of the home page.
* Overlay strength darkens the film behind the text, in the color of the section's scheme, so a light scheme gets a light veil and dark text.
* The header floats over the hero until the shopper scrolls, when Float over the first section on the home page is on in the Header.
* A pause button for the film appears when a keyboard user tabs to it.

![Hero film in the theme editor](https://mintcdn.com/kwebby/ipMVAv6ECVUC3DoM/images/vesper/editor-hero-film.webp?fit=max\&auto=format\&n=ipMVAv6ECVUC3DoM\&q=85\&s=d95089dec1e305b98907f7b1d821bf3b)

In the theme editor: 1 the section in the sidebar · 2 its settings · 3 the section in the preview

## Edit it

* Upload a short film under Video: under 10 seconds and 3 MB, landscape. Then add a Poster image of 2400 x 1350 px or larger.
* Add a portrait Mobile poster image if the landscape poster crops badly on phones.
* Edit Eyebrow, Heading and Text. Keep the heading short: it is the first thing shoppers read.
* Set Link label and Link, for example Discover the collections to /collections. Add a Second link such as Book a private viewing to your contact page.
* Choose Text position and Height (Full screen, Large or Medium). Raise Overlay strength if the text is hard to read over light footage.

## Settings

| Setting | What it does |
| - | - |
| **Color scheme** | Color scheme for this area (edit the schemes in Theme settings → Colors). Default: Scheme 1. |

**Film**

| Setting | What it does |
| - | - |
| **Video** | Video: upload one or choose from Content → Files. Plays muted on a loop while it is on screen. Visitors who ask for reduced motion or save data see the poster instead. Keep it under 10 seconds and 3 MB. |
| **YouTube or Vimeo link** | YouTube or Vimeo link. Used when no video is uploaded. The poster shows with a play button, and the player loads only after a click. |
| **Poster image** | Image: upload one or choose from Content → Files. Shown while the film loads and whenever it does not play. Defaults to the video's preview image. 2400 x 1350 px or larger. |
| **Mobile poster image** | Image: upload one or choose from Content → Files. Optional. A portrait image for screens under 750 px wide, for uploaded videos and still heroes. |

**Text**

| Setting | What it does |
| - | - |
| **Eyebrow** | Text. Default: High jewellery. |
| **Heading** | Text. The main heading of the home page. Default: Jewels for the hours after dark. |
| **Text** | Formatted text (one line). |
| **Link label** | Text. Default: Discover the collections. |
| **Link** | Link: a page, product, collection or web address. Default: /collections. |
| **Second link label** | Text. Shown when both the label and the link are filled in. |
| **Second link** | Link: a page, product, collection or web address. |

**Layout**

| Setting | What it does |
| - | - |
| **Text position** | Options: Bottom left, Bottom center, Middle left, Middle center. Left becomes right in right-to-left languages. Default: Bottom left. |
| **Overlay strength** | Slider from 0 to 100 %, in steps of 5. Darkens the film behind the text. Keep it high enough for the text to stay readable over light footage. Default: 100 %. |
| **Height** | Options: Full screen, Large, Medium. Default: Full screen. |

> [!NOTE]
>
> With no heading, the home page still gets a hidden main heading with your store name for screen readers and search engines.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.