Hosted or external video paired with supporting copy. Blocks carry heavy per-instance typography control.
Merchant-addable
Yes
Settings
73
Block types
4
File
sections/video-with-text.liquid
Used by default on: Home
Screenshots pending
Captures for Split video and text at desktop and mobile widths are generated from a live store by
npm run shots. They appear here automatically once that has run.
When to use it
Demonstrations, founder statements, and anything where motion explains faster than text.
Setting it up
Add the section and set the video.
Add Heading, Subtext, and Call to action button blocks.
Set Button size and alignment.
Add an Image block as the poster frame so nothing is fetched before interaction.
Where the content comes from
Section owns the video; blocks own copy.
Notes and cautions
Video is not fetched until a visitor interacts with it. That is a large part of why pages carrying video still load fast — do not work around it.
Section settings
Every setting on the section itself, in the order it appears in the theme editor. Group headings
match the editor's own grouping.
Overlay text on videoCheckbox
ID
overlay_on_video
Default
Off
Video positionDropdown
ID
video_position
Default
Left
Leftleft
Rightright
Video source typeDropdown
ID
video_type
Default
Uploaded MP4
Uploaded MP4mp4
YouTube/Vimeoexternal
Upload MP4 videoVideo
ID
mp4_video
External video URLText
ID
external_video_url
Default
https://www.youtube.com/watch?v=HQ1uzB0somI
Video width (%)Slider
ID
video_width_percentage
Default
50
Range
30% to 80%, in steps of 5%
Color schemeColor scheme
ID
color_scheme
Default
scheme-1
Content positionDropdown
ID
content_alignment
Default
Center
Leftleft
Centercenter
Rightright
Button size and alignment
Button alignmentDropdown
ID
button_alignment
Default
Left
Leftleft
Centercenter
Rightright
Show entrance animationCheckbox
Fades the section in on scroll. Respects the theme animation setting and reduced motion.
ID
enable_entrance_animation
Default
On
Blocks
Blocks are added, reordered, duplicated, and removed inside the section. Each type has its
own settings.
Image image_blockmax 3
ImageImage
ID
image
SizeDropdown
ID
width
Default
Small
Smallsmall
Mediummedium
Image animationDropdown
ID
image_animation
Default
None
Nonenone
Fade infade-in
Slide in leftslide-in-left
Slide in rightslide-in-right
Zoom inzoom-in
Overlap image x offset (px)Number
ID
overlap_image_x
Default
100
Overlap image y offset (px)Number
ID
overlap_image_y
Default
100
Heading heading_blockmax 2
HeadingText
ID
heading
Default
Discover Our Collection
Font size (desktop)Dropdown
ID
font_size_desktop
Default
Medium
XSd_heading-xs
Smalld_heading-sm
Mediumd_heading-base
Larged_heading-lg
XLd_heading-xl
2XLd_heading-2xl
3XLd_heading-3xl
4XLd_heading-4xl
5XLd_heading-5xl
6XLd_heading-6xl
Font size (mobile)Dropdown
ID
font_size_mobile
Default
Medium
XSm_heading-xs
Smallm_heading-sm
Mediumm_heading-base
Largem_heading-lg
XLm_heading-xl
2XLm_heading-2xl
3XLm_heading-3xl
4XLm_heading-4xl
5XLm_heading-5xl
6XLm_heading-6xl
Text opacity (%)Slider
ID
text_opacity
Default
100
Range
0 to 100, in steps of 5
Text styling
Text transformDropdown
ID
text_transform
Default
Capitalize
UPPERCASEuppercase
Lowercaselowercase
Capitalizecapitalize
Line height (em)Slider
ID
line_height
Default
1.5
Range
1 to 3, in steps of 0.1
Letter spacing (px)Slider
ID
letter_spacing
Default
0
Range
-2 to 10, in steps of 1
Text spacing
Top marginSlider
ID
margin_top
Default
20
Range
0px to 100px, in steps of 4px
Bottom marginSlider
ID
margin_bottom
Default
20
Range
0px to 100px, in steps of 4px
Top spaceSlider
ID
padding_top
Default
0
Range
0px to 100px, in steps of 4px
Bottom spaceSlider
ID
padding_bottom
Default
0
Range
0px to 100px, in steps of 4px
Right spaceSlider
Effect will show clearly when background color/text border is enabled.
ID
padding_right
Default
0
Range
0px to 100px, in steps of 4px
Left spaceSlider
Effect will show clearly when background color/text border is enabled.
ID
padding_left
Default
0
Range
0px to 100px, in steps of 4px
Text shadow styling
Enable text shadowCheckbox
Text Shadow value below only applies if this is enabled.
ID
enable_text_shadow
Default
Off
Shadow x offset (px)Slider
ID
text_shadow_x
Default
-9
Range
-10 to 10, in steps of 1
Shadow y offset (px)Slider
ID
text_shadow_y
Default
-6
Range
-10 to 10, in steps of 1
Shadow blur radius (px)Slider
ID
text_shadow_blur
Default
6
Range
0 to 10, in steps of 1
Text animation
Heading animationDropdown
ID
text_animation
Default
None
Nonenone
Fade infade-in
Slide upslide-up
Slide downslide-down
Zoom inzoom-in
Text border styling
Enable text borderCheckbox
Text Border setting only applies if this is enabled.
ID
enable_text_border
Default
Off
Text border width (px)Slider
ID
text_stroke_width
Default
1
Range
0 to 5, in steps of 0.5
Border styleDropdown
ID
border_style
Default
Solid line
Solid linesolid
Double linedouble
Dotted linedotted
Dashed linedashed
Groovegroove
Ridgeridge
Insetinset
Outsetoutset
Text responsive scaling
Responsive font scalingCheckbox
ID
enable_responsive_scaling
Subtext subtext_blockmax 3
SubtextText
ID
subtext
Default
Curated for you with care and purpose.
Font size (desktop)Dropdown
ID
font_size_desktop
Default
Medium
XSd_text-xs
Smalld_text-sm
Mediumd_text-base
Larged_text-lg
XLd_text-xl
2XLd_text-2xl
3XLd_text-3xl
4XLd_text-4xl
5XLd_text-5xl
6XLd_text-6xl
Font size (mobile)Dropdown
ID
font_size_mobile
Default
Medium
XSm_text-xs
Smallm_text-sm
Mediumm_text-base
Largem_text-lg
XLm_text-xl
2XLm_text-2xl
3XLm_text-3xl
4XLm_text-4xl
5XLm_text-5xl
6XLm_text-6xl
Text opacity (%)Slider
ID
text_opacity
Default
100
Range
0 to 100, in steps of 5
Text styling
Text transformDropdown
ID
text_transform
Default
Capitalize
UPPERCASEuppercase
Lowercaselowercase
Capitalizecapitalize
Line height (em)Slider
ID
line_height
Default
1.5
Range
1 to 3, in steps of 0.1
Letter spacing (px)Slider
ID
letter_spacing
Default
0
Range
-2 to 10, in steps of 1
Text spacing
Top marginSlider
ID
margin_top
Default
20
Range
0px to 100px, in steps of 4px
Bottom marginSlider
ID
margin_bottom
Default
20
Range
0px to 100px, in steps of 4px
Top spaceSlider
ID
padding_top
Default
0
Range
0px to 100px, in steps of 4px
Bottom spaceSlider
ID
padding_bottom
Default
0
Range
0px to 100px, in steps of 4px
Right spaceSlider
Effect will show clearly when background color/text border is enabled.
ID
padding_right
Default
0
Range
0px to 100px, in steps of 4px
Left spaceSlider
Effect will show clearly when background color/text border is enabled.
ID
padding_left
Default
0
Range
0px to 100px, in steps of 4px
Text shadow styling
Enable text shadowCheckbox
Text Shadow value below only applies if this is enabled.
ID
enable_text_shadow
Default
Off
Shadow x offset (px)Slider
ID
text_shadow_x
Default
-9
Range
-10 to 10, in steps of 1
Shadow y offset (px)Slider
ID
text_shadow_y
Default
-6
Range
-10 to 10, in steps of 1
Shadow blur radius (px)Slider
ID
text_shadow_blur
Default
6
Range
0 to 10, in steps of 1
Text animation
Heading animationDropdown
ID
text_animation
Default
None
Nonenone
Fade infade-in
Slide upslide-up
Slide downslide-down
Zoom inzoom-in
Text border styling
Enable text borderCheckbox
Text Border setting only applies if this is enabled.
ID
enable_text_border
Default
Off
Text border width (px)Slider
ID
text_stroke_width
Default
1
Range
0 to 5, in steps of 0.5
Border styleDropdown
ID
border_style
Default
Solid line
Solid linesolid
Double linedouble
Dotted linedotted
Dashed linedashed
Groovegroove
Ridgeridge
Insetinset
Outsetoutset
Text responsive scaling
Responsive font scalingCheckbox
ID
enable_responsive_scaling
Call to action button cta_button_blockmax 3
Button content
Button textText
ID
cta_text
Default
Explore Now
Button linkLink
ID
cta_link
Button size (desktop)Dropdown
ID
button_size_desktop
Default
Medium
Smalld-sm-button
Mediumd-md-button
Larged-lg-button
Button size (mobile)Dropdown
ID
button_size_mobile
Default
Medium
Smallm-sm-button
Mediumm-md-button
Largem-lg-button
Button styleDropdown
ID
button_style
Default
Filled
Filledfilled
Outlineoutline
Linklink
Color and background
Enable gradient backgroundCheckbox
Gradient background will be affected only on filled button styles and override solid background color.
ID
enable_btn_gradient
Default
Off
Gradient directionDropdown
ID
gradient_direction
Default
Diagonal bottom left
Left to rightto right
Right to leftto left
Top to bottomto bottom
Bottom to topto top
Diagonal top rightto top right
Diagonal bottom leftto bottom left
Border and radius
Border width (px)Slider
ID
border_width
Default
1
Range
0 to 10, in steps of 1
Border styleDropdown
ID
border_style
Default
Solid line
Solid linesolid
Double linedouble
Dotted linedotted
Dashed linedashed
Groovegroove
Ridgeridge
Insetinset
Outsetoutset
Typography
Font weightDropdown
ID
font_weight
Default
Regular
Light300
Regular400
Medium500
Bold700
Hover effects
Hover animationDropdown
ID
hover_effect
Default
None
Nonenone
Scalescale
Translatetranslate
Underline textunderline
Icon settings
Show iconCheckbox
ID
show_icon
Default
Off
Icon positionDropdown
ID
icon_position
Default
Left of text
Left of textleft
Right of textright
SVG icon codeText
Paste valid inline SVG. You can browse icons at https://icons.getbootstrap.com/ or https://heroicons.com/