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

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:

The Video hero section

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:

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

    Drop-down menu with page types listed
    Drop-down menu with page types listed
  2. Scroll to the bottom of the home page sections and choose Add section..

    Add section button
    Add section button
  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.

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

    For more information, see the add a video section.

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

    We recommend using a still image from the video.

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

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

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

  10. Choose the color of the Overlay.

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

  12. 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:

    Shopify section drag handles
    Shopify section drag handles
  13. Use the Save button in the top-right corner when you are finished editing.

Add a Video hero section to other pages

To set up a Video hero section:

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

    Drop-down menu with page types listed
    Drop-down menu with page types listed
  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.

  4. Adjust the Height and Mobile Height.

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

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

    For more information, see the add a video section.

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

    We recommend using a still image from the video.

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

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

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

  10. Choose the color of the Overlay.

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

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

    Shopify content block drag handles
    Shopify content block drag handles
  13. Use the Save button in the top-right corner when you are finished editing.

Video hero settings

The Video hero section has the following settings:

Configuration 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:

  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:

Top leftTop centerTop right
Middle leftMiddle centerMiddle right
Bottom leftBottom centerBottom right

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

Video text alignment
Video text alignment

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.