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
Navigate to the Sections tab in the theme editor and select Add section > Video.
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.
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 customer 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 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 wont work with the Cover image as a placeholder. It's one or the other for these opposite settings.
The Overlay settings include:
- Show overlay - Enables/disables the Overlay
- Heading and text position - this means wether your Heading or Text will appear above or below the play button
- Text color
- Background color - this act more as a colored overlay over the cover image. This is helpful to make your text readable over the image
- Background color opacity - turn to 0% to disable the Background color
- Image - this is your "cover image" and will appear as a placeholder for the video
- Image position - this adjust the focal point of your image and is helpful if your image's aspect ratio is different then the section. If the image you are using has roughly the same aspect ratio of the setting, you won't see this setting make sure of an impact