Showcase a video on your home page, and combine it with text overlay and call-to-action button.
Add a Video section to your home page
- In the theme editor (Customize), click [+] Add section
- Locate Video
- Click the section, then Add
Include an optional heading
Provide the section with an optional Heading for the top.
Connect the video URL
This feature supports YouTube and Vimeo videos only. Simply paste in the video's URL to assign it to this section.
Adjust video settings
You can also choose to enable Autoplay for the video. If enabled, this means the video with automatically begin playing when a customer visits your store. If you'd like customers to have control over the video, leave this option disabled.
Note that some of these controls may yield to the preferences and configurations of the customers' browser or device type.
You can also specify the video's Aspect ratio. Choosing either 16:9 or 21:9 will make the video remain proportionally accurate across different devices and browsers.
Configure the video overlay
Select Show overlay to enable the feature. The text and a play button will appear over the embedded video. When a customer clicks the play button, the overlay will disappear and the video will play. This comes in handy when you'd prefer a placeholder to show before the video is selected. But it's worth knowing the Autoplay feature won't work with the Cover image as a placeholder. It's one or the other for these opposite settings.
Use Show overlay to enables or disable the Overlay.
Include a Heading and some Text using the provided fields.
Set the Heading and text position to have the text display above or below the play button
Select a Text color and Background color. The background color controls the color overlay for the cover image. This is helpful to make your text readable over the image
Adjust the Background color opacity. Set to 100% or lower. Conversely, this controls the transparency. Turn to 0% to disable the Background color entirely.
Upload your Image. This is the cover image that appears as a placeholder for the video
Set the Image position - this adjusts the focal point of your image and is helpful if your image's aspect ratio is different than the section. If the image you are using has roughly the same aspect ratio as the setting, you likely will not see this setting make much of an impact.