> ## 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, each tagged with the products it shows, with a viewer to watch a film larger and add its product to the cart.

![Vertical films on the storefront](https://mintlify.s3.us-west-1.amazonaws.com/kwebby/images/kelvin/vertical-films.webp)

Vertical films, highlighted with the demo content

![Vertical films in dark mode](https://mintcdn.com/kwebby/MS8e7xtq5qj3x24S/images/kelvin/vertical-films-dark.webp?fit=max\&auto=format\&n=MS8e7xtq5qj3x24S\&q=85\&s=33bd77361093e7d3b347675443b8e47b)

Vertical films in dark mode

![Vertical films on a phone](https://mintcdn.com/kwebby/MS8e7xtq5qj3x24S/images/kelvin/vertical-films-mobile.webp?fit=max\&auto=format\&n=MS8e7xtq5qj3x24S\&q=85\&s=5443633dff66866c6eec6a25b871da81)

Vertical films on a phone

## Where to find it

Third section of the Home page template, under the Trust strip. In the theme editor choose Home page in the page selector, then select Vertical films. Add it to other pages with Add section.

## How it works

* The strip loops sideways at the Loop speed (Slow 20, Medium 32 or Fast 48 px a second), and only while it is on screen.
* It holds while the pointer is over it, while anything in the section has keyboard focus, while a finger is on it (and for about 2.5 seconds after), while a shopper drags it, while the viewer is open and while you select a Film block in the theme editor.
* There is no Pause button, by design: the strip stops under the shopper's pointer, focus or finger, and the films are muted.
* Films play muted, without controls, at most four at once on screens 750 px and wider and two on narrower screens. A film starts only when at least half of its tile is on screen, and its file loads only when the tile comes into view.
* Visitors who reduce motion or save data get a still row of posters they scroll by hand; nothing plays by itself. With fewer films than the screen is wide, the strip repeats them so the loop still fills the screen.
* Under each tile the first product shows with its photo, name and price, linking to the product page.
* A click (or Enter) on a film opens the viewer: the film larger with player controls, muted at first, a count such as 2 of 10, the title, the Description, and the first product with its price and Add to cart or Choose options. Other products are listed under Also in this film.
* In the viewer the previous and next buttons and the arrow keys move between films. Escape, the close button or a click outside closes it, and focus returns to the film.
* The loop is made of copies of the films (more of them when there are few films) that keyboard and screen readers skip, so each film is reached and announced once.
* Only films with a video or a Poster image are shown. With none, the section stays hidden on the store.

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

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 (up to 10) and upload a portrait video, 9:16 aspect ratio. Sizes and tips are in [Vertical films](https://docs.kwebby.com/kelvin/guides/vertical-films.md).
* Add a Poster image to every film. It shows before the film plays, for visitors who reduce motion or save data, and if the film cannot load.
* Heading is written over the top of the tile: keep it to a few words. Empty, it uses the first product's title.
* Write a one-sentence Description of what the film shows. The viewer shows it, and it is the film's text alternative.
* Pick up to three Products per film. The first gets the tag under the tile and Add to cart in the viewer.
* Six to 10 films work best. With only a few, the strip repeats them to fill the screen, so the same film shows more than once.
* Loop speed: Slow suits calm product films, Fast suits many short clips.

## Settings

| Setting | What it does |
| - | - |
| **Heading** | Text. Default: Watch it work. |
| **Text** | Text. Default: Short films of the gear on real desks. Tap one to watch it larger and shop it. |
| **Loop speed** | Options: Slow, Medium, Fast. The strip loops only while on screen. Hovering, focusing, touching or dragging holds it. Visitors who reduce motion or save data get a still strip they scroll by hand. Default: Medium. |
| **Color scheme** | Color scheme for this area (edit the schemes in Theme settings → Colors). Default: Scheme 3. |

> [!TIP]
>
> Use 6 to 10 portrait films, 9:16 aspect ratio (recommended). Films play muted, at most four at once on a computer and two on a phone. The section shows only films that have a video or a poster.

## Blocks

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

### Film

| Setting | What it does |
| - | - |
| **Film** | Video: upload one or choose from Content → Files. 9:16 aspect ratio (recommended), short and without sound. |
| **Poster image** | Image: upload one or choose from Content → Files. Shown before the film plays, for visitors who reduce motion, and when the film cannot load. |
| **Heading** | Text. Shown on the tile. Leave empty to use the first product's title. |
| **Description** | Text (several lines). What the film shows, in a sentence. Shown under the film in the viewer as its text alternative. |
| **Products** | Choose products. Up to three products in the film. The first one gets a tag under the tile and Add to cart in the viewer. |

> [!NOTE]
>
> On install the section has no Film blocks, so it is hidden on the store. The theme editor shows example tiles with a note until a film has a video or a poster.
>
> There is no Pause button on this strip, a choice made for Kelvin: it holds on hover, focus, touch and drag, and stands still for visitors who reduce motion or save data.
>
> YouTube and Vimeo links are not used in this section: upload the films to Shopify.


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