Supported Versions
The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.
In This Article
Using the Video Section
The Flex 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 products or services actually work!
The 'Video' section supports Youtube, Vimeo or HTML5 videos. It can be fullscreen, standard or half width, include a placeholder image, text area, overlays, advanced layout options and even custom CSS for further flexibility. 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! The section settings for the Video are divided into the following areas: video, text, overlay, layout, and advanced.
Video
The video settings include options for the video embed/file.
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 on compatible devices
If you enable the 'autoplay on compatible devices' 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 video
If you enable the 'autoloop' setting, once your video has ended, it will then start over again automatically.
YouTube or Vimeo video URL
Here's where you add your actual video link if you're using either Vimeo or YouTube videos.
HTML5 MP4/OGV File URL
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.
Text
The text settings include options to add content on top of the video and select text position and alignment.
Preheading/Heading/Subheading
The 'preheading,' 'heading' and 'subheading' fields let you add text on top of 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.
Under the 'preheading,' 'heading' and 'subheading' fields, there will be color pickers if you'd like to select specific colors for these text fields on the video section, if you leave the color fields to 'none', they will then pick up the default color settings under Theme Settings > Colors.
Horizontal position/Vertical position
Here you can have greater control over where your text is positioned on your video section. Choose both the horizontal and vertical position of your text and button (if you've added any!) For horizontal position, choose from left, center and right. For vertical position, choose from top, middle and bottom.
Text alignment
Here you can choose the alignment of your text and button (if you've added any!) Choose from left, center, or right.
Button label/Button style
If you'd like to add a button to the text area (ex: Play video) you can enter the text into the button label field and choose between your 'primary' and 'secondary' button styles(which are configured under Theme Settings > Buttons).
Overlay
If you'd like an overlay to sit on top of the video section, you can configure the options included in the overlay settings. The overlay can come in handy if you have have a 'busy' placeholder image as it will improve legibility of any text added!
Overlay style
For the actual overlay, you have three options in the 'overlay style' setting: full, text only and none. Full will enable the overlay across the entire video section, text only will enable the overlay only behind the text if you'd added any, and none disables the overlay.
Overlay/Gradient/Gradient rotation
You can use the 'overlay' color picker to select a color for the video overlay. If you'd like to add a gradient, you can use the 'gradient' color picker. If you add a gradient, you can adjust the 'gradient rotation' from 0 degrees to 180 degrees.
Background opacity
You can adjust the opacity of the overlay with the 'background opacity' setting – 0 is completely transparent (or invisible), while 100 is completely opaque.
Text width
The 'text width' setting controls how wide the text/buttons spans across your video section. You can choose from 40% - 100%.
Layout
The layout settings include options to adjust the spacing and width in this section, and enable animation for when the Video section loads in.
Width
The options under the 'width' setting include: 'half,' 'standard' and 'wide.' Selecting 'wide' will spread out the section full-width of the screen. Selecting 'standard' will keep the section in a container and not spread the full-width. Selecting 'half' will resize this section to be half of the 'wide' option.
With the 'half' width option, if you have set the video section to 'half', and the Section following it set to 'half', they will sit next to each other side-by-side – for example, here is a video section followed by a rich text section:
Top/Bottom spacing
You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.
Left/Right spacing
For even further control, you can choose to move the section over more to the left or to the right side of the page by adjusting the 'left spacing' and 'right spacing' settings.
Animation
The 'animation' setting will determine how the section 'loads in' . The options for animation are: 'none,' 'fade in,' 'fade in down,' 'fade in left,' 'fade in right,' 'slide in left,' 'slide in right,' and 'zoom in.'
Advanced
In the advanced settings, you can add in your own CSS class and custom CSS.
More information about using the Advanced CSS feature.
In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
Mobile Layout
When viewed on a mobile device, the Video section either stacks vertically with the banner image displaying at the top and the text and buttons display underneath, or with the text/button displaying on top of the image – depending on your 'mobile' section settings. You can also choose mobile specific color settings if you'd like within the 'mobile' section settings.
