Video with Text Overlay

Overview

A Video with Text Overlay displays a muted, autoplaying video on a loop - immediately catching your customer's eye, and leaving your storefront looking polished and professional.

Example of a Video with Text Overlay section.

This type of section is muted by default - if videos with sound are preferred, please use the standard Video section instead.

Steps

  1. Within your Shopify admin, go to Sales Channels > Online Store > Themes.

  2. Click your theme, and select Customize.

  3. On the left-hand menu, select Add section.

  4. Scroll down to select Video with Text Overlay.

  5. Click Select.

Add section > Video with Text Overlay

Video URL

To add your chosen video to this section, add the URL for your video source here.

For the video source, this section only works with URLs from Youtube, Vimeo, and .mp4.

Adding your video.

To obtain a URL for a .mp4 file:

  1. Within your Shopify admin, go to Settings > Files.

  2. Select Upload files, and upload the view of your choice.

  3. Copy the URL next to your uploaded video file.

To learn more about how to upload video files, click here to read Shopify's help pages.

Locating the URL for an uploaded .mp4 file.

Section Height

Use the Section height drop-down menu to change your video to one of the following size options:

  • Full screen

  • Small

  • Medium

  • Large

  • Extra Large

Changing the section height to make the video larger.

Mobile Section Height

Use the Mobile section height drop-down menu to change your video to one of the following size options for mobile users:

  • Full screen

  • Fit to screen width

  • Small

  • Medium

  • Large

  • Extra Large

Changing the section width for mobile users.

Text Contents

Heading and Subheading

While neither are required fields, you can choose to add a Heading and a Subheading to your video by typing them into the entry fields under Settings.

A new Heading will also rename this section entirely.

The Heading and Subheading can only feature plain text, and therefore can't include any bold or italic text.

Adding a heading and subheading to your video's text overlay.

Text

Use the Text entry field to accompany your video with a description, with the option to use bold, italic, or linked text.

Adding text to your video's text overlay.

Text Position

Use the Text position drop-down menu to change where your text overlay sits on your video.

Changing the position of the text overlay on the video.

Text Color

To change the color of your text overlay, simply select the Text color box and use the color selector.

Changing the text color of the overlay.

Text Shadow

Select Text shadow if you wish your text to be highlighted with a soft outline.

Before and after the text shadow option has been enabled.

Heading & Subheading Size

To control how large the heading and subheadings are across your video, use the Heading size slider and Subheading size slider to make this larger or smaller.

Changing the heading and subheading size using the sliders.

Adding a Button

You can add a button which can take you to another page, which sits underneath your text overlay - simply add a Button link and type in your Button label.

To link this button to another page, click the Link entry field and select a page from the menu - alternatively, you can paste a URL.

Your button will not be visible until you enter text into the Button label field.

Button Label

To make your button visible underneath your text, use the Button label entry field to write something that will incentivize your customers to click.

Adding a button linking to another page, and labelling it.