The Scroll video section creates an immersive story by linking video progress to the visitor's scrolling. Add Chapter blocks to display headings, images, descriptions, and buttons at specific moments in the video.
STEPS:
1. Add the Scroll Video Section
- In Shopify admin, go to Online Store > Themes and click Customize next to your Be Yours theme.
- Open the page template where you want the video story.
- Click Add section and select Scroll video from the Storytelling category.
- Add a video, configure the scroll settings, and edit the Chapter blocks.
- Click Save.
2. Add Your Video
Choose either a Shopify-hosted video or a direct MP4 file URL.
| Setting | Description |
|---|---|
| Video | Select a video uploaded to Shopify Files. |
| Video on phones | Optional smaller version for mobile. Use the same duration as the desktop video. |
| Direct video file URL | Optional MP4 URL. When provided, it takes priority over Video. |
| Direct video file URL on phones | Optional mobile MP4 URL, available when a direct desktop URL is entered. Use the same duration. |
| Length of the direct file (seconds) | Enter the direct video's duration, or leave empty to let the browser read it. |
| Image focal point | Choose Top, Center, or Bottom to control how the video is framed. |
| Poster | Choose the image shown before the video is ready; otherwise, the available video preview is used. |
For smoother scrolling, use a short, muted video (ideally under 15 MB) encoded with frequent keyframes, approximately every 0.5 seconds or less. A properly prepared direct MP4 file can provide smoother scrubbing than a re-encoded Shopify Files upload.
3. Configure Scroll Behaviour
| Setting | Description |
|---|---|
| Scroll distance per second of video | Sets how far visitors scroll to move through each second of video (20–150 vh). Higher values make the experience slower. |
| Scroll distance per second on phones | Sets a separate mobile distance (0–150 vh). 0 uses the desktop value. |
| Easing | Controls how closely the video follows scrolling (0.1–1). 1 follows most directly; lower values glide more gradually. |
| Scroll cue text | Adds an introductory prompt, such as “Scroll to explore”. Leave empty to hide it. |
| Show chapter dots | Shows chapter progress indicators when more than one Chapter block is present. |
The video progresses as visitors scroll down and moves backwards when they scroll up. Video playback is muted.
4. Add and Configure Chapter Blocks
Use Add block > Chapter to create additional storytelling moments. The section supports up to 12 Chapter blocks in total. Drag blocks to reorder them.
| Setting | Description |
|---|---|
| Moment (seconds) | The point in the video when the chapter appears, such as 3.5 seconds. |
| Show before the moment | How early the chapter appears (0.2–3 seconds). |
| Keep after the moment | How long the chapter remains after its moment (0.2–3 seconds). |
| Horizontal position / Vertical position | Position the chapter content on the video (0–100%). |
| Desktop content alignment | Align the content Left, Center, or Right. |
| On phones | Choose Same point, Gathered at the bottom, or Centred. |
| Card width | Set the width of the chapter content (30–80 rem). |
| Subheading / Heading / Heading size | Add and style the chapter title. |
| Description | Add supporting text. |
| Button label / Button link | Add a clickable call-to-action. Both settings are needed for a working button. |
| Image | Add an optional image to the chapter. |
| Image placement | Choose Above the words or Beside the words. |
| Image style | Choose Plain or Floating print. |
| Image width | Control the image's width (20–100%). |
To highlight words in a Chapter heading:
- Enable Enable highlight.
- Choose Marker, Circle, Underline, or Solid color under Highlight style.
- Please use italic formatting by selecting the text you want to highlight and then clicking the italic (I) button in the editor.
5. Configure Colors and Overlay
- Enable Use color scheme to select a predefined Color scheme.
- Or leave Use color scheme disabled and configure Background, Text, Solid button background, Solid button label, Highlight, and Overlay colors individually.
- Adjust Overlay opacity (0–60%) to darken the video while a chapter is showing, improving text readability.
- Click Save and preview the page on desktop and mobile.
6. Notes and Troubleshooting
- Scroll video is a separate section, not a video block inside Flexible content.
- Only Chapter blocks can be added to this section (up to 12).
- If no video appears, select Video or enter a valid direct MP4 file URL.
- If the video jumps or stutters, try a shorter MP4 with frequent keyframes and test the direct file URL option.
- If chapters appear at the wrong time, check each block's Moment (seconds) and make sure it falls within the video's duration.
- If chapters overlap, adjust their Show before the moment and Keep after the moment settings.
- If a chapter button cannot be clicked, check that Button link is set.
- Use On phones and Scroll distance per second on phones to improve the mobile presentation.
- The section supports reduced-motion preferences; visitors may experience different motion behaviour depending on their device settings.
If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
بانٹیں:
How to Set Up the Mosaic Banner Section in Be Yours
How to Set Up the Statement Section in Be Yours