Video Hero

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.

Note:

Autoplaying videos will be muted by default, with this Section type.

If sound is preferred, please use the Video section instead:

Settings

Adding & Uploading Videos

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

MP4 files are supported, however they require uploading to the asset folder. Navigate the following steps from your Shopify dashboard:

  1. Settings → Files

  2. Upload.

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.

YouTube

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:

https://www.youtube.com/watch?v=kZNzMaQ4PYA

or

https://youtu.be/kZNzMaQ4PYA.

Note:

Please note the theme will only accept the shortened URL version on Theme Version 17.0.0 and later.

Copy this link and paste into your video section settings, under Video URL.

Note:

Certain sizes of video may appear with black bars on-screen to ensure the player's screen is correctly loaded.

Vimeo

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:

https://vimeo.com/220859711.

Copy this link, and paste into the Video section settings, in the Video URL field.

Note:

Autoplaying is not supported on mobile view for Vimeo or Youtube videos.

Section height

Change how the height behaves on full size browser.

Mobile Section height

Change how the Video Hero section height is displayed specifically on mobile/iPad devices.

Add Text

Overlay text over the Video Hero section.

Heading & Subheading

You can add Headers and Subheadings that will overlay the Video:

Text Position

Change the position the text overlay displays.

Text Color

Changes the color of the text overlay.

Text Shadow

Add's a shadow effect to the text overlay.

Heading & Subheading size

Slide the bar to the size of the Heading/Subheading.

Button

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.

Button text

Changes text displayed inside the overlay button link.