Turbo includes a Video section to enhance your pages. This section is ideal for storytelling, social proof, and demonstrating the value of your product and brand.
The Video section supports Youtube, Vimeo, or HTML5 videos, can be fullscreen or standard width, include a placeholder image, text areas, and buttons. Although there is limited browser support for autoplaying videos, the Video section includes an option to enable autoplay if possible.
Add this section to the
Section Settings
Click the Video section to open its settings.
Wide display
Enable Wide display to extend the section to the full width of the screen. Otherwise, the section will sit in a container on the page and not span the full width.
Aspect ratio
An aspect ratio is the ratio of its width to its height. In the video section, select one of two options for the Aspect ratio setting: 16:9 and 4:3.
Enable Video Autoplay and Looping
For product videos, activate autoplay by selecting enable Autoplay video. Repeat the video automatically at its end by activating Autoloop video.
Mute Video
Enable Mute video to disable the sound by default. Customers can still unmute the video with the player's controls.
Show Video Controls
Activate Show video controls to include the video player's features for controlling the playback (pause, full screen, mute, etc.).
Darken Video
Reduce the brightness of the video by selecting Darken video. There is also an Overlay feature to consider as an alternative.
Add the Video Link
There are two options for connecting a video: Video link and HTML5 MP4 File URL.
Video link
Add a YouTube or Vimeo URL to the Video link field to connect it with the section.
HTML5 MP4 File URL
Upload your video file to the Files portion of your Shopify Settings, then connect it with the section using the HTML5 MP4 File URL field.
Connect an MP4 file
- In the Shopify admin editor, open Settings
- Open Files
- Click Upload files
- Locate the file on your device
- Once uploaded, click the Link icon to copy the file URL
- Paste this URL to the HTML5 MP4 File URL field
Add Cover Image
Click Select Image to add a static image as a cover for the video. Merchants often use this to highlight a particular shot or frame from the video.
Overlay
Add text and an overlay to add clear messaging to your video section.
Show text when video is playing
Activate Show text when video is playing to have the text remain visible while the video plays. Leave this disabled to limit the text to before the video plays.
Headings
Add an optional Preheading, Heading, and Subheading with the provided fields.
Text position
Control the position for the text by selecting an option from the Text position dropdown.
The options are:
- Left
- Center
- Right
Text alignment
Align the text to the Left, Center, or Right side with the Text alignment setting.
Overlay opacity
Use the Overlay opacity slider to control the level of opacity (and transparency). Select a value closer to 1% for more transparency and a value closer to 100% for greater opacity. Disable the overlay by setting to 0%.
Colors
Select an Overlay color and Text color. These should contrast one another for the best results.
Add Buttons
Add one or two call-to-action buttons by adding text to your First button label and Second button label fields and connecting a page URL with the First button link and Second button link fields.