User Guide

Video Hero

by Admin on Apr 11, 2024

Video Hero section is where you display a video with overwritten text and button on it.

Video Hero Subheading Enter the subheading to display on top of the heading with a smaller size.
Heading Enter the heading of the promotion banner, which will be shown on the banner.
Heading size Adjust the size of the heading (range from 50-200%).
Shopify-hosted video Click the Select video button to choose a video on your store data.
Embed Video From URL Enter the URL of the video. Only support YouTube and Vimeo videos.
Video alt text Enter the alt text for the video.
Make section full width Tick the checkbox to set the video’s width to be the same as full width of users’ devices. Disable it to set the video’s width to be the same as the page width set in the theme setting.
Button label Enter the label of the button.
Show as primary button Tick the checkbox to set the button's styles to be the same as the style of the primary buttons. Otherwise, it will follow the outline button's styles.
Button link Enter the link the users will be redirected to when they click the button.
Alignment Adjust the alignment of the button.
Styles  Button color Choose the color of the primary button (config Show as primary button is enabled), which will have hover effect.
Button hover color Choose the color of the button when users hover on it.
Button text color Choose the color of the text on the primary button.
Button text hover color Choose the color of the text on the primary button when users hover on it.
Secondary button color Choose the color of the secondary button (if config Show as primary button is disabled), which will have no effect.
Section padding Top padding Adjust the padding on top of the banner (range from 0 to 100 px).
Bottom padding Adjust the padding at the bottom of the banner (range from 0 to 100 px).