The Video with text section displays a video beside a content area, making it easy to combine visual storytelling with a heading, description, button, or other content. You can choose whether the video appears before or after the text on desktop, and use separate video settings for mobile.
Demo usage
In the Concept 6.1.0 source, this section appears in the Theme Features demo page (templates/page.theme-features.json). It is used for Mobile shopping made easy, Hero video, Visual timeline, and Grid images scrolling banner.
Steps:
Add the Video with text section
- From your Shopify admin, go to Online Store > Themes.
- Click Customize on your Concept theme.
- Open the page template where you want to display the section.
- Click Add section and select Video with text.
- Drag the section into your preferred position, then click Save.
Set up the desktop video
- Open the Video with text section.
- Under Shopify-hosted video, select a video in Video.
- Alternatively, paste a YouTube or Vimeo link into URL under Or embed video from URL.
- Optionally choose a Cover image and enter Video alt text.
- Enable Enable video autoplay to start playback automatically.
- Enable Enable video looping to repeat the video.
- Click Save.
Configure the desktop layout
- Choose Desktop height to set the video height, including Adapt to image, fixed heights, or Full screen.
- Use Desktop video width to select Small, Medium, or Large.
- Set Desktop video placement to Video first or Video second.
- Choose Desktop content position: Top, Middle, or Bottom.
- Adjust Desktop content alignment for the text area.
- Click Save.
The video and text are displayed side by side on desktop, rather than having text overlaid on the video.
Configure the mobile video and layout
- Under Mobile layout, select Mobile video or provide a YouTube/Vimeo URL in Or embed video from URL.
- Optionally set Mobile cover image.
- Adjust Mobile height and Mobile content alignment.
- Click Save.
If no separate mobile video is provided, the desktop video is used. On mobile, the video and text are arranged vertically.
Add and arrange content blocks
- Under Video with text, click Add block.
- Choose from the available blocks:
- Heading — add a title and customize its size and highlighted text.
- Text — add descriptive content and adjust the typography.
- Button — add a call-to-action with a label, link, style, and size.
- Link — add a simple text link.
- Icon — display a built-in icon or custom icon image.
- Image — insert a supporting image or logo in the text area.
- Custom Liquid — add custom Liquid content.
- Empty space — adjust the spacing between content blocks on desktop and mobile.
- Drag the blocks to change their order.
- Click Save.
Compatible App blocks can also be added.
Customize highlighted text
- Open a Heading or Text block.
- Enter the content and choose a Highlighted text style.
- If you choose Scribble, select the Highlighted scribble style.
- In a Heading block, you can also enable Highlighted reveal.
- Click Save.
Adjust colors and section appearance
- Under Colors, set Text, Background, and Background gradient.
- Use Secondary background or Secondary background gradient for an additional background treatment.
- Adjust Highlight, Highlight gradient, and button colors as needed.
- Under Section, set Top padding and Bottom padding.
- Optionally enable Show section divider, Make section full width, or Make section rounded.
- Enable Enable parallax effect if you want motion on the video area, then select Parallax direction: Vertical, Horizontal, or Zoom.
- Click Save.
Video with Text vs. Video with Text Overlay
| Section | Layout |
|---|---|
| Video with text | Displays video and text in separate areas, side by side on desktop. |
| Video with text overlay | Places headings, text, and buttons directly on top of a video banner. |
Troubleshooting
- Video does not appear: Check the selected Shopify video or YouTube/Vimeo URL and ensure the section is visible.
- Video does not autoplay: Enable Enable video autoplay. Some browsers restrict automatic playback.
- Mobile video is not showing: Check Mobile video or its URL; otherwise the desktop video is used.
- Video or text looks too narrow: Adjust Desktop video width and preview the layout on different screen sizes.
- Video height looks incorrect: Check Desktop height and Mobile height separately.
- Highlighted text is not visible: Check the block's Highlighted text setting and the section's highlight colors.
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.
بانٹیں:
How to Set Up the Video Hero Section in Concept
How to Set Up the Scrolling Banner and Text Section in Concept