> 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/shoppable-content/video-stories.md).

# Video stories

A scrollable row of compact videos in the Instagram- and TikTok-stories format. Each story plays a muted preview inline, and tapping one opens a full-screen player with the linked products ready to add to cart.

![Video stories overview](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-f7fffbd6e532303079c16c4ec0be2205d694d8be%2Fglobal-sections-video-stories-overview.png?alt=media)

{% hint style="success" %}
Upload Shopify-hosted HD MP4 videos for the smoothest playback. Vertical footage in a 9:16 ratio fills the thumbnail and full-screen player without cropping.
{% endhint %}

***

## Settings

### Layout

| 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. |
| Alignment | Horizontal alignment of the story row.                                                                                                                                          |

### Gap

| Setting | Description                                |
| ------- | ------------------------------------------ |
| Desktop | Space between story thumbnails on desktop. |
| Mobile  | Space between story thumbnails on mobile.  |

### Video thumbnail

| Setting          | Description                                     |
| ---------------- | ----------------------------------------------- |
| Ratio            | Shape of each thumbnail.                        |
| Preview mode     | How each thumbnail behaves before it is opened. |
| Show play button | Shows a play icon over each thumbnail.          |
| Desktop width    | Thumbnail width on desktop.                     |
| Mobile width     | Thumbnail width on mobile.                      |

### Video border

| Setting              | Description                                                        |
| -------------------- | ------------------------------------------------------------------ |
| Border thickness     | Width of the outline around each thumbnail.                        |
| Color                | Border color and opacity. Shown when a border thickness is set.    |
| Corner radius        | Roundness of the thumbnail corners.                                |
| Custom corner radius | Exact corner roundness. Shown when Corner radius is set to Custom. |

### Title typography

| Setting        | Description                                                      |
| -------------- | ---------------------------------------------------------------- |
| Font           | Typeface for the story title.                                    |
| HTML tag       | Semantic tag for the title, for SEO.                             |
| Font size      | Title size when the Heading font is used.                        |
| Font size      | Title size when the Body or Accent font is used.                 |
| Letter spacing | Spacing between letters. Available with the Body or Accent font. |

### Navigation

| Setting  | Description                          |
| -------- | ------------------------------------ |
| Style    | Visual style of the carousel arrows. |
| Icon     | Arrow shape.                         |
| Behavior | When the arrows appear.              |

### Popup product card

| Setting               | Description                                                                   |
| --------------------- | ----------------------------------------------------------------------------- |
| Layout                | Style of the product card in the popup.                                       |
| Border thickness      | Card border width. Not available with the Card layout.                        |
| Shadow                | Card shadow depth. Not available with the Card layout.                        |
| Add to cart position  | Where the add-to-cart button sits. Not available with the Card layout.        |
| Add to cart style     | Visual style of the add-to-cart button. Not available with the Card layout.   |
| Show variant selector | Lets shoppers pick a variant on the card. Not available with the Card layout. |

### Background

| Setting         | Description                                       |
| --------------- | ------------------------------------------------- |
| Media           | Section background media type.                    |
| Video           | Shopify-hosted background video. Autoplays muted. |
| Image           | Section background image.                         |
| Image — Mobile  | Separate background image for mobile.             |
| Show overlay    | Adds a color layer over the background media.     |
| Overlay color   | Color and opacity of the overlay.                 |
| Parallax effect | Scroll effect applied to the background media.    |

### Color

| Setting              | Description                   |
| -------------------- | ----------------------------- |
| Section color scheme | Color scheme for the section. |

### Padding

| Setting                       | Description                                                                              |
| ----------------------------- | ---------------------------------------------------------------------------------------- |
| Padding top / bottom          | Outer spacing above and below the section.                                               |
| Custom padding — Mobile       | Override desktop padding with separate mobile values.                                    |
| Padding top / bottom — Mobile | Mobile spacing above and below the section. Shown when custom mobile padding is enabled. |

***

## Available Blocks

### Video

A single story. Add one block per story and reorder them to control the sequence in the row.

| Setting     | Description                                                 |
| ----------- | ----------------------------------------------------------- |
| Video       | The Shopify-hosted video for this story.                    |
| Cover image | The still shown on the thumbnail before the video plays.    |
| Collection  | A collection to surface in the story's popup.               |
| Products    | Individual products to surface in the story's popup.        |
| Title       | The story's title, shown beneath its thumbnail.             |
| Text        | A short description shown alongside the title in the popup. |

{% hint style="info" %}
**Collection** and **Products** do different jobs. Pick a **Collection** when the video shows a whole range and you want the popup to stay current as you add stock. Pick **Products** when the video shows specific items and you want exactly those, in the order you choose.
{% endhint %}