# Shopable video

The **Shoppable video** section enables you to create interactive videos where customers can click on products featured within the video to learn more or make a purchase. This engaging feature seamlessly integrates shopping into the viewing experience, allowing viewers to see products in action and buy them directly from the video.

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FFEtVcinqPY2i4K7J1cLw%2Fimage.png?alt=media&#x26;token=2ce11617-b8a4-45ae-b220-a3684a83b6f1" alt=""><figcaption></figcaption></figure>

## Section settings

### General settings

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Section width</td><td><p></p><p>3 options for container</p><ul><li>Stretch width: span the section width regardless of screen size.</li><li>Fix width: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li>Expand full width: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.</li></ul></td></tr><tr><td>Color scheme</td><td>Select colors from <strong>Theme settings -> Colors</strong></td></tr><tr><td>Heading</td><td>The title of the section</td></tr><tr><td>Description</td><td>The description of the section</td></tr><tr><td>Content alignment</td><td><p>The position of the heading and description.</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Show background blur</td><td>Add a gentle blur to the left and right edges of the section to direct your clients’ focus toward the center</td></tr></tbody></table>

### Video settings

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Aspect ratio</td><td><p>"Aspect ratio" refers to the proportional relationship between the width and height of the video.</p><p></p><p>3 options for image ratio</p><ul><li>Adapt to image</li><li>Portrait (3:4)</li><li>Custom</li></ul></td></tr><tr><td>Custom ratio</td><td>Where you can add your own custom ratio</td></tr><tr><td>Autoplay</td><td><p>The video setup allows autoplay for only the first video, while the others do not autoplay, or disable autoplay on every videos.</p><ul><li>First video</li><li>None </li></ul></td></tr></tbody></table>

### Settings for carousel

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Items per row on desktop</td><td>Choose how many items to display per row on desktops for optimal layout.</td></tr><tr><td>Show navigation</td><td>Display the next and back controls for the carousel</td></tr><tr><td>Show pagination</td><td>Display the pagination for the carousel</td></tr><tr><td>Navigation style</td><td><p>Navigation bar styles:</p><ul><li>Default: Dots and arrows are displayed separately for clear distinction.</li><li>Group: Dots and arrows are combined into a single, unified navigation element.</li></ul></td></tr><tr><td>Auto change slides</td><td>Automatically rotate slideshow</td></tr><tr><td>Reveal next slide</td><td>Display a part of the upcoming slide</td></tr><tr><td>Change slides every second</td><td>Set how long the current items are visible before transitioning to the next item</td></tr><tr><td>Column gap</td><td>Adjust spacing between columns</td></tr></tbody></table>

### Section padding

* **Top padding:** Customize the top margin of the section
* **Bottom padding:** Customize the bottom margin of the section

## **Block settings**

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Select product</td><td>Choose the specific product related to each video to provide context</td></tr><tr><td>Poster image</td><td>Display an image as poster for the video, which will display when the video is not finish loading</td></tr><tr><td>Local video</td><td>Upload the video you like here</td></tr></tbody></table>