We've recently relaunched all three of our themes. Watch the launch video here.

Video hero

The Video hero section displays a full-width autoplaying video to had some dynamism to your page.

If you want to add a Vimeo or YouTube video, youll need to add a regular Video section.

The Video hero section

Upload a video to your Shopify Files

The Video hero section requires an .mp4 that's been uploaded to your Shopify Files.

This section is best for short looping videos. We strongly recommend using a video that's no more than 30 seconds long and that's under 10MB in size.

To upload your .mp4 video:

  1. From your Shopify dashboard, go to Settings > Filesto open yourShopify Files.

  2. Click the Upload files button to add your .mp4 file from your computer.

  3. Once your file has been uploaded and processed, click the Link icon next to the file to copy the URL.

  4. You can now add a video hero section or skip to add your video file link if you have added the section already.

Add a Video hero section

The Video hero section can be added to any template (except the Checkout). To learn more about Sections and Templates, see Shopify's OS2 Theme Editor manual.

  1. In your theme editor (Customize), select the Template you wish to edit from the dropdown menu in the top bar.

    Drop-down menu of page templates
    Drop-down menu of page templates
  2. Click + Add section and select Video hero from the Theme Sections list.

    Add section button
    Add section button
  3. (Optional.) Click and hold the ⋮⋮ drag icon to change the order of your sections:

    Shopify section drag handles
    Shopify section drag handles

[Video section with top-level highlighted]

  1. Click directly on the Video hero section.

  2. Paste the direct link to your .mp4 file into the Video link field.

    If you haven't already, go to Settings > Files and click the Link icon next to your video file to copy the URL.

  3. Remember to click Save in the top-right corner.

Change the section headings

You can add custom promotional text to the Heading and Subheading blocks or choose to remove the these blocks to display the video on its own.

  1. Click on the heading blocks to change the Heading and Subheading text displayed on the the video.

    Use the Remove block button in the block settings to remove the headings entirely.

  2. Adjust the Text max width of your headings using the slider.

    Experiment with this setting to find a clean visual shape for your text.

  3. For the main Heading block, you can adjust the Heading size using the slider.

    Make sure the heading is large enough so it's distinctive and easy to read.

  4. Remember to click Save in the top-right corner.

Add a call-to-action button

You can link to you collections or products or any other page with a custom call-to-action button.

  1. Click + Add block and select Button, then click on the block to open the button block settings.

  2. Add a Button label and Button link to display a button underneath the subheading.

    The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"

    To learn how to change the style and shape of buttons across your site, see the Style section in our Theme Settings article.

  3. Remember to click Save in the top-right corner.

Customize the Video hero section

The Video hero section settings apply to the entire section. You can adjust the overall height of the video for both desktop and mobile, change the section colors, and choose where to position the headings and button.

  1. Click on the Video hero section.

    This opens the Video hero section settings.

  2. Adjust the overall Height and Mobile height of the video using the slider.

    Choose between 50% and 100% of the maximum height of your video.

  3. Select an Image fallback to display in case the video does not load.

    We recommend using a still image from the video.

  4. Use the Text alignment dropdown to change the position of your headings and Call to Action button on top of your video.

    Text alignment examples
    Text alignment examples
  5. Adjust the Text shadow amount using the slider.

    Text shadow can add contrast to make your headings readable.

  6. Change the Color for the Text, Button background, and Button text.

  7. Change the Overlay color and adjust the Overlay opacity using the slider to increase the contrast between the heading text and video.

    Set the opacity to 0% to turn off the overlay color.

  8. Remember to click Save in the top-right corner.

Video hero section settings

The following settings are found by clicking directly on the section title:

Configuration Settings

Height

Use the slider to set the height of the video as a perecentage of the maximum height.

Mobile height

Use the slider to set the height of the video on mobile as a perecentage of the maximum height.

Video link

Add the direct link to your .mp4 file uploaded to your Shopify Files.

Click the Link icon next to your video file to copy the URL.

Image fallback

Select or upload an image to display in case the video does not load.

We recommend using a still image from the video.

Text alignment

Choose which section of the video you want to display your headings and button.

Text shadow amount

Change the shadow to all heading text to add more of a contrast with the video.

Text color

Choose the text color for the video headings.

Button background color

Choose the button background color of the button.

Button text color

Choose the button text color.

Overlay color

Choose the color that overlays the entire video.

Overlay opacity

Use the slider to adjust the transparency of the overlay color.

Set the opacity to 0% to turn off the overlay color.

Heading block settings

The following settings are found by clicking directly on the Heading blocks:

Configuration Settings

Heading

Add heading text use as a title the video.

We recommended a short title of just a few words.

Heading size

Use the slider to adjust the font size of the main heading between 48px to 72px.

Make sure the heading is large enough so it's distinctive and easy to read.

Subheading

Add subheading text to display below the heading. We recommend two to three short sentences.

Use the formatting buttons to add bold, italic, or linked text.

Max width of text

Use the slider to adjust the maximum width of the heading and subheading text.

Experiment with this setting to find a clean visual shape for your text.

Button block settings

The following settings are found by clicking directly on the Button block:

Configuration Settings

Button label

Add custom text for your call-to-action button.

The most effective button labels ask your customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"

Button link

Select or paste a link for the call-to-action button.

To learn how to change the style and shape of buttons across your site, see the Style section in our Theme Settings article.

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.