Video with text overlay

The Video with text overlay section offers a stylish way to present content over background video or display the video by itself.

It offers a dynamic way to showcase your products or services in action. Videos are generally more engaging than static images, capturing the attention of visitors more effectively. This increased engagement can encourage visitors to explore your site longer and may lead to higher conversion rates.

How to add video with text overlay section

Quick Start Guide

‍

Access the Theme Editor: Navigate to `Online Store > Themes > Customize`.
Add a Section: Click on `Add section` and select the desired section from the list of available sections.
Customize Your Section: Adjust the settings such as display type, alignment, and visibility according to your preferences.
‍

If you need a more detailed, step-by-step guide on accessing the theme editor, adding sections and blocks, refer to our Setting up theme sections and blocks article.

General section settings

Within this section, you'll find common settings like containers, visibility options, and color settings that are consistent across all sections. For more detailed information on these shared settings, please refer to the Common settings between all sections article.

Note

Unlike the other sections that contain a section header, this particular section does not include one. Instead, the content is presented as blocks that overlay the video within the section.

Section-Specific Settings

Video: Upload a video file or provide a link to a YouTube or Vimeo video.
Cover Image: Upload a cover image for the video, displayed before playback.
Overlay Opacity: Adjust the opacity (0-100%) of the overlay to make the text more readable.
Video Height (Desktop/Mobile): Choose between adapt, full-screen, or custom video height.
Custom Video Height (Desktop/Mobile): Manually set the video height (300-1000px for desktop, 300-600px for mobile).
Content Position (Desktop/Mobile): Position the content (top, middle, bottom) and align it (left, center, right).
Content Maximum Width: Define the maximum width for the text block (400-700px).
Content Spacing (Vertical/Horizontal): Adjust the spacing around the content vertically (40-120px) and horizontally (0-120px).
Show Content Background: Enable a background color behind the content for enhanced readability.
Content Background Color & Opacity: Choose a color and adjust its opacity (10-100%).

Tip

For best video loading times, use short MP4s and be mindful of the file size. Keep MP4s under 2-3mb where feasible.

Block Settings

Subheading: Add a subheading with adjustable size (small, medium, large).
Heading: Add up to three headings with customizable text and size (small, medium, large, extra-large).
Text: Enter rich text with the option to enlarge for emphasis.
Buttons: Add up to two buttons with customizable labels, links, and styles (primary or outline).

Can't find what you're looking for?

Our support staff are here to answer your queries, so don't hesitate to write to us!