Split, overlay, and collage layouts from a single section. Media is a section setting; text is built from Eyebrow, Heading, Text, and Button blocks.
Merchant-addable
Yes
Settings
34
Block types
4
File
sections/image-with-text-split.liquid
Used by default on: Home
Screenshots pending
Captures for Images with text content 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
The general-purpose image-and-copy pairing. Reach for this before building anything custom.
Setting it up
Add the section and pick a Layout — split, overlay, or collage.
Set the image under Media.
Add text blocks under Content in reading order.
If using overlay, configure the Overlay group so text keeps contrast over the image.
Where the content comes from
Section owns media; blocks own copy.
Notes and cautions
The three layouts are genuinely different structures, not three spacing presets. Try all three before settling.
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.
Layout
Layout styleDropdown
Split places media beside text. Overlay floats text over full-width media. Collage overlaps two media.
ID
layout_style
Default
Split
Splitsplit
Overlayoverlay
Collagecollage
Media positionDropdown
ID
media_position
Default
Left
Shown when
layout_style is not 'overlay'
Leftleft
Rightright
Desktop media widthSlider
Share of the row taken by the media on desktop.
ID
desktop_media_width
Default
50
Range
30% to 70%, in steps of 5%
Shown when
layout_style is 'split'
Media aspect ratioDropdown
ID
media_ratio
Default
Portrait
Shown when
layout_style is not 'overlay'
Portraitportrait
Squaresquare
Landscapelandscape
Widewide
Use custom corner radiusCheckbox
ID
use_custom_media_radius
Default
Off
Media corner radiusSlider
ID
media_radius
Default
8
Range
0px to 40px, in steps of 2px
Shown when
use_custom_media_radius
Content
Content alignmentDropdown
ID
content_alignment
Default
Left
Leftleft
Centercenter
Rightright
Vertical alignmentDropdown
ID
content_vertical_alignment
Default
Center
Shown when
layout_style is not 'overlay'
Toptop
Centercenter
Bottombottom
Show media first on mobileCheckbox
ID
mobile_media_first
Default
On
Shown when
layout_style is not 'overlay'
Overlay
Text positionDropdown
ID
overlay_position
Default
Middle left
Shown when
layout_style is 'overlay'
Top lefttop-left
Top centertop-center
Top righttop-right
Middle leftmiddle-left
Middle centermiddle-center
Middle rightmiddle-right
Bottom leftbottom-left
Bottom centerbottom-center
Bottom rightbottom-right
Text backgroundDropdown
ID
content_surface
Default
Card
Shown when
layout_style is 'overlay'
Cardcard
Glassglass
Noneplain
Media darkeningSlider
Darkens the media so text stays readable.
ID
overlay_opacity
Default
30
Range
0% to 80%, in steps of 5%
Shown when
layout_style is 'overlay'
Section heightSlider
ID
min_height
Default
560
Range
400px to 800px, in steps of 20px
Shown when
layout_style is 'overlay'
Media
Media typeDropdown
ID
primary_media_type
Default
Image
Imageimage
Videovideo
ImageImage
ID
primary_image
VideoVideo
ID
primary_video
Show a second mediaCheckbox
Pair two images or an image and a video side by side.
ID
enable_second_media
Default
Off
Shown when
layout_style is not 'overlay'
Second media typeDropdown
ID
second_media_type
Default
Image
Shown when
layout_style is not 'overlay' and enable_second_media
Imageimage
Videovideo
Second imageImage
ID
second_image
Shown when
layout_style is not 'overlay' and enable_second_media
Second videoVideo
ID
second_video
Shown when
layout_style is not 'overlay' and enable_second_media
Second media arrangementDropdown
Columns places the two media side by side. Rows stacks them.
ID
media_arrangement
Default
Columns
Shown when
layout_style is 'split' and enable_second_media
Columnscolumns
Rowsrows
Autoplay videoCheckbox
Videos are always muted and looped. Motion respects reduced-motion preferences.
ID
video_autoplay
Default
On
Style
Color schemeColor scheme
ID
color_scheme
Default
scheme-1
Show entrance animationCheckbox
Uses the store's Animations and Motion theme settings. Turn off reveal-on-scroll globally to disable everywhere.
ID
enable_entrance_animation
Default
On
Button hover effectDropdown
ID
button_hover_effect
Default
Lift
Nonenone
Liftlift
Underlineunderline
Top paddingSlider
ID
padding_top
Default
60
Range
0px to 120px, in steps of 4px
Bottom paddingSlider
ID
padding_bottom
Default
60
Range
0px to 120px, in steps of 4px
Blocks
Blocks are added, reordered, duplicated, and removed inside the section. Each type has its
own settings.
Eyebrow eyebrowmax 1
TextText
ID
eyebrow
Default
New arrivals
Heading headingmax 1
HeadingText
ID
heading
Default
Crafted for everyday living
Heading sizeDropdown
ID
heading_size
Default
Large
Smallsmall
Mediummedium
Largelarge
Extra largexlarge
Text textmax 2
TextRich text
ID
text
Default
<p>Describe a collection, tell your brand story, or highlight the details that set your products apart.</p>