> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Shine Video With Text

**Theme:** Shine · **Section type:** All-template section

A Video with text section shows a video next to a heading, text, and buttons. Use it for a product demo, a how-to clip, or a brand story that customers can watch without leaving the page.

> **Note:** You can add this section to any template, except the header and footer. The video can come from YouTube, Vimeo, or your Shopify files. The section comes with a Subheading, Heading, Description, Countdown timer, and Buttons block. Each section holds 1 Countdown timer.
![Video with text section on a product page](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/vwt-1_12bqqt6.jpg)

**What you can do**
- Add the section and your video
- Choose how the video plays
- Add your text and buttons
- Arrange the text and the video
- See what customers see
- Change the video, layout, and countdown settings
- Fix common problems

---

## Add the section and your video
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Video with text**.
3. Under **Video**, choose a **Video source**: **External** or **Shopify-hosted**.
4. For **External**, paste a YouTube or Vimeo link in **External video**. For **Shopify-hosted**, select a **Shopify-hosted video**.
5. Choose a **Video ratio**: 4:3, 16:9, 1:1, or 3:2.
6. Select a **Video thumbnail**. Customers see it before the video plays.
7. Click **Save**.

## Choose how the video plays
1. Under **Video**, select **Enable autoplay** to play the video as soon as the page loads. Clear it to show a play button on the thumbnail instead.
2. Select **Enable video loop** to restart the video when it ends.
3. Select **Enable video mute** to play the video without sound.
4. Click **Save**.

> **Note:** When **Enable autoplay** is selected, the video always plays muted, because browsers block autoplay with sound. The theme editor also warns that autoplay affects page speed.

## Add your text and buttons
1. Click the **Heading** block and enter the **Text**. To highlight part of the heading, put it between **\[** and **]**.
2. Choose a **Heading size**.
3. Click the **Subheading** and **Description** blocks and enter their text.
4. Click the **Buttons** block. Under **Button 1**, enter a **Label**, choose a **Style**, and select a **Link**.
5. Optional: set up **Button 2** the same way.
6. Optional: click the **Countdown timer** block and enter an **End date** in the format YYYY-MM-DD. If you don't need a countdown, remove the block.
7. To change the order of the text and buttons, drag the blocks in the left sidebar.
8. Click **Save**.

> **Caution:** The section comes with a Countdown timer block. If you leave its **End date** empty, the countdown ends at midnight every day. Set a real end date or remove the block.

## Arrange the text and the video
1. Click the **Video with text** section.
2. Under **Large screen**, choose a **Section ordering**: **Text first** or **Video first**.
3. Choose a **Video with**: **Regular** or **Large**.
4. Under **Mobile screen**, choose a **Section heading alignment** and a **Section ordering**.
5. Click **Save**.

## What customers see
- **Large screens:** the text and the video sit side by side, in the order you chose. With **Large**, the video takes more of the width than the text.
- **Phones and tablets:** below 1025 px, the text and the video stack, in the mobile order you chose.
- **Without autoplay:** the thumbnail shows a play button. Customers click it to load and play the video in place.
- **With autoplay:** the video starts muted when the page loads, without a play button.
- **Other videos:** when a video starts, other videos on the page pause.
![Video with text on mobile, with the video above the text](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/vwt-1_dzpkpr.jpg)

## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color schemes | Sets the colors of the section. You edit color schemes in Theme settings > Colors. |

### Video
| Setting | What it does |
| ---- | ---- |
| Video source | Chooses where the video comes from: External (YouTube or Vimeo) or Shopify-hosted. |
| External video | Sets the YouTube or Vimeo link. Used when Video source is External. |
| Shopify-hosted video | Sets a video from your Shopify files. Used when Video source is Shopify-hosted. |
| Video ratio | Sets the shape of the video: 4:3, 16:9, 1:1, or 3:2. |
| Video thumbnail | Sets the image customers see before the video plays. |
| Enable autoplay | Plays the video automatically, muted, when the page loads. It can slow down the page. |
| Enable video loop | Restarts the video when it ends. |
| Enable video mute | Plays the video without sound. |

### Large screen
| Setting | What it does |
| ---- | ---- |
| Section ordering | Shows the text first (Text first) or the video first (Video first). |
| Video with | Sets how wide the video is: Regular (half the width) or Large (more than half). |

### Mobile screen
| Setting | What it does |
| ---- | ---- |
| Section heading alignment | Aligns the text Left or Center. |
| Section ordering | Shows the text above the video (Text first) or below it (Video first). |

### Subheading, Heading, and Description block settings
| Setting | What it does |
| ---- | ---- |
| Text | Sets the text of the block. In the Heading block, put words between [ and ] to highlight them. You choose the highlight style in Theme settings > Typography. |
| Heading size | Sets the size of the heading: Headline, H1, H2, or H3. Appears only in the Heading block. |

### Buttons block settings
| Setting | What it does |
| ---- | ---- |
| Label | Sets the button text, under Button 1 and Button 2. If you leave it empty, the button is hidden. |
| Style | Shows the button as Filled, Outlined, or Text link. |
| Link | Sets the page that the button opens. |

### Countdown timer block settings
| Setting | What it does |
| ---- | ---- |
| Hide the countdown when it ends | Removes the timer after the end date. |
| End date | Sets the end date in the format YYYY-MM-DD. If you leave it empty, the countdown ends at midnight tonight. |
| End time (optional) | Sets the end time in the format HH:MM (24-hour clock). If you leave it empty, the countdown ends at 23:59. |
| End text | Shows a message when the countdown ends. If you leave it empty, no message appears. |
| Countdown background | Sets the background color of the timer. |
| Countdown number | Sets the color of the numbers. |
| End text (Custom color) | Sets the color of the end text. |

## Troubleshooting
**The video plays without sound even though mute is off.**
**Enable autoplay** always mutes the video. Clear **Enable autoplay** so customers start the video themselves, with sound.

**My uploaded video doesn't play.**
Check that **Video source** is set to **Shopify-hosted**. The section plays only the video that matches the selected source.

**A countdown shows on my section.**
The section comes with a **Countdown timer** block. Remove the block if you don't run a promotion.

**The page loads slowly.**
Autoplay loads the video with the page. Clear **Enable autoplay** and add a **Video thumbnail**, so the video loads only when customers click play.

## Related articles
- [Shine Video Banner](https://doc.ecomx.co/en/article/shine-video-banner-4gepr1/)
- [Shine Media With Text](https://doc.ecomx.co/en/article/shine-media-with-text-column-hds0dn/)
- [Shine Collage: Image With Text](https://doc.ecomx.co/en/article/shine-image-collage-with-text-1l2xj98/)
- [Shine Countdown Timer](https://doc.ecomx.co/en/article/shine-countdown-timer-1itlp4n/)

**In other themes:** [Blum Video With Text](https://doc.ecomx.co/en/article/blum-video-with-text-185javp/) · [Electro Video With Text](https://doc.ecomx.co/en/article/electro-how-to-use-electro-video-with-text-section-10nei9v/) · [Normcore Video With Text](https://doc.ecomx.co/en/article/normcore-video-with-text-g5ztwo/)