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

> Prepare and add short portrait films of pieces being worn, and how the looping strip behaves.

The Vertical films section shows short portrait films in a slowly looping strip under the hero film. Each film links to the piece shown, and a click opens a full-screen viewer with sound.

**1. Prepare the films.**

* Portrait 9:16, 6 to 15 seconds, under 3 MB each.
* No text burned in; the caption is added by the theme.
* Upload them to Shopify (Content, Files, or straight from the section). YouTube and Vimeo are not used in this section.

**2. Add them.** In the theme editor choose Home page, select Vertical films, and add a Film block per film (up to 8). Choose the Video, a Poster image (or leave it to use the video's preview image), a short Caption and the Product.

**3. Set the pace.** Loop speed is 12 to 60 px a second (default 36). Lower is calmer.

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

The vertical films strip on the home page

**How the strip behaves.**

* Films play muted, with no controls, only while the strip is on screen.
* The strip stops while the pointer, keyboard focus or a finger is on it, and for 2 seconds after the finger lifts. Shoppers can hold and drag it.
* It also stops while the viewer is open and while it is off screen.
* There is no pause button on the strip. This was decided for the theme: it stops by hover, focus and touch instead.
* Visitors who ask for reduced motion see a still grid of posters with nothing playing. Visitors saving data see posters.

**The viewer.** It plays the film with sound off until the shopper turns it on, with play and pause, previous and next (buttons, arrow keys or a swipe), a count such as Film 2 of 6, and a link to the piece. Closing it returns to the strip.

![The film viewer](https://mintcdn.com/kwebby/Y7lUE3PaLXfHjaRp/images/vesper/guide-films-viewer.webp?fit=max\&auto=format\&n=Y7lUE3PaLXfHjaRp\&q=85\&s=81769efba79ddc7d18e1437c645ea2ed)

The full-screen viewer with sound, controls and the piece

## In the theme editor

![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)

1 Vertical films, with its Film blocks · 2 its settings · 3 the strip in the preview


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