Supported Versions
The details shared here apply to the most recent version of Turbo. To keep your theme up to date, check out this helpful document.
In This Article
Using the Video Section
The Turbo theme includes a 'Video' homepage section which allows you to get creative by telling your story or showing your products being used in real life. The 'Video' section can be a great way to bring some life to your brand/products and can be super helpful for customers to see how your product actually work!
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.
In order to set up the Video section, click into Customize (your Theme Editor) > Sections > Add Section > Video.
Video Section Settings
The section settings determine the look and layout of this section!
Wide Display
You can choose to enable 'wide display' so this section will spread out the full width of the screen. Otherwise, the section will sit in a 'container' on the homepage and not span the full width:
Aspect Ratio
An 'aspect ratio' is the ratio of its width to its height. In the video section, there are two options for aspect ratio: 16:9 and 4:3.
Autoplay
If you enable the 'autoplay' setting, your video will then play automatically - if possible. Nearly all of the major browsers have added some limitations on videos to prevent them from autoplaying. Although autoplay can no longer be guaranteed, we have an article that provides some tips to help increase the likelihood for your videos.
Autoloop
If you enable the 'autoloop' setting, once your video has ended, it will then start over again automatically.
Darken Video
Enabling the 'darken video' setting will add a subtle overlay on top of your video.
Video Link
Here's where you add your actual video link! 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.
Image
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.
Preheading/Heading/Subheading
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 enabled, you will need to enable the 'show text on video' setting in order for the text to display.
Text position
Here you can choose the position of your text and buttons (if you've added any!) Choose from left, center, or right:
Text alignment
Here you can choose the alignment of your text and buttons (if you've added any!) Choose from left, center, or right:
Display solid text background/Enable background transparency
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.
Button labels/Button links
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.
Examples
Here's how we set up the 'Video' homepage section in our demo shops for Turbo!
-
Portland
Section settingsWide display - enabled
Aspect ratio - 16:9
Autoloop video - enabled
Video link - YouTube
Image - added
Heading - added
Subheading - added
Text position - right
Text alignment - center
First button label - added
-
Seoul
Section settingsWide display - enabled
Aspect ratio - 16:9
Video link - YouTube
Image - added
Preheading - added
Heading - added
Subheading - added
Text position - right
Text alignment - center
First button label - added
-
Chicago
Section settingsWide display - enabled
Aspect ratio - 16:9
Autoloop video - enabled
Video link - YouTube
Image - added
Show text on video - enabled
Preheading - added
Heading - added
Text position - center
Text alignment - center
Display solid text background - enabled
Enable background transparency - enabled
Highlight first button - enabled
Mobile layout
When viewed on a mobile device, the 'video' section stacks vertically with the video/placeholder image displaying at the top, while the text and buttons display underneath. When you click to play the video, it will open up full-screen that the customer can then click 'X' to get back to the homepage.
