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

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

Content

Settings	Meaning
Title	Enter the title of the content on the video.
Title font size	Set the font size of the title.
Title font size on mobile	Set the font size of the title on the mobile.
Title bottom margin	Determine the spacing of the title from the description.
Title color	Apply a color to the title.
Description	Enter the description of the content on the video.
Description font size	Set the font size of the description.
Description font size on mobile	Set the font size of the description on the mobile.
Description bottom margin	Determine the spacing of the title from the description.
Description color	Apply a color to the description.
Maximum content width	Set the maximum width of the content.
Content alignment	Align the video content including the title, description, and button to the Left, Right, or Center.
Content position	Select the position of the content to be on the left, center, and right of the video.

Button

Settings	Meaning
Button label	Enter the label for the button.
Link	Enter the link for the button.
Button width	Set the width of the button.
Label color	Set the label color of the button.
Border color	Set the border color of the button.
Background color	Set the background color of the button.
Background gradient	Set the background gradient of the button.
Label hover color	Set the text color of the button for the hover state.
Border hover color	Set the border color of the button for the hover state.
Background hover color	Set the background color of the button for the hover state.
Background hover gradient	Set the background gradient of the button for the hover state.

Section top padding

Settings	Meaning
Desktop	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).
Tablet	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).
Mobile	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).

Section bottom padding

Settings	Meaning
Desktop	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).
Tablet	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).
Mobile	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).