# Shoppable Video

The **Shoppable Video section** allows merchants to showcase a video with **interactive product highlights**, enabling customers to explore and purchase products directly while watching.

This section improves engagement and conversion by combining **visual storytelling** with **instant shopping access**.

1. **Go to** Shopify Admin > **Online Store > Themes**.
2. Click **Edit Theme** on your active theme.
3. In the Theme Editor, click **Add Section > Shoppable video**.

 

<div><figure><img src="/files/D6dwGps9NxTEBvebpQb1" alt=""><figcaption></figcaption></figure> <figure><img src="/files/blzrSyQrVsjUk4f8YEgn" alt=""><figcaption></figcaption></figure></div>

|                                          |                                                                                                                     |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| Expand to full width                     | Enable for full width view. (Controls the container width)                                                          |
| Color Scheme                             | Select any color scheme defined in the theme settings > Colors > Schemes.                                           |
| Heading                                  | Add the heading content.                                                                                            |
| Heading Size                             | <p>Select the heading size.</p><ul><li>Minimal</li><li>Standard</li><li>Big</li></ul>                               |
| Text                                     | Add a description for the section.                                                                                  |
| Content Alignment                        | <p>Choose content alignment.</p><ul><li>Left</li><li>Center</li><li>Right</li></ul>                                 |
| <h4><strong>Block Settings</strong></h4> |                                                                                                                     |
| Show Product                             | Display the product in the video block.                                                                             |
| View more                                | Allow's to display a button for each block.                                                                         |
| Color Scheme                             | Select any color scheme defined in the theme settings > Colors > Schemes for the block.                             |
| Position                                 | <p>Select the video display position.</p><p></p><ul><li>Over the video.</li><li>Below the video.</li></ul>          |
| Aspect ratio                             | <p>Select the block Aspect ratio.</p><p></p><ul><li>1:1</li><li>3:4</li><li>4:3</li><li>Auto</li></ul>              |
| Desktop Column                           | Select the desktop column to display the block as 2,3,4 or 5                                                        |
| <h4>Carousel settings</h4>               |                                                                                                                     |
| Enable Carousel                          | Enable the slider for the section.                                                                                  |
| Controls                                 | <p>Choose pagination style.</p><ul><li>Dots</li><li>Arrow</li><li>None</li></ul>                                    |
| Control Style                            | <p>Determines the visual style of the selected controls.</p><ul><li>Artistic</li><li>Bold</li><li>Regular</li></ul> |
| Change slides every                      | Customize the slide's delay time in seconds. If set to 0, autoplay will be disabled.                                |
| Space                                    | Adjust the spacing range between the Block card.                                                                    |
| <h4>Section space</h4>                   |                                                                                                                     |
| Top Space                                | Adjust top spacing for the section.                                                                                 |
| Bottom Space                             | Adjust bottom spacing for the section.                                                                              |


---

# Agent Instructions: 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:

```
GET https://wedesigntech-1.gitbook.io/elegance/section/shoppable-video.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.