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.
Video Section Settings
The section settings determine the look and layout of this section.
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.
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 the Autoplay setting for videos to play automatically. Most major browsers have added some limitations on videos to prevent them from auto-playing. Although autoplay can no longer be guaranteed, we have an article that provides some tips to help increase the likelihood for your videos.
Enable the Autoloop setting to have the video restart automatically after it finishes.
Enable the Darken video setting to add a subtle overlay on top of your video.
Add your video link to the provided field. This section will accept both Vimeo and YouTube links.
HTML5 MP4 File URL/HTML5 OGV File URL (optional)
The HTML5 video option will require you to upload a video file. If you have enough file space in your Shopify account, then you can go to the Settings > Files section to upload your MP4 file and optional OGV file. It's recommended to upload both files for maximum compatibility, but only the MP4 file needs to be specified. You can also host these files on a third-party server other than Shopify. You can then copy and paste the file URL into this field.
You can upload an optional placeholder banner image that will display before clicking to view the video. And image size of 1600 x 900px is recommended.
Show text on video
If you've added any text or buttons to this section, enabling the 'show text on video' setting will display this content while the video is playing.
The Preheading, Heading, and Subheading fields let you add text to your video section. If you have a placeholder image enabled, the text will appear on the image, but disappear once the video starts to play.
If you do not have a placeholder image added, you will need to enable the 'show text on video' setting in order for the text to display.
Here you can choose the position of your text and buttons. Choose from left, center, or right:
Here you can choose the alignment of your text and buttons. Choose from left, center, or right:
If you want your text to stand out more against your video or placeholder image, you can use the 'display solid background' and 'enable background transparency' settings. These settings will add a background behind the text and can be a good idea if you're looking for more of a contrast for legibility purposes.
There are two optional buttons that you can enable for the 'video' section. 'First button label' and 'Second button label' is where you can enter the text for the button, while 'First button link' and 'Second button link' are where you can actually choose the link for the buttons.
You can also choose to enable the 'Highlight first button' and 'Highlight second button' settings as well, this will then display your buttons 'filled-in' as opposed to the outline design.