The Video section fills the screen with a video that plays muted in a loop behind your text. Merchants also call it a video banner. It can also show a play button that opens a second video with sound and controls, such as a brand film. To add one, click Add section in the editor and select Video.
The Video preset has two Text blocks, a large heading and a paragraph, and the corner label Live From Our Roastery. It comes without a video. Until you add one, the section shows a gray panel and the text in your theme's colors, on your store as well as in the editor.
The section is at least as tall as the screen below the header. The first block sits at the top and the last block at the bottom. With Alignment set to center, the blocks sit together in the middle instead. Over a photo or video, the text is always white.
Layout
Setting
What it does
Alignment
Puts the text on the left, in the center or on the right.
Padding top and Padding bottom
Space inside the section, above the first block and below the last one. The default is 0.
Margin top and Margin bottom
Space outside the section, between it and its neighbors. Margin top is 15 by default and Margin bottom is 0.
In this section, the four spacing settings are sliders from 0 to 15. Each step stands for one size, the same sizes other sections list by name:
Step
Size
Step
Size
0
None
8
20 px
1
2 px
9
24 px
2
4 px
10
30 px
3
6 px
11
40 px
4
8 px
12
60 px
5
10 px
13
80 px
6
12 px
14
100 px
7
16 px
15
120 px
These sizes apply on screens 1920 px wide and wider. On narrower screens they shrink with the screen width, down to half on screens 960 px wide and narrower, as Section layout settings explains. At 0, the text still keeps its own space of 24 px to 60 px from the top and bottom edges of the section.
Background
This is the video that plays behind the text. It plays muted, in a loop, with no controls.
Setting
What it does
Background type
Video is the default and plays a video you upload or link to. YouTube or Vimeo plays a video from one of those sites, Image shows a photo, and Color fills the section with one color. There is no None.
Background image
A photo. For a video, it is the still image shown before the video plays, and to visitors whose device is set to reduce motion.
Background video and Video file link
Show with Video. Upload a video, or enter a link to an MP4 file. The uploaded video is used when both are set.
Video URL
Shows with YouTube or Vimeo. The video's address, such as https://vimeo.com/ followed by the video's number.
Background width
Inset is the default and leaves a margin on both sides with rounded corners. Full runs the video to the edges of the screen.
Overlay opacity
Darkens the photo or video so the white text stays readable, from 0% to 100%. The default is 30%.
Dark moment, Rise on scroll and Chapter title work as in every section. Section motion settings describes them.
Background parallax moves the background photo or video a little slower than the page as customers scroll. It is on by default. It shows when Scroll effect is None and Background type is Video or Image, since a YouTube or Vimeo video does not move this way.
Content
Setting
What it does
Corner label
A short line of small text in the top right corner, such as Live from the workshop. On screens narrower than 768 px, it sits above the first block.
Label position
Right puts the label in the top right corner, Left in the top left. Shows when Corner label has text.
Live dot
Puts a small dot in the Accent gradient from Color settings before the label. Shows when Corner label has text.
Limit height
Keeps the section no taller than a 16:9 frame of the screen's width, so a tall window does not stretch the video. The section stays at least 512 px tall, unless the screen is shorter than that.
Scroll effect
An effect that plays as customers scroll. The choices are in the next table.
Each scroll effect holds the section in place on the screen while it plays, then lets the page scroll on. Each one reveals the background, so pick a video or photo first. In browsers that cannot run it, and for visitors whose device is set to reduce motion, the section shows as usual.
Choice
What customers see
None
The default. No effect.
Open from between two words
Two words in large letters with a small window between them, one on each side on screens 1,000 px and wider, and one above and one below it on narrower screens. The video grows from the window until it fills the section, the words move apart, and the text appears last. Set the words in Word before the window and Word after the window.
Open from an arch
The section starts in the page's background color, with the video in a narrow arch-shaped window in the middle: about a quarter of the screen's width on screens 1,000 px and wider, and more than half on narrower screens. The heading sits in the middle of the screen in the page's text color, and a Scroll text heading plays its letters there. Then the arch opens until the video fills the screen, and the heading moves up to its place with the other blocks following under it. It uses the first Text or Scroll text block as the heading, shown a little larger than its Typography size.
Fly into a word
The section starts in the page's background color, with one large word cut out of it and the video showing through the letters. As customers scroll, the view zooms into the word until the video fills the screen, and the text comes in word by word. Set the word in Word to fly into.
Play button
The play button opens a second video, separate from the background, with sound and controls. Fill in Video, Video file link or Video URL to show the button. If more than one is set, an uploaded video comes first, then the file link, then the YouTube or Vimeo address.
When a customer clicks the button, or anywhere on the section outside the text, the background and the text fade out and the player takes their place. The close button or the Escape key brings the section back. An uploaded video or a linked file also brings it back when it ends.
Setting
What it does
Button behavior
Centered keeps the button in the middle of the section, leaning slightly toward the pointer. Follows the cursor hides the button until the pointer is over the section, then shows it in place of the pointer. On touch screens, the button is always centered.
Play button style
Frosted disc is a round, see-through button with a play icon. Text ring puts your own words in a circle around a disc in the Accent gradient.
Ring text
The words around the disc, such as Play the film. Shows with Text ring.
Blocks
The section takes any theme block and app blocks. In the preset, the heading and the paragraph are each a Text block. A Button block adds a link.
The Video section fills the screen with a video that plays muted in a loop behind your text. Merchants also call it a video banner. It can also show a play button that opens a second video with sound and controls, such as a brand film. To add one, click Add section in the editor and select Video.
The Video preset has two Text blocks, a large heading and a paragraph, and the corner label Live From Our Roastery. It comes without a video. Until you add one, the section shows a gray panel and the text in your theme's colors, on your store as well as in the editor.
The section is at least as tall as the screen below the header. The first block sits at the top and the last block at the bottom. With Alignment set to center, the blocks sit together in the middle instead. Over a photo or video, the text is always white.
Layout
Setting
What it does
Alignment
Puts the text on the left, in the center or on the right.
Padding top and Padding bottom
Space inside the section, above the first block and below the last one. The default is 0.
Margin top and Margin bottom
Space outside the section, between it and its neighbors. Margin top is 15 by default and Margin bottom is 0.
In this section, the four spacing settings are sliders from 0 to 15. Each step stands for one size, the same sizes other sections list by name:
Step
Size
Step
Size
0
None
8
20 px
1
2 px
9
24 px
2
4 px
10
30 px
3
6 px
11
40 px
4
8 px
12
60 px
5
10 px
13
80 px
6
12 px
14
100 px
7
16 px
15
120 px
These sizes apply on screens 1920 px wide and wider. On narrower screens they shrink with the screen width, down to half on screens 960 px wide and narrower, as Section layout settings explains. At 0, the text still keeps its own space of 24 px to 60 px from the top and bottom edges of the section.
Background
This is the video that plays behind the text. It plays muted, in a loop, with no controls.
Setting
What it does
Background type
Video is the default and plays a video you upload or link to. YouTube or Vimeo plays a video from one of those sites, Image shows a photo, and Color fills the section with one color. There is no None.
Background image
A photo. For a video, it is the still image shown before the video plays, and to visitors whose device is set to reduce motion.
Background video and Video file link
Show with Video. Upload a video, or enter a link to an MP4 file. The uploaded video is used when both are set.
Video URL
Shows with YouTube or Vimeo. The video's address, such as
https://vimeo.com/followed by the video's number.Background width
Inset is the default and leaves a margin on both sides with rounded corners. Full runs the video to the edges of the screen.
Overlay opacity
Darkens the photo or video so the white text stays readable, from 0% to 100%. The default is 30%.
Section background settings covers these settings in more detail. If the video does not play, see My background video doesn't play.
Motion
Dark moment, Rise on scroll and Chapter title work as in every section. Section motion settings describes them.
Background parallax moves the background photo or video a little slower than the page as customers scroll. It is on by default. It shows when Scroll effect is None and Background type is Video or Image, since a YouTube or Vimeo video does not move this way.
Content
Setting
What it does
Corner label
A short line of small text in the top right corner, such as Live from the workshop. On screens narrower than 768 px, it sits above the first block.
Label position
Right puts the label in the top right corner, Left in the top left. Shows when Corner label has text.
Live dot
Puts a small dot in the Accent gradient from Color settings before the label. Shows when Corner label has text.
Limit height
Keeps the section no taller than a 16:9 frame of the screen's width, so a tall window does not stretch the video. The section stays at least 512 px tall, unless the screen is shorter than that.
Scroll effect
An effect that plays as customers scroll. The choices are in the next table.
Each scroll effect holds the section in place on the screen while it plays, then lets the page scroll on. Each one reveals the background, so pick a video or photo first. In browsers that cannot run it, and for visitors whose device is set to reduce motion, the section shows as usual.
Choice
What customers see
None
The default. No effect.
Open from between two words
Two words in large letters with a small window between them, one on each side on screens 1,000 px and wider, and one above and one below it on narrower screens. The video grows from the window until it fills the section, the words move apart, and the text appears last. Set the words in Word before the window and Word after the window.
Open from an arch
The section starts in the page's background color, with the video in a narrow arch-shaped window in the middle: about a quarter of the screen's width on screens 1,000 px and wider, and more than half on narrower screens. The heading sits in the middle of the screen in the page's text color, and a Scroll text heading plays its letters there. Then the arch opens until the video fills the screen, and the heading moves up to its place with the other blocks following under it. It uses the first Text or Scroll text block as the heading, shown a little larger than its Typography size.
Fly into a word
The section starts in the page's background color, with one large word cut out of it and the video showing through the letters. As customers scroll, the view zooms into the word until the video fills the screen, and the text comes in word by word. Set the word in Word to fly into.
Play button
The play button opens a second video, separate from the background, with sound and controls. Fill in Video, Video file link or Video URL to show the button. If more than one is set, an uploaded video comes first, then the file link, then the YouTube or Vimeo address.
When a customer clicks the button, or anywhere on the section outside the text, the background and the text fade out and the player takes their place. The close button or the Escape key brings the section back. An uploaded video or a linked file also brings it back when it ends.
Setting
What it does
Button behavior
Centered keeps the button in the middle of the section, leaning slightly toward the pointer. Follows the cursor hides the button until the pointer is over the section, then shows it in place of the pointer. On touch screens, the button is always centered.
Play button style
Frosted disc is a round, see-through button with a play icon. Text ring puts your own words in a circle around a disc in the Accent gradient.
Ring text
The words around the disc, such as Play the film. Shows with Text ring.
Blocks
The section takes any theme block and app blocks. In the preset, the heading and the paragraph are each a Text block. A Button block adds a link.