> ## 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.

# Vertical films

> A slowly looping strip of short portrait films of pieces being worn, each linked to its product, with a full-screen viewer with sound.

![Vertical films on the storefront](https://mintcdn.com/kwebby/Y7lUE3PaLXfHjaRp/images/vesper/vertical-films.webp?fit=max\&auto=format\&n=Y7lUE3PaLXfHjaRp\&q=85\&s=195e04bf6817c6dd4a33bc1a40f0de81)

Vertical films, highlighted with the demo content

## Where to find it

Home page, directly under the Hero film. In the theme editor choose Home page, then select Vertical films. It can be added to other pages with Add section.

## How it works

* Films play muted, with no controls, and only while the strip is on screen. The strip loops sideways at the Loop speed.
* The strip stops while the pointer, keyboard focus or a finger is on it (and for 2 seconds after the finger lifts), while the viewer is open and while it is off screen. Shoppers can hold and drag it.
* A click on a film opens a full-screen viewer with sound off until the shopper asks for it, play and pause, previous and next, a count such as Film 2 of 6, and a link to the piece.
* Visitors who ask for reduced motion see a still grid of posters and nothing plays. Visitors saving data see the posters.
* There is no pause button on the strip itself: it stops by hover, focus and touch, as decided for this theme.
* Up to 8 films. A Film block without a video shows a placeholder and does not open the viewer.

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

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

## Edit it

* Add a Film block per film. Upload a portrait 9:16 video, 6 to 15 seconds and under 3 MB. Films must be uploaded to Shopify; YouTube and Vimeo are not used here.
* Add a Poster image for each film, or leave it empty to use the video's preview image.
* Type a short Caption and choose the Product shown in the film. It is linked under the film and in the viewer.
* Edit Heading and Text, and set Loop speed between 12 and 60 px a second. Lower is calmer.

## Settings

| Setting | What it does |
| - | - |
| **Color scheme** | Color scheme for this area (edit the schemes in Theme settings → Colors). Default: Scheme 1. |
| **Heading** | Text. Default: Worn after dark. |
| **Text** | Formatted text (one line). |
| **Loop speed** | Slider from 12 to 60 px, in steps of 4. Pixels per second. The strip stops while the pointer, keyboard focus or a finger is on it, and shoppers can hold and drag it. Default: 36 px. |

> [!TIP]
>
> Films play muted, with no controls, only while they are on screen. Visitors who ask for reduced motion see a still grid of posters, and visitors saving data see posters. A click opens a full-screen viewer with sound.

## Blocks

Up to 8 blocks. Add a block with **Add block** under the section in the sidebar; drag blocks to reorder them.

### Film

| Setting | What it does |
| - | - |
| **Video** | Video: upload one or choose from Content → Files. Portrait 9:16, 6 to 15 seconds, under 3 MB. Shopify-hosted only. |
| **Poster image** | Image: upload one or choose from Content → Files. Shown before the film plays. Defaults to the video's preview image. |
| **Caption** | Text. Default: Worn close. |
| **Product** | Choose a product. The piece in the film, linked under it and in the viewer. |

> [!NOTE]
>
> See [Vertical films](https://docs.kwebby.com/gloaming/guides/vertical-films.md) for how to prepare the films.


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