> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/purity-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/purity-theme/group-sections/shopables/shopable-video.md).

# Shopable video

**Shoppable video** allows you to display products within engaging video content. Each video highlights one or more items and includes direct shopping links, enabling customers to purchase instantly while watching. This section enhances storytelling, boosts engagement, and helps increase conversions. It is fully responsive and adapts seamlessly to different screen sizes.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2F43lfkdP0BS5BfgRwdvyy%2Fimage.png?alt=media&amp;token=504e1b58-61da-4f8d-accc-a5aa1d9f410f" alt=""><figcaption></figcaption></figure>

### Section settings <a href="#section-settings" id="section-settings"></a>

#### General settings <a href="#general-setting" id="general-setting"></a>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FnkKalAwAKtuhUWp3d98K%2Fimage.png?alt=media&amp;token=ea38ec72-49d7-488c-b465-a2ef551182de" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Section width</strong></td><td><p>3 options for container</p><ul><li><strong>Stretch width</strong>: span the section width regardless of screen size.</li><li><strong>Fixed width</strong>: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li><strong>Full width</strong>: takes up the entire space on the page and it usually resizes itself to fit the size of the scree</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>Select colors from <strong>Theme settings -> Colors</strong></td></tr></tbody></table>

#### Section header settings

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FHuO7cfHVJUTanTfjBUCk%2Fimage.png?alt=media&amp;token=6ebd8a8c-d19f-494d-929e-fb2baa46a26f" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Subheading</strong></td><td>The subheading of the section</td></tr><tr><td><strong>Heading</strong></td><td>The title of the section</td></tr><tr><td><strong>Enable heading underline animation</strong></td><td>Turn on an animated underline effect for headings. Switch off to keep a static look.</td></tr><tr><td><strong>Underline style</strong></td><td><p>Choose the underline’s look. Include:</p><ul><li><strong>Include</strong>: Simple underline – Clean straight line beneath the text.</li><li><strong>Curve stroke:</strong> Soft, hand-drawn curved stroke for a casual feel.</li><li><strong>Squiggle underline:</strong> Wavy line for a lively, attention-grabbing look.</li></ul><p><em>* Note: Only appears when</em> <strong>Enable heading underline animation</strong> <em>is enabled</em></p></td></tr><tr><td><strong>Underline color</strong></td><td>Pick the color used for the underline.<br><em>* Note: Only appears when</em> <strong>Enable heading underline animation</strong> <em>is enabled</em></td></tr><tr><td><strong>Description</strong></td><td>The description of the section</td></tr><tr><td><strong>Heading size</strong></td><td><p>The size of the title:</p><ul><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul></td></tr><tr><td><strong>Alignment</strong></td><td><p>The position of the heading and description.</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul></td></tr></tbody></table>

#### Video settings

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FPZ9mTb1N9a5PEhjVIqN4%2Fimage.png?alt=media&amp;token=b78c675b-981a-4176-adc0-d83fbb1eb1f6" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Video ratio</strong></td><td><p>Determine the aspect ratio of your video.</p><ul><li><strong>Adapt to first video ( Default )</strong></li><li><strong>Square ( 1:1 )</strong></li><li><strong>Portrait ( 3:4 )</strong></li><li><strong>Landscape ( 4:3 )</strong></li></ul></td></tr><tr><td><strong>Video auto play</strong></td><td>Enable the autoplay functionality of the video</td></tr><tr><td><strong>Enable video sticky</strong></td><td>Keep the video visible while scrolling in a small sticky player (pinned to a corner). Turn off to keep the video inline only.</td></tr></tbody></table>

#### Carousel settings

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FnIoApVhShwuPgl6ILDyU%2Fimage.png?alt=media&amp;token=e7e1915d-d192-49a8-8486-90ed7b3e1049" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Settiing</th><th>Description</th></tr></thead><tbody><tr><td><strong>Items per row on desktop</strong></td><td>Number of columns to display on desktop computers. Minimum: 2. Maximum: 4.</td></tr><tr><td><strong>Column gap</strong></td><td><p>4 options for column gap</p><ul><li><strong>No gap</strong></li><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul></td></tr><tr><td><strong>Show navigation</strong></td><td>Display the next and back controls for the carousel</td></tr><tr><td><strong>Show pagination</strong></td><td>Display the pagination for the carousel<br><em>* Note: Pagination will automatically show on mobile if you display the number of items on mobile as 1 or 2</em></td></tr><tr><td><strong>Auto-change slide</strong></td><td>When enabled, the carousel will run automatically</td></tr><tr><td><strong>Change slides every</strong></td><td>The running period of the carousel</td></tr></tbody></table>

#### Mobile settings

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FINqptiQhxQ7eegq2FmqK%2Fimage.png?alt=media&amp;token=1dcb1ef9-649d-445d-beb0-8ce4d30579ca" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Items per row on mobile</strong></td><td>Number of columns to display on mobile devices.</td></tr></tbody></table>

#### Section padding settings

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2Fo5GQWIrYC8t03jmv8YBW%2Fimage.png?alt=media&amp;token=11486c83-e17e-4d80-becb-0933441c8404" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Top</strong></td><td>Customize the top margin of the section</td></tr><tr><td><strong>Bottom</strong></td><td>Customize the bottom margin of the section</td></tr></tbody></table>

#### Section divider settings

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FJ14eWLw1RHQbWvF8r9dU%2Fimage.png?alt=media&amp;token=d2661185-13a0-45e7-99ab-24ca1385512f" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Show divider</strong></td><td>Display a dividing line to separate from the previous section</td></tr></tbody></table>

### Block settings <a href="#section-settings" id="section-settings"></a>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FlXJpbbzivcjDByCHb6pX%2FScreenshot_126.png?alt=media&amp;token=5cc73ec0-d3d5-47de-9c41-ad5bc22ce906" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Product</strong></td><td>Select a product from your store.</td></tr><tr><td><strong>Poster image</strong></td><td>Select an image for displaying as a poster <em><strong>(1080px x 1920px recommended)</strong></em></td></tr><tr><td><strong>Local video</strong></td><td>Select a local video for displaying <em><strong>(1080px x 1920px recommended)</strong></em></td></tr><tr><td><strong>Video alt text</strong></td><td>This setting is for describing the video for customers using screen readers</td></tr></tbody></table>