Spark 1.0

Video hero

With the Video Hero section, you can feature a video on your home page. You can preface your video with a hi-def thumbnail and custom marketing text.

The Video hero section can be used on the following page templates:

  • Home page template

  • Collection pages template

  • Product pages template

This section accepts direct video links uploaded to your Shopify Files.

Add a Video hero section on the home page

To set up a Video hero section:

STEPS

  1. From your theme's Customize theme editor, choose Home page from the pages drop-down menu at the top of the screen.

  2. Scroll to the bottom of the home page sections and choose Add section..

  3. Choose Video from the list of sections.

    This opens the Video hero section settings.

  4. Adjust the Height and Mobile Height.

Set the slide image between 50% to 100% of its maximum height.

  1. Add a Video link to a .mp4 file uploaded to your Shopify Files.

    For more information, see the add a video section.

  2. Add an Image fallback to be used as a preview for the video.

    We recommend using a still image from the video.

  3. Add Heading and Subheading text to be displayed at the top of the section.

  4. Add a Button label and Button link to be displayed as a call to action button on the slide.

  5. Tweak the Overlay opacity.

    The overlay is a colored filter that is layered on top of your video and image. The opacity can be between 0% and 100%, where 0% is invisible and 100% is completely opaque.

  6. Choose the color of the Overlay.

  7. Change the color of the Text so that it's readable against the overlay and the image.

  8. Return to the list of Home page sections to find your new Video hero section.

Use the drag handles to rearrange the order of you Home page sections:

  1. Click Save.

Add a Video hero section to other pages

To set up a Video hero section:

STEPS

  1. From your Customize theme editor, choose Collection pages or Product pages from the pages drop-down menu at the top of the screen.

  2. Click on the arrow beside Collections or Products.

  3. Use the Add block button to select the Video hero section.

This opens the Video hero section settings.

  1. Adjust the Height and Mobile Height.

Set the slide image between 50% to 100% of its maximum height.

  1. Add a Video link to a .mp4 file uploaded to your Shopify Files.

For more information, see the add a video section.

  1. Add an Image fallback to be used as a preview for the video.

    We recommend using a still image from the video.

  2. Add Heading and Subheading text to be displayed at the top of the section.

  3. Add a Button label and Button link to be displayed as a call to action button on the slide.

  4. Tweak the Overlay opacity.

    The overlay is a colored filter that is layered on top of your video and image. The opacity can be between 0% and 100%, where 0% is invisible and 100% is completely opaque.

  5. Choose the color of the Overlay.

  6. Change the color of the Text so that it's readable against the overlay and the image.

  7. Return to the list of Product or Collection features. Use the drag handles to rearrange the order of the blocks:

  8. Click Save.

Settings reference

The Video hero section has the following settings:

Height

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

Mobile height

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

Video link

Add the full URL to the video.

This setting takes YouTube and Vimeo video URLs.

Image fallback

Select or upload an image to be used as the video preview.

We recommend using a still image from the video.

Heading

Add heading text to be used above the list of featured products.

We recommend keeping this to just a few words long.

Subheading

Add subheading text to be displayed below the heading text.

We recommend keeping this to a short sentence or two.

Heading size

Change the title heading of the slides between 48px to 72px.

Text max width

Change how wide the subheading text can be at a maximum.

Text shadow amount

Change the shadow to all slide text to add more of a contrast with the slide image.

Text color

Choose the text color for the entire slide.

Button text color

Choose the button text color.

Button background color

Choose the button background color of the button.

Overlay color

Choose the color of the overlay that will cover the entire slide.

Overlay opacity

Use the slider to choose how opaque the overlay color should be. Where 0% is invisible and 100% is completely opaque.

Text alignment

Choose how the text inside the current slide should be aligned.

For more information about each option, see [Text alignment in slideshows][text-alignment]

Add a video

Before you start setting this up, you should know a few things:

  1. You'll need your video as an .mp4 video file.

  2. For the best customer experience, we strongly recommend using a 20- to 30-second video that's under 10MB in size.

  3. You can't use a service like YouTube or Vimeo to host this video.

To use Shopify to host this video file:

STEPS

  1. Go to the Shopify Files uploader screen in your Shopify dashboard.

  2. Use the Upload files button to add a video file from your computer.

  3. Once it has been uploaded, copy the URL next to the file.

    It should look something like this: https://cdn.shopify.com/s/files/1/0074/8165/5349/files/my-video-filename.mp4.

  4. Paste the link into the Video link field in the section settings.

Text alignment

In the Video hero section, you can change how text is aligned.

The following Text alignment settings are available:

In the following diagram, you can see where of these settings would place your text::

  • Home page

  • Product pages

  • Collections page