Electro How to use Electro Video banner
Theme: Electro · Section type: All-template section
A Video banner section plays a looping, muted video as the background of a large banner, with your text, a countdown timer, and buttons on top. Use it to open your homepage or a landing page with motion instead of a still image.
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 separate video for mobile
- Add text, a countdown, and buttons
- Position the content and set the height
- 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 banner. The section comes with a Subheading, Heading, Description, Countdown timer, and Buttons block.
- Under Main video, paste a YouTube or Vimeo link into External video, or select a Shopify-hosted 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 video plays without sound and without controls, so choose a clip that works silently and has no important text in it.
Add a separate video for mobile
- Click the Video banner section.
- Under Mobile video (optional), paste an External video link or select a Shopify-hosted video.
- Click Save.
If you don't add a mobile video, phones show the main video.
Tip: A portrait (vertical) video fills a phone screen better than a wide one.
Add text, a countdown, and buttons
- In the left sidebar, under Video banner, 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 banner 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.
Position the content and set the height
- Click the Video banner section.
- Under Layout, choose the Section height on large screen and the Content position on large screen.
- Switch to the mobile preview. Choose the Section height on mobile and the Content position on mobile.
- Under General, drag Overlay opacity until the text is easy to read over the video.
- Click Save.
Tip: With a top or bottom content position, the overlay fades toward the text, so the rest of the video stays bright.
What customers see
- Video: the video starts playing on its own, muted and on a loop, behind the content. There are no video controls.
- Content: the subheading, heading, description, countdown, and buttons appear in the position you chose, over a dark overlay.
- Phones: the mobile video plays if you added one. Otherwise the main video plays. Content uses the mobile height and position.
- Countdown: the timer shows days, hours, minutes, and seconds. When it ends, it disappears or shows your end text, depending on your settings.
- Long content: if your text doesn't fit, the section grows taller.
Settings reference
General
Setting | What it does |
|---|---|
Color scheme | Sets the text and button colors. |
Overlay opacity | Darkens the video so text is easier to read, from 0 % (no overlay) to 90 %. |
Custom mask overlay | Sets the color of the overlay. |
Custom text overlay | Sets the text color over the video. Overrides the color scheme text color. |
Layout
Setting | What it does |
|---|---|
Section height on large screen | Sets the banner height to 50% screen height, 70% screen height, or Fill screen height. |
Content position on large screen | Places the content Top left, Top center, Middle left, Middle center, Bottom left, or Bottom center. |
Section height on mobile | Sets the banner height on phones to 50% screen height, 70% screen height, or Fill screen height. |
Content position on mobile | Places the content on phones Top left, Top center, Middle left, Middle center, Bottom left, or Bottom center. |
Main video and Mobile video (optional)
Setting | What it does |
|---|---|
External video | A YouTube or Vimeo link. |
Shopify-hosted video | A video uploaded to Shopify. Overrides the external video. |
Subheading block settings
Setting | What it does |
|---|---|
Text | A short tagline. |
Heading block settings
Setting | What it does |
|---|---|
Text | The banner heading. |
Text size | Sets the heading size: Headline, H1, H2, or H3. |
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 change after I paste a new YouTube link.
A Shopify-hosted video overrides the external video. Remove the Shopify-hosted video under Main video.
Phones show a different video than computers.
A video is set under Mobile video (optional). Change or remove it there.
The text is hard to read.
Increase Overlay opacity, or set a Custom text overlay color that contrasts with the video.
A button looks faded and can't be clicked.
The button has no link. Add a Link in the Buttons block.
I can't add a second countdown or button group.
Each section holds 1 Countdown timer block and 1 Buttons block. The Buttons block has room for 2 buttons.
Related articles
- Electro Image banner
- Electro Video with text
- Electro Slideshow
- Electro Countdown timer
- Electro Theme settings
Updated on: 30/10/2026
Thank you!