Video hero

A guide to add a background video

The Video hero section displays an auto-playing video (without sound) to add dynamism to your page.

If you want to add a Vimeo or YouTube video, that includes sound, you should use the Video section instead.

In this article, we will show you how to add and edit a Video hero section.

Section settings

Video settings

Video type

Set your Video height and the Video type you want to use.

You can either add a video you've added to your Shopify Files, or an external video (Vimeo and Youtube accepted).

Video type as Shopify hosted requires a .mp4 video file uploaded to your Shopify files.

After selecting the video type, add the video link or select from your Files.

Content settings

  • Content in container box: select the checkbox if you want the content to show inside the Container width that is set in Theme settings > Layout settings.

  • Content position: use the dropdown options to change the position of the content on the video (desktop view). Available positions are:

    • Top left

    • Top center

    • Top right

    • Middle left

    • Middle center

    • Middle right

    • Bottom left

    • Bottom center

    • Bottom right

  • Content alignment: Left/Center/Right.

  • Select the Overlay color and Overlay opacity.

Block settings

You can add some custom texts or leave them blank to display the video on its own:

  • Heading: enter heading text to display as a section title.

  • Subheading: enter subheading text to display below the heading.

  • Text: enter a description or extra info to your video. Use the formatting buttons to add bold, italic, or linked text.

You can add a CTA button to redirect visitors to your desired page.

  • Button label: add custom text for your call-to-action button.

  • Button link: select or paste a link for the call-to-action button.

  • Button style: select the style of the button as a Primary button/ Secondary button/ Outline/ Underline/ Plain.

Last updated