# Video

To add this section, please follow the below steps:

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Add section** and choose "**Video**".

#### Video

<table><thead><tr><th width="261">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Cover image</td><td>Set up an image to use as a cover image for video</td></tr><tr><td>Cover image mobile</td><td>Set up an image to use as a cover image for videos on mobile devices</td></tr><tr><td>Use custom background color</td><td><p>Select this checkbox to use custom color for this video</p><p><em><mark style="color:red;">(The</mark><mark style="color:red;"> </mark><mark style="color:red;"><strong>1</strong></mark><mark style="color:red;"> </mark><mark style="color:red;">following settings only take effect if this checkbox is ticked)</mark></em></p></td></tr><tr><td>Set background for video</td><td>Select a background color for this video</td></tr></tbody></table>

#### Shopify-hosted video

<table><thead><tr><th width="261">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Video</td><td>Set up an video</td></tr><tr><td>URL</td><td>Add a Youtube/ Vimeo video <strong>URL</strong></td></tr><tr><td>Video alt text</td><td>Add text to display as a <strong>video alt text</strong><br><em><mark style="color:red;">(Leave the field blank to hide the</mark><mark style="color:red;"> </mark><mark style="color:red;"><strong>video alt text</strong></mark><mark style="color:red;">)</mark></em></td></tr><tr><td>Enable autoplay</td><td>Enable/disable checkbox</td></tr><tr><td>Play video on loop</td><td>Enable/disable checkbox</td></tr><tr><td>Video play button</td><td><p>Select the video play button for the section:</p><ul><li><strong>Icon</strong></li><li><strong>Text</strong></li></ul></td></tr><tr><td>Desktop content position</td><td><p>Select desktop content position from the dropdown menu:</p><ul><li><strong>Top left</strong></li><li><strong>Top center</strong></li><li><strong>Top right</strong></li><li><strong>Middle left</strong></li><li><strong>Middle center</strong></li><li><strong>Middle right</strong></li><li><strong>Bottom left</strong></li><li><strong>Bottom center</strong></li><li><strong>Bottom right</strong></li></ul><p><em><mark style="color:red;">(Position is automatically optimized for mobile. This setting applies to the position of the entrie content block)</mark></em></p></td></tr><tr><td>Desktop content alignment</td><td><p>Select desktop content alignment from the dropdown menu:</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul></td></tr><tr><td>Mobile content alignment</td><td><p>Select mobile content alignment from the dropdown menu:</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul></td></tr><tr><td>Mobile color scheme</td><td><p>Select the mobile color scheme for the block:</p><ul><li><strong>Default</strong></li><li><strong>Custom</strong></li></ul><p><em><mark style="color:red;">(Configure custom colors below)</mark></em></p></td></tr><tr><td>Text (Color)</td><td>Set the color for the text or icon</td></tr><tr><td>Background</td><td>Set the background color for block<br><em>(If a background gradient is set, the section's background will be set according to the background gradient setting)</em></td></tr><tr><td>Background gradient</td><td>Set the background gradient for block</td></tr><tr><td>Color scheme</td><td>Set the text color and background color for the block</td></tr><tr><td>Image overlay opacity on hover</td><td>Determines the image overlay opacity of the block. Can be from <strong>0%</strong> to <strong>100%</strong>, in <strong>10%</strong> arithmetic increments</td></tr><tr><td>Background</td><td>Set the background color for the overlay</td></tr></tbody></table>

#### **Custom content**

<table><thead><tr><th width="262">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Text</td><td>Add text to display as a <strong>custom content</strong> for this block. You can use <strong>HTML</strong> format to fill in this field.<br><em><mark style="color:red;">(Leave the field blank to hide the</mark><mark style="color:red;"> </mark><mark style="color:red;"><strong>custom content</strong></mark><mark style="color:red;">)</mark></em></td></tr><tr><td>Text (Color)</td><td>Set the color for the text</td></tr><tr><td>Link label</td><td>Add text to display as a <strong>link label</strong> on the section <br><em><mark style="color:red;">(Leave the field blank to hide the</mark><mark style="color:red;"> </mark><mark style="color:red;"><strong>link</strong></mark><mark style="color:red;">)</mark></em></td></tr><tr><td>URL</td><td>Set the link, for example the customer service page</td></tr></tbody></table>

#### **Animations**

<table><thead><tr><th width="260">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Text animation</td><td><p>Select the text animation from the dropdown menu:</p><ul><li><strong>None</strong></li><li><strong>Fade in up</strong></li><li><strong>Fade in down</strong></li><li><strong>Zoom in</strong></li><li><strong>Zoom out</strong></li><li><strong>Split</strong></li></ul></td></tr></tbody></table>

#### **Section padding**

<table><thead><tr><th width="261">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determines the height of the top inner space of the section. Can be from <strong>0px</strong> to <strong>100px</strong>, increasing arithmetically of <strong>1px</strong> (pixel).</td></tr><tr><td>Bottom padding</td><td>Determines the height of the bottom inner space of the section. Can be from <strong>0px</strong> to <strong>100px</strong>, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Top padding on mobile</td><td>Determines the height of the top inner space of the section on mobile. Can be from <strong>0px</strong> to <strong>100px</strong>, increasing arithmetically of <strong>1px</strong> (pixel).</td></tr><tr><td>Bottom padding on mobile</td><td>Determines the height of the top inner space of the section on mobile. Can be from <strong>0px</strong> to <strong>100px</strong>, increasing arithmetically of <strong>1px</strong> (pixel).</td></tr></tbody></table>


---

# 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://halosoft.gitbook.io/concept-documentation/section/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.