> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/shopables/shopable-video.md).
# Shopable video
**Shopable video** puts a row of short vertical clips on the page, each one tied to a product a shopper can open while watching. It is the section for footage that already exists on social channels: a styling reel, an unboxing, a product in use. Shoppers meet it in the middle of the homepage or a landing page, and an optional sticky player keeps the clip visible as they scroll on.
Video is the heaviest thing a homepage can carry, so keep the clips short and the count low. Each block is one clip and one product.
### Where to find it
{% hint style="success" %}
**Steps:**
1. Go to **Online Store > Themes > Customize**.
2. Open the template where the clips should appear, usually the homepage.
3. Click **Add section** and choose **Shopable video** from the **Shopables** group.
4. Add one block per clip, upload the video, and add a poster image for it.
5. Select the product each clip is about, then set the video ratio and layout.
{% endhint %}
*Result:* the clips appear as a carousel, each with its product attached, so shoppers can go from watching to buying without leaving the page.
### Section settings
#### General settings
| Setting | Description |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Section width** |
How far the clips spread across the screen.
Stretch width: the videos run close to both screen edges whatever the screen size.
Fixed width: the videos line up with the page width set in Theme settings > Layout, keeping them level with the sections above.
Full width: the section fills the whole browser window and resizes with it.
|
| **Color scheme** | The background and text colours of the section. Schemes are defined in **Theme settings > Colors**, and a dark scheme suits vertical video, which is usually watched against dark surroundings. |
| **Desktop layout** | Whether the heading sits beside the clips or above them: **Horizontal** puts text and video side by side, **Vertical** stacks the heading over a full width row of clips. |
| **Desktop header width** | How much of the row the text side takes when the layout is horizontal, leaving the rest for the clips. Widen it for a longer introduction, narrow it to fit more video on screen. |
#### Section header
| Setting | Description |
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Subheading** | A short line above the title, often a label such as `Watch and shop` that tells shoppers the clips are clickable. |
| **Heading** | The title shoppers read first, the line that says what these clips have in common. |
| **Description** | A sentence under the title. Use it to say that the products can be opened from the video, since not every shopper expects that. |
| **Heading size** |
How large the title is rendered.
Heading 1: the biggest, when the clips are the centrepiece of the page.
Heading 2: a middle size that suits most homepages.
Heading 3: the smallest, when the section supports the products around it.
|
| **Alignment** |
Where the title and its supporting lines sit.
Left: lines up with the first clip and reads naturally, the usual pairing with the horizontal layout.
Center: balanced over a full width row of clips.
Right: rarely needed, use it to mirror a neighbouring section.
|
| **Show view all button** | Adds a button through to the full collection the featured products come from, for shoppers who want more than the clips show. |
| **Button label** | The words on that button. Something specific such as `Shop the collection` sets a clearer expectation than a generic label. |
| **Button link** | Where that button leads, usually the collection or page the featured products belong to. |
| **Button type** |
How much the button stands out from the section.
Primary: solid and filled, for the one action you most want taken.
Outline: bordered and lighter, so it does not compete with the video.
The shape every clip is played in, so a row of videos does not jump in height.
Adapt to first video ( Default ): every clip follows the shape of the first one.
Square ( 1:1 ): an even frame that suits mixed footage.
Portrait ( 3:4 ): a tall frame, close to how phone footage is shot.
Landscape ( 4:3 ): a wide frame for footage filmed horizontally.
Product (4:5): matches the shape of the product images elsewhere in the store.
Golden (1.618:1): a wide cinematic frame for a more editorial feel.
|
| **Video auto play** | Starts the clips playing as soon as they come into view, with no click needed. It is what makes the section feel like a social feed, and it also loads every clip whether shoppers watch or not. |
| **Enable video sticky** | Keeps the clip visible in a small pinned player while the shopper scrolls on, so they can carry on watching while they read the rest of the page. Turn it off to keep the video inline only. |
#### Carousel settings
| Setting | Description |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Items per row on desktop** | How many clips sit side by side on a wide screen, from 2 to 4. Vertical video is tall, so four across makes for a very deep section. |
| **Column gap** |
The space between clips.
No gap: the clips touch, which reads like a feed.
Small and Medium: keep the clips separate without wasting width.
Large: gives each clip room, best with only two per row.
|
| **Show navigation** | Shows the previous and next arrows. Keep them on for desktop, where shoppers have no swipe gesture to reach the clips off screen. |
| **Navigation position** | Where those arrows sit: **Default** keeps them with the clips, **Section header** moves them up beside the title so they stay in one predictable place. |
| **Show pagination** |
Shows the dots under the row, which tell shoppers how many clips there are and where they are in the set.
\* Note: Pagination will automatically show on mobile if you display the number of items on mobile as 1 or 2
|
| **Auto-change slide** | Moves the carousel along on its own. Leave it off here, since pulling a clip away mid play is more frustrating than helpful. |
| **Change slides every** |
How long the carousel waits before moving to the next clip.
Note: only matters when Auto-change slide is on.
|
#### Mobile settings
| Setting | Description |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| **Items per row on mobile** | How many clips fit across a phone screen. One fills the screen the way social video does, two lets shoppers scan more quickly. |
#### Section padding settings
| Setting | Description |
| ---------- | ---------------------------------------------------------------------------------------------------- |
| **Top** | Space added above the section. Increase it when the heading sits too close to the section before it. |
| **Bottom** | Space added below the section. Increase it when the next section crowds the clips. |
#### Section divider settings
| Setting | Description |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| **Show divider** | Draws a thin line between this section and the one above it, useful when both share a background colour and the join is invisible. |
### Block settings
Add one block per clip. The order of the blocks is the order shoppers see.
| Setting | Description |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Product** | Which product this clip is about, and the one shoppers can open while watching it. Its title and price come from the product itself. |
| **Poster image** | The still shown before the clip plays, sharpest at ***(1080px x 1920px recommended)***. On slow connections this is the only frame some shoppers see, so choose it carefully. |
| **Local video** | The clip itself, uploaded to your Shopify files, sharpest at ***(1080px x 1920px recommended)***. Keep it short, since several clips autoplaying at once is a heavy page. |
| **Video alt text** | A short written description of the clip, read aloud by screen readers. Say what happens in the footage, not that it is a video. |
### What changes on the storefront
* Shoppers see a row of vertical clips, each with its product attached, and can open the product without stopping the video.
* With **Enable video sticky** on, the clip follows the shopper down the page in a small player instead of disappearing off screen.
* Every clip carries its own file, so the more blocks you add the heavier the page becomes, especially with **Video auto play** on.
### Related pages
* [Shopables](/velare/customize-your-pages/shopables.md): the group this section belongs to
* [Shopable image](/velare/customize-your-pages/shopables/shopable-image.md): the same idea built around a photograph with hotspots
* [Video](/velare/customize-your-pages/banners/video.md): for footage that is watched rather than shopped
* [Product cards](/velare/customize-your-pages/product-cards.md) and [Colors](/velare/set-up-your-store/colors.md): where the card look and schemes come from
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/shopables/shopable-video.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.