Video with text overlay
Video with text overlay shows a full-width video with text placed on top of it. On mobile, the text can move below the video.
How to add it
- In the Theme Editor, open the template where you want the section.
- Select Add section, then choose Video with text overlay.
The package uses this section on the Product templates and on The Craft page.
Settings
View the section guide .
General
Content position on desktop sets where the text sits on the video. On mobile the position adjusts automatically.
| Setting | Options | Description |
|---|---|---|
| Content position on desktop | • Top left | On mobile, the position adjusts automatically. |
Heading content
| Setting | Options | Description |
|---|---|---|
| Content alignment | • Left | Aligns the overlay text to the left, center or right on screens 768px wide and up. |
Video
Video overrides Video URL when both are set. Video height sets how tall the video area is: Adapt to video, Full screen, Based on content, or Small, Medium or Large.
| Setting | Options | Description |
|---|---|---|
| Video URL | YouTube or Vimeo link played as a looping background video. An uploaded Video file overrides it. | |
| Video | Overrides the Video URL setting. 1392px x 550px recommended | |
| Video poster | Use the same dimensions as the video. | |
| Video alt text | Text read aloud by screen readers to describe this video. Learn more ( https://help.shopify.com/manual/online-store/themes/theme-structure/theme-features#video-block ) | |
| Video height | • Adapt to video | Sets how tall the video area is. Full screen matches the window height below the header, Based on content grows with the text, and Small, Medium and Large use fixed heights. Adapt to video follows the proportions of the video. |
Mobile layout
Show content below media on mobile moves the text under the video on mobile.
| Setting | Options | Description |
|---|---|---|
| Show content below media on mobile | The text appears below the video on mobile. | |
| Content alignment on mobile | • Left | Aligns the overlay text to the left, center or right on screens narrower than 768px. |
Layout
| Setting | Options | Description |
|---|---|---|
| Content max width | Max width is automatically optimized for mobile. | |
| Horizontal content padding | Padding inline is automatically optimized for mobile. | |
| Vertical content padding | Padding block is automatically optimized for mobile. |
Appearance
Overlay opacity darkens the video behind the text.
| Setting | Options | Description |
|---|---|---|
| Color scheme | Edit color schemes in Theme settings. | |
| Overlay opacity | Sets how dark the black layer on top of the video is, which helps the text stay readable. At 0 no layer is shown. |
Section layout
| Setting | Options | Description |
|---|---|---|
| Section width | • Page width | Sets how wide the section content is. Page width keeps it inside the standard content area, Wide stretches it further, and Full width runs edge to edge. |
| Top padding | Adds space above the section, in pixels. | |
| Bottom padding | Adds space below the section, in pixels. | |
| Show top border | Adds a border line along the top of the section. |
No comments yet