How to Set Up the Video with Text Overlay Section in Concept

How to Set Up the Video with Text Overlay Section in Concept The Video with text overlay section lets you display a full-width video banner with text, buttons, icons, images, or custom content layered on top of the video. This section is useful for homepage hero banners, campaign videos, brand stories, product highlights, collection promotions, and landing page introductions. STEPS: Add the Video with text overlay section From your Shopify admin, open Online Store > Themes. Click Customize on your Concept theme. Open the template where you want to display the video banner. Click Add section. Select Video with text overlay. Drag the section to the position where you want it to appear. Click Save. After adding the section, you can choose the video, configure the overlay content, and adjust the desktop and mobile layout. Add the desktop video Open the Video with text overlay section. Use Video to select a Shopify-hosted video. Or use Video URL to add an external video from YouTube or Vimeo. If you use Video URL, add a Cover image to control the poster image before the video loads. Add a short Description to describe the video for accessibility. Enable Autoplay video if you want the video to play automatically. Enable Loop video if you want the video to repeat continuously. Click Save. Shopify-hosted videos are recommended when you want the most consistent storefront experience. YouTube and Vimeo URLs are supported through the Video URL setting. Add a mobile video Open the Mobile settings inside the section. Use Mobile video if you want to show a different Shopify-hosted video on mobile. Or use Mobile video URL if you want to use a different YouTube or Vimeo video on mobile. Add a Mobile cover image when using a mobile video URL. Use Image height mobile to control the section height on mobile devices. Click Save. If no mobile video is selected, the theme uses the desktop video as the fallback. Configure video height and layout Use Image height to control the desktop video banner height. Choose Adapt to media if you want the section height to follow the video or cover image ratio. Use Image height mobile to control the mobile height. Use Content width to control how wide the overlay content can be. Use Content position to place the overlay content on desktop. Use Content position mobile to place the overlay content on mobile. Use Text alignment and Text alignment mobile to align the overlay text. Click Save. The height, content position, and text alignment settings help the section work across both large desktop banners and smaller mobile screens. Add overlay content blocks Open the Video with text overlay section. Click Add block. Choose the block type you want to add. Available block types include: Subheading for a small tagline above the main heading. Heading for the main banner title. Text for supporting copy. Button for a call-to-action button. Link for a simple text link. Icon for a built-in icon or custom icon image. Image for a small overlay image or logo. Custom liquid for custom code or app output. Spacing for adding vertical space between content blocks. App block for supported Shopify app blocks. Drag the blocks up or down to change the content order. Configure the heading and highlighted text Add a Heading block. Enter the heading text. Choose the Heading size. Choose the Heading tag for the HTML heading level. Use Highlighted text if you want part of the heading to use a highlight style. Choose a Highlighted scribble style if the highlighted text style is set to Scribble. Enable Reveal highlighted text if you want the highlight effect to animate. Click Save. The highlight settings can be used to create stronger visual emphasis in hero banners and campaign messages. Configure buttons and links Add a Button block if you want a main call-to-action. Enter the Button label. Select the Button link. Choose the Button style. Choose the Button size. Enable Open this link in a new window if needed. Enable Show button icon if you want the button to include an icon. Add a Link block if you prefer a simple text link instead of a button. Click Save. Use buttons for primary actions and link blocks for lighter secondary actions. Customize colors and overlay Use Text color to adjust the overlay text color. Use Background or Background gradient to style the section background. Use Highlight color or Highlight gradient for highlighted text. Use Button text color and Button background color to style buttons. Use Button background gradient if you want a gradient button background. Use Overlay color to add a color layer over the video. Use Overlay opacity to make the overlay lighter or darker. Click Save. Overlay settings are useful when the video is bright or busy and the text needs more contrast. Configure section spacing and shape Use Top padding and Bottom padding to adjust the spacing around the section. Enable Show section divider if you want a divider line around the section. Enable Make section full width if you want the video to span the full browser width. Enable Make section rounded if you want rounded corners around the section. Enable Transparent header if the section is placed at the top of the page and you want it to work with a transparent header layout. Click Save. The transparent header option is usually used when the video banner is the first section on the page. Troubleshooting The video does not appear Make sure the section has been added to the correct template. Make sure the section is not hidden in the theme editor. Make sure a Video or Video URL has been added. If using YouTube or Vimeo, make sure the link is valid and publicly accessible. Add a Cover image if the external video preview does not load as expected. Click Save and refresh the storefront preview. The video does not autoplay Make sure Autoplay video is enabled. Autoplay videos must be muted in most browsers. The theme handles this automatically when autoplay is enabled. Check the storefront outside the theme editor, because autoplay can behave differently in editor preview mode. Some mobile browsers may limit autoplay depending on device settings or battery-saving mode. The mobile video does not show Make sure Mobile video or Mobile video URL has been added. Check the mobile preview in the theme editor. If no mobile video is selected, the desktop video is used as the fallback. Add a Mobile cover image when using a mobile video URL. The overlay text is hard to read Increase Overlay opacity. Choose a darker or lighter Overlay color depending on the video. Adjust the Text color. Move the content position away from the busiest part of the video. Shorten the heading or text content for better readability. The section height does not look right Adjust Image height for desktop. Adjust Image height mobile for mobile. Use Adapt to media only when the video or cover image ratio works well for the layout. Use a fixed height if you want a more consistent hero banner layout. Need Further Assistance If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.