The Video hero section creates a full-screen video background with headings that appear as customers scroll. The video stays in a sticky area while the Slide blocks present a sequence of messages over it.
Demo usage
The Video hero section is used on product pages in the Concept demo, including:
- Whisper Flow — earphones product layout.
- Sound Waves — speakers product layout.
The section is also included in the default product template of the Concept 6.1.0 source.
Steps:
Add the Video hero section
- From your Shopify admin, go to Online Store > Themes.
- Click Customize on your Concept theme.
- Open the page or product template where you want to display the video.
- Click Add section and select Video hero.
- Move the section to the desired position and click Save.
The section's default preset includes three Slide blocks, which you can edit, reorder, remove, or add to.
Set up the desktop video
- Open the Video hero section settings.
- Under Shopify-hosted video, select a video in the Video setting.
- Alternatively, under Or embed video from URL, enter a YouTube or Vimeo URL.
- If using a video URL, select a Cover image if needed.
- Fill in Video alt text to describe the video for accessibility.
- Enable Enable video autoplay to play the video automatically. Autoplay videos are muted.
- Enable Enable video looping if you want the video to repeat.
- Click Save.
Configure the mobile video
- In the Video hero settings, open Mobile layout.
- Select a Mobile video, or enter a Mobile video URL from YouTube or Vimeo.
- If using an external mobile video URL, optionally choose a Mobile cover image.
- Click Save.
If you do not provide separate mobile media, the desktop video is used instead.
Add scrolling headings
- Under Video hero, open an existing Slide block or click Add block > Slide.
- Enter the Heading displayed over the video.
- Choose Heading size and Heading tag.
- Optionally select a Highlighted text style.
- If you select Scribble, choose the Highlighted scribble style.
- Enable Enable reveal effect if you want the highlighted styling to animate.
- Add or reorder other Slide blocks to create the sequence of headings.
- Click Save.
The Slide blocks are displayed as scrolling text over the sticky full-screen video. This section's Slide blocks contain headings only; they do not include product or button settings.
Adjust layout and colors
- Set Desktop content width to Small, Medium, or Large.
- Under Colors, adjust Text, Background, Background gradient, Highlight, and Highlight gradient.
- Set Overlay color and Overlay opacity to control the video darkening effect.
- Under Section, adjust Top padding, Bottom padding, Show section divider, Make section full width, and Make section rounded.
- Enable Allow transparent header if needed. This applies only when Video hero is the first section on the page.
- Click Save.
Preview the Video hero section
- Open the storefront preview and scroll through the section.
- Check that the headings appear in the intended order while the video stays in place.
- Test desktop and mobile layouts.
- Check video playback, looping, overlay opacity, and heading readability.
Video Hero vs. Video with Text Overlay
- Video hero uses a sticky, full-screen video with multiple scrolling Slide headings.
- Video with text overlay presents content over a video banner without the same sequence of scrolling Slide headings.
Troubleshooting
- Video does not autoplay: Confirm Enable video autoplay is on. Browser autoplay restrictions may affect playback.
- Incorrect video appears: Check whether a Shopify-hosted Video is selected; it takes priority over the external URL.
- Mobile video is missing: Check the Mobile video or Mobile video URL settings.
- Headings are not visible: Make sure at least one Slide block has a nonempty Heading and check the Text color.
- Video looks too dark or bright: Adjust Overlay and Overlay opacity.
- Transparent header does not apply: Check that Video hero is the first section on the page.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please contact our support team via our Ticket System for assistance within 8 hours.
Share:
How to Set Up the Reveal Video with Text Overlay Section in Concept
How to Set Up the Video with Text Section in Concept