Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

Video hero

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

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

Add a video hero section

The Video hero section can be added to any template (except the Checkout). Learn more about sections and templates in our article about how to use the theme editor.

In the theme editor (Customize):

  1. Select a Template to edit from the dropdown menu in the top bar.

  2. In the side panel, click +Add section and select Video.

  3. Change the order of your sections by using the drag and drop handles ⋮⋮

Add video file

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 around 10 seconds long or less and that's under 10MB in size.

1. Upload video to Shopify files

In your Shopify Admin:

  1. Go to Settings > Files to open your Shopify Files.

    Shopify files in admin dashboard
    Shopify files in admin dashboard
  2. Click the Upload files button to add your .mp4 file from your computer.

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

    Note: you may need to refresh the page for your file to appear.

    Shopify files copy link button
    Shopify files copy link button

In your theme editor (Customize):

  1. Click directly on the Video hero section.

  2. Paste the link into the Video link field. Click on the the link that appears in the results above.

    Direct link in the Video link field
    Direct link in 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. Click Save.

Add fallback image

Upload an image that will appear in case the video fails to load.

  1. Click directly on the Video hero section.

  2. Upload an Image fallback.

    We recommend a Landscape image that is wider that it is tall. Ideally, this is a screenshot or still of the video.

  3. Click Save.

Adjust video height and focal point

In the section settings, set the height of the video for desktop and mobile devices and select a focal point that will remain centered if the video extends beyond the visible screen or window.

In your theme editor (Customize):

  1. Click on the Video hero section to open the section settings.

  2. Adjust the Height and Mobile Height of video images between 50% to 100% of the maximum height.

  3. Select the Image focal point to choose which section of the video to keep centered at all times.

    This setting ensures the key part of your video appears when cropping occurs.

  4. Remember to click Save.

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. To adjust the position and color of your headings, click on the Video hero section in the editor panel.

  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
  5. Change the Color for the Text and Overlay.

  6. 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.

  7. Remember to click Save.

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?"

  3. Remember to click Save .

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.

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 color

Choose the text color for the video headings.

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.

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.

Text max width

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?"

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.