Shine Video Banner
Theme: Shine · Section type: All-template section
A Video banner section plays a looping background video across the full width of the page, with a heading, text, buttons, and an optional countdown on top. Use it to set the mood of your store or to show a product in action.
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, Buttons, and Countdown timer block. Each section holds 1 Countdown timer.
What you can do
- Add the section and your video
- Add your text and buttons
- Add a countdown timer
- Make the text easy to read
- See what customers see
- Change the height and content position
- 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.
- Under General, choose a Video source: External or Shopify-hosted.
- For External, paste a YouTube or Vimeo link in External video.
- For Shopify-hosted, select or upload a video in Video hosted.
- Click Save.
Tip: Use a short clip without important sound or captions. The video plays in the background without controls, so customers can't turn the sound on or pause it.
Add your text and buttons
- Click the Heading block and enter the Text. To highlight part of the heading, put it between [ and ].
- Choose a Heading size.
- Click the Subheading and Description blocks and enter their text.
- Click the Buttons block. Under Button 1, enter the button text, choose a Style, and select a Link.
- Optional: set up Button 2 the same way.
- To change the order of the text and buttons, drag the blocks in the left sidebar.
- Click Save.
To make the whole banner clickable instead, remove the Buttons block. Then click the section and, under Link, select a Link.
Note: The section Link is inactive while the section has a Buttons block, even if the button text is empty.
Add a countdown timer
- Click the Countdown timer block. If the section doesn't have one, click Add block > Countdown timer.
- Enter an End date in the format YYYY-MM-DD. If you leave it empty, the countdown ends at midnight tonight.
- Optional: enter an End time in the format HH:MM (24-hour clock).
- Select Hide the countdown when it ends to remove it after the end date, or clear it to keep it on the banner.
- Optional: enter an End text to show when the countdown ends.
- Click Save.
Caution: A countdown that has ended can mislead customers. Update the end date or remove the block after the promotion ends.
Make the text easy to read
- Click the Video banner section.
- Under Custom color, select a Mask overlay color. If you don't select one, the overlay uses the background color of the section's color scheme.
- Drag Overlay opacity to darken or lighten the video, from 0 % to 90 %.
- Optional: select a Text overlay color to change the color of the banner text.
- Click Save.
What customers see
- Video: the video loads when the banner scrolls into view, then plays on a loop and fills the banner. YouTube and Vimeo videos play muted. There are no play, pause, or sound controls.
- Phones and tablets: below 1025 px, the Mobile screen height and content position apply. The video is cropped to fill the banner.
- Buttons and link: customers click a button to open its link. If the section has no Buttons block, clicking anywhere on the banner opens the section's Link.
- Countdown: the timer counts down the days, hours, minutes, and seconds to the end date. When it ends, it disappears or shows 00, depending on Hide the countdown when it ends, and the end text appears if you added one.
Settings reference
General
Setting | What it does |
|---|---|
Color schemes | Sets the colors of the section. You edit color schemes in Theme settings > Colors. |
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. |
Video hosted | Sets a video from your Shopify files. Used when Video source is Shopify-hosted. |
Large screen and Mobile screen
Setting | What it does |
|---|---|
Section height | Sets the height of the banner: 50% screen, 70% screen, or Fill screen. The section grows if the content needs more space. When the banner is the first section, the height doesn't include the header. |
Content position | Places the text and buttons at Top left, Top center, Middle left, Middle center, Bottom left, or Bottom center. |
Link
Setting | What it does |
|---|---|
Link | Makes the whole banner clickable. It works only when the section has no Buttons block. |
Custom color
Setting | What it does |
|---|---|
Mask overlay | Sets the color of the layer over the video. See "Make the text easy to read" above. |
Overlay opacity | Sets how strong the overlay is, from 0 % to 90 %. |
Text overlay | Changes the color of the banner text. |
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 |
|---|---|
Button | 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 from the banner 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
My uploaded video doesn't show.
Check that Video source is set to Shopify-hosted. The section plays only the video that matches the selected source.
The YouTube or Vimeo video doesn't play.
Check that Video source is External and that the link opens a public video. Private videos and videos that block embedding can't play on your store.
Part of the video is cut off.
The video is cropped to fill the banner. Keep the important part of the video in the center, especially for mobile.
Clicking the banner doesn't open my link.
The section Link works only when the section has no Buttons block. Remove the Buttons block, or set the button links instead.
Related articles
In other themes: Blum Video Banner · Electro Video Banner · Normcore Video Banner
Updated on: 22/10/2026
Thank you!