The Video Hero section is a muted, auto-play video section, available as of Flow version 16.0 and onwards. This section can feature text overlay, with the possibility of looping videos without sound.
Videos can be uploaded using a URL link. File types currently supported include MP4, YouTube, and Vimeo.
If the video is a local file, or requires uploading to your theme, you can upload the video to the assets folder using the Shopify Settings, accessible from your Shopify dashboard.
From the Settings page, select Files.
Click either of the upload file buttons, highlighted in the image below.
This will prompt options to upload a file from your system. Once uploaded, your file will display in a list, alongside a URL, size of the file, and the option to delete.
An address (URL) will be generated for the location of your file. This can be used as your Video URL and placed directly into your Video section settings, under Video URL.
MP4 files are supported, however they require uploading to the asset folder. Navigate the following steps from your Shopify dashboard:
Settings → Files
Once the upload is finished, it will appear in the file list with a distinct URL, such as: https://cdn.shopify.com/s/files/1/1729/0003/files/v2_w_video.mp4?7151069111780353242.
Copy this link to your clipboard, and proceed to paste in the Video section settings, to display on your store.
Videos uploaded to YouTube are supported, and only require the YouTube URL.
Once the video is uploaded to YouTube, you will be given a link to your video. For example:
Copy this link and paste into your video section settings, under Video URL.
After successful upload to Vimeo, a link for the video will be provided that you will need for integration on the storefront.
This will appear as the below example:
Copy this link, and paste into the Video section settings, in the Video URL field.
Change how the height behaves on full size browser.
Change how the Video Hero section height is displayed specifically on mobile/iPad devices.
Overlay text over the Video Hero section.
You can add Headers and Subheadings that will overlay the Video:
Change the position the text overlay displays.
Changes the color of the text overlay.
Add's a shadow effect to the text overlay.
Slide the bar to the size of the Heading/Subheading.
Add a button underneath your text overlay to directly link to a Product, Page, or a Collection.
Control which page the button links to, if displayed.
Changes text displayed inside the overlay button link.