# Video

To add this section, please follow 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**".

## Section settings

### General

<table><thead><tr><th width="336">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Section width</td><td>Select the layout width of the whole section. The options are: <br><br><mark style="color:orange;"><strong>Default (same as the body width)</strong></mark><br><mark style="color:orange;"><strong>Width (1170px)</strong></mark><br><mark style="color:orange;"><strong>Width (1770px)</strong></mark><br><mark style="color:orange;"><strong>Full Width (the 100% of the viewport width)</strong></mark></td></tr><tr><td>Background color - Background gradient</td><td>Set color (or gradient) for the section background.</td></tr><tr><td>Background image</td><td>Upload/Select an image as the section background.</td></tr><tr><td>Title</td><td>Enter in the title for the section.</td></tr><tr><td>Title color</td><td>Apply a color to the title.</td></tr><tr><td>Title font size</td><td>Specify the font size of the title.</td></tr><tr><td>Title font size on mobile</td><td>Specify the font size of the title on the mobile.</td></tr><tr><td>Title bottom margin</td><td>Determine the spacing of the title from the video.</td></tr><tr><td>Description</td><td>Enter the text for the description.</td></tr><tr><td>Description color</td><td>Apply a color to the description.</td></tr><tr><td>Description font size</td><td>Specify the font size of the description.</td></tr><tr><td>Alignment</td><td>Select the horizontal alignment of the header text to be either to the Left, Right, or Center.</td></tr><tr><td>Cover image</td><td>Set Cover Image for video.<br><br><em><mark style="color:orange;">Note: Only show the cover image when don't use auto-play video.</mark></em></td></tr><tr><td>Auto-play video</td><td>Toggle auto-play video.</td></tr><tr><td>Video height (unit %)</td><td>Set height for video.</td></tr><tr><td>Video height on mobile (unit %)</td><td>Set height for video on the mobile.</td></tr><tr><td>Video type</td><td>Select video type. There are 2 types:<br><br><mark style="color:orange;"><strong>YouTube or vimeo</strong></mark><br><mark style="color:orange;"><strong>MP4</strong></mark></td></tr><tr><td>A video from youtube or vimeo on desktop</td><td>Enter the youtube or vimeo link.<br><br><em><mark style="color:orange;">Note: Use a youtube or vimeo link.</mark></em></td></tr><tr><td>A video from youtube or vimeo on mobile</td><td>Enter the youtube or vimeo link on the mobile.<br><br><em><mark style="color:orange;">Note: Use a youtube or vimeo link.</mark></em></td></tr><tr><td>An MP4 video on desktop</td><td>Enter the MP4 link.<br><br><em><mark style="color:orange;">Note: Use an MP4 link.</mark></em></td></tr><tr><td>An MP4 video on mobile</td><td>Enter the MP4 link on the mobile.<br><br><em><mark style="color:orange;">Note: Use an MP4 link.</mark></em></td></tr><tr><td>Video alt text</td><td>Set alt for video.<br><br><em><mark style="color:orange;">Note: Describe the video to make it accessible for customers using screen readers.</mark></em></td></tr><tr><td>Make section full width</td><td></td></tr><tr><td>Play icon position</td><td>Specifies the position where the play icon is displayed.<br><br><em><mark style="color:orange;">Note: The play icon only shows when don't use auto-play video.</mark></em></td></tr></tbody></table>

### Content&#x20;

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Title</td><td>Enter the title of the content on the video.</td></tr><tr><td>Title font size</td><td>Set the font size of the title.</td></tr><tr><td>Title font size on mobile</td><td>Set the font size of the title on the mobile.</td></tr><tr><td>Title bottom margin</td><td>Determine the spacing of the title from the description.</td></tr><tr><td>Title color</td><td>Apply a color to the title.</td></tr><tr><td>Description</td><td>Enter the description of the content on the video.</td></tr><tr><td>Description font size</td><td>Set the font size of the description.</td></tr><tr><td>Description font size on mobile</td><td>Set the font size of the description on the mobile.</td></tr><tr><td>Description bottom margin</td><td>Determine the spacing of the title from the description.</td></tr><tr><td>Description color</td><td>Apply a color to the description.</td></tr><tr><td>Maximum content width</td><td>Set the maximum width of the content.</td></tr><tr><td>Content alignment</td><td>Align the video content including the title, description, and button to the Left, Right, or Center.</td></tr><tr><td>Content position</td><td>Select the position of the content to be on the left, center, and right of the video.</td></tr></tbody></table>

### Button

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Button label</td><td>Enter the label for the button.</td></tr><tr><td>Link</td><td>Enter the link for the button.</td></tr><tr><td>Button width</td><td>Set the width of the button.</td></tr><tr><td>Label color</td><td>Set the label color of the button.</td></tr><tr><td>Border color</td><td>Set the border color of the button.</td></tr><tr><td>Background color</td><td>Set the background color of the button.</td></tr><tr><td>Background gradient</td><td>Set the background gradient of the button.</td></tr><tr><td>Label hover color</td><td>Set the text color of the button for the hover state.</td></tr><tr><td>Border hover color</td><td>Set the border color of the button for the hover state.</td></tr><tr><td>Background hover color</td><td>Set the background color of the button for the hover state.</td></tr><tr><td>Background hover gradient</td><td>Set the background gradient of the button for the hover state.</td></tr></tbody></table>

### Section top padding

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>

### Section bottom padding

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>