Electro How to Use Electro Video With Text Section
Theme: Electro · Section type: All-template section
A Video with text section shows a video next to your own text, countdown timer, and buttons. Use it to tell your brand story, demo a product, or promote a sale with a video customers can play on the page.
Note: You can add this section to any template, but not to the header or footer. Each section holds 1 Countdown timer block and 1 Buttons block.
What you can do
- Add the section and your video
- Add a thumbnail and choose how the video plays
- Add text, a countdown, and buttons
- Change the layout
- See what customers see
- Look up every setting
- Fix common problems
Add the section and your video
- In the theme editor, open the template where you want the section.
- In the left sidebar, click Add section > Video with text. The section comes with Subheading, Heading, Description, Countdown timer, and Buttons blocks.
- Under Video, paste a YouTube or Vimeo link into External video, or select a Shopify-hosted video.
- Enter a Video alt text that describes the video.
- Click Save.
Note: A Shopify-hosted video overrides the external video. To use a YouTube or Vimeo link, remove the Shopify-hosted video.
Tip: The alt text helps customers who use screen readers. Describe what happens in the video in one short sentence.
Add a thumbnail and choose how the video plays
- Click the Video with text section.
- Under Layout, select a Thumbnail. This image shows until a customer plays the video.
- Optional: select a Mobile thumbnail (Optional). If you don't add one, phones show the main thumbnail.
- Turn Enable video loop on to replay the video when it ends.
- Turn Enable video mute on to start the video without sound.
- Click Save.
Tip: Use a thumbnail with the same shape as your video, so the frame doesn't jump when the video starts.
Add text, a countdown, and buttons
- In the left sidebar, under Video with text, click a block to edit it, or click Add block and choose Subheading, Heading, Description, Countdown timer, or Buttons.
- Drag the blocks to change their order. The text column shows them from top to bottom in the same order.
- In the Countdown timer block, enter an End date and an optional End time.
- In the Buttons block, enter a Label and a Link for each button you want. Leave a Label empty to hide that button.
- Click Save.
For all countdown options, see Electro Countdown timer.
Change the layout
- Click the Video with text section.
- Under General, choose a Color scheme and the Content ordering on large screen: Text first or Video first.
- Under Layout, choose the Height on large screen.
- Click Save.
What customers see
- Large screens: the video and the text sit side by side, in the order you chose. The video shows the thumbnail with a play button.
- Playing the video: customers click the play button. The video plays in place, with video controls, using your loop and mute settings. Starting a video pauses other videos on the page.
- Phones and tablets: the text shows first and the video below it. The mobile thumbnail shows if you added one.
- Countdown: the timer shows days, hours, minutes, and seconds. When it ends, it disappears or shows your end text, depending on your settings.
- Long text: on large screens, the section grows taller if the text doesn't fit.
Settings reference
General
Setting | What it does |
|---|---|
Color scheme | Sets the background, text, and button colors. |
Content ordering on large screen | Shows the text first (left) or the video first (left). Phones always show the text first. |
Video
Setting | What it does |
|---|---|
External video | A YouTube or Vimeo link. |
Shopify-hosted video | A video uploaded to Shopify. Overrides the external video. |
Video alt text | Describes the video for screen reader users. |
Layout
Setting | What it does |
|---|---|
Height on large screen | Sets the section height to 70% screen height or Fill screen height. The section grows if the text is long. |
Thumbnail | The image customers see before they play the video. |
Mobile thumbnail (Optional) | A separate thumbnail for phones. |
Enable video loop | Replays the video when it ends. |
Enable video mute | Starts the video without sound. |
Subheading block settings
Setting | What it does |
|---|---|
Text | A short tagline. |
Heading block settings
Setting | What it does |
|---|---|
Text | The heading. |
Text size | Sets the heading size: Headline, or H1 to H6. |
Description block settings
Setting | What it does |
|---|---|
Text | Body text. Supports bold, italic, and links. |
Countdown timer block settings
Setting | What it does |
|---|---|
Hide the countdown when it ends | Removes the timer after the end date and time. |
End date | The day the countdown ends, in the format YYYY-MM-DD. If it's empty, the countdown ends at midnight tonight. |
End time (optional) | The time the countdown ends, in the format HH:MM (24-hour clock). |
End text | A message that shows when the countdown ends. Leave it empty to show nothing. |
Countdown background | Sets the background color of the timer. |
Countdown number | Sets the color of the numbers. |
End text (under Custom color) | Sets the color of the end message. |
Buttons block settings
Setting | What it does |
|---|---|
Label | The button text, for Button 1 and Button 2. Leave it empty to hide that button. |
Style | Sets each button to Primary, Secondary, or Tertiary. |
Link | The page the button opens. |
Troubleshooting
The video doesn't play on its own.
This section waits for a click. Customers start the video with the play button. For a video that plays automatically in the background, use Video banner.
The video plays without sound.
Enable video mute is on. Turn it off under Layout. Some browsers still block sound until the customer interacts with the video.
The video on the page is not the YouTube link I added.
A Shopify-hosted video overrides the external video. Remove the Shopify-hosted video under Video.
A button looks faded and can't be clicked.
The button has no link. Add a Link in the Buttons block.
The video is on the wrong side.
Change Content ordering on large screen under General. On phones the text always shows first.
Related articles
- Electro Video banner
- Electro Image with text
- Electro Countdown timer
- Electro Typography
- Electro Theme settings
Updated on: 30/10/2026
Thank you!