# Video hero

{% hint style="danger" %} <mark style="color:red;">Theme retirement</mark> | Context is no longer available on the Shopify theme store. **Theme support and updates for current users will end after May 18, 2024**. [Learn more here](https://help.fluorescent.co/context/readme/theme-retirement).
{% endhint %}

Add the **Video hero** section to show a full-width autoplaying video (without sound), uploaded as a .mp4 file to your Shopify files.

{% hint style="info" %}
If you want to add a Vimeo or YouTube video (with sound), you can use the [Video section](https://help.fluorescent.co/context/sections/theme-sections/video).
{% endhint %}

## Set up section

Add this section to any template (except Checkout) and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](https://help.fluorescent.co/context/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/context/general/adapting-your-theme/dynamic-content-with-metafields).
{% endhint %}

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

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

   > Learn how to use templates in our [Templates guide](https://help.fluorescent.co/context/general/editing-themes/using-templates).
2. Under **Template**, click **(+) Add section** and select **Video hero**.
3. Click and hold the drag-and-drop handles **`⋮⋮`** to re-order your sections.

</details>

## Add video file

The **Video hero** section requires an **`.mp4`** that's been uploaded to **Content > Files** in your Shopify admin. For the best experience, we strongly recommend using a 5 to 10 second video under 10MB.

{% hint style="info" %}
The autoplay video does not play audio. To embed a video from YouTube or Vimeo with audio, see Context's [Video section](https://help.fluorescent.co/context/sections/theme-sections/video).
{% endhint %}

| File Format | .mp4 video (required)        |
| ----------- | ---------------------------- |
| File size   | Maximum 10MB (recommended)   |
| Duration    | 5 - 10 seconds (recommended) |

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your **Shopify admin**:

1. Go to **Content > Files** to open your [Shopify files](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/file-uploads).

   ![](https://3096289102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fvbp0IBkqpivnJ0UBSwsh%2Fuploads%2Fgit-blob-b07c1c046c9b84e54c0a68287dde69a8fec07224%2Fshopify-files.jpeg?alt=media)
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*.

   > You may need to refresh the page for your file to appear.

   ![](https://3096289102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fvbp0IBkqpivnJ0UBSwsh%2Fuploads%2Fgit-blob-6f3a83051762c666a182acfecdd53269ed7141af%2Fshopify-files-link.jpeg?alt=media)

In the theme editor (**Customize**):

1. Click the **Video hero** section to open the settings.
2. Paste the link into the **Video link** field. Click on the the link that appears in the results above.

   ![](https://3096289102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fvbp0IBkqpivnJ0UBSwsh%2Fuploads%2Fgit-blob-274126cc29126e394eb8011f10c018251e71a559%2Fvideo-link.jpeg?alt=media)
3. Click **Save**.

</details>

## Add s**ection headings**

Edit the **Heading** and **Subheading** to overlay the video before playing. The section headings are included as blocks nested within the section.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click the **Title** block (”Rich text”) to open the settings.
2. Change the **Heading** text to display as a section title.

   > Increase or decrease the **Heading size** using the slider.

   > Use the **Max width of text** slider to control the maximum width of the heading.
3. Click the **Subheading** block to open the settings.

   > Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's [Rich text editor guide](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#format-text-with-the-rich-text-editor).

   > Use the **Max width of text** slider to control the maximum width of the rich text. Use this setting to create a clean visual shape for your text and avoid unwanted line breaks.
4. Click **Save**.

</details>

<br>

***

> **Related links**
>
> [Video section](https://help.fluorescent.co/context/sections/theme-sections/video)