An editorial image and copy pairing with layered composition. Content is assembled from small blocks — eyebrow, heading, text, detail, button — in a content folio.
Merchant-addable
Yes
Settings
25
Block types
5
File
sections/image-story.liquid
Screenshots pending
Captures for Image story 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
Brand storytelling between commerce sections, where a plain text block would read as filler.
Setting it up
Add the section and choose a Layout.
Set the Image and its treatment.
Add blocks into the Content folio in the order you want them read.
Set Style.
Where the content comes from
Section owns the media, blocks own the copy.
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
Image positionDropdown
ID
image_position
Default
Left
Leftleft
Rightright
Desktop image widthSlider
ID
desktop_image_width
Default
55
Range
45% to 65%, in steps of 5%
Content overlapSlider
Moves the content folio over the image edge on desktop.
ID
content_overlap
Default
64
Range
0px to 120px, in steps of 8px
Content positionDropdown
ID
content_vertical_alignment
Default
Center
Toptop
Centercenter
Bottombottom
Text alignmentDropdown
ID
text_alignment
Default
Left
Leftleft
Centercenter
Show image first on mobileCheckbox
ID
mobile_media_first
Default
On
Overlap content on mobileCheckbox
Overlaps the content folio and image by a controlled amount. Turn off to keep them fully separated.
ID
mobile_content_overlap
Default
On
Image
ImageImage
ID
image
Desktop image ratioDropdown
ID
desktop_image_ratio
Default
Portrait
Portraitportrait
Squaresquare
Landscapelandscape
Mobile image ratioDropdown
ID
mobile_image_ratio
Default
Square
Portraitportrait
Squaresquare
Landscapelandscape
Image fitDropdown
ID
image_fit
Default
Fill
Fillcover
Fitcontain
Use custom corner radiusCheckbox
ID
use_custom_image_radius
Default
Off
Image corner radiusSlider
ID
image_corner_radius
Default
0
Range
0px to 40px, in steps of 2px
Shown when
use_custom_image_radius
Image captionText
ID
image_caption
Content folio
Show story markerCheckbox
ID
show_story_marker
Default
On
Story markerText
ID
story_marker
Default
Chapter 01
Shown when
show_story_marker
Folio styleDropdown
ID
panel_style
Default
Elevated
Elevatedelevated
Outlinedoutlined
Content paddingSlider
ID
content_padding
Default
44
Range
24px to 64px, in steps of 4px
Use custom corner radiusCheckbox
ID
use_custom_panel_radius
Default
Off
Folio corner radiusSlider
ID
panel_corner_radius
Default
4
Range
0px to 40px, in steps of 2px
Shown when
use_custom_panel_radius
Style
Section color schemeColor scheme
ID
color_scheme
Default
scheme-1
Content color schemeColor scheme
ID
content_color_scheme
Default
scheme-2
Show entrance animationCheckbox
ID
show_entrance_animation
Default
On
Top paddingSlider
ID
padding_top
Default
72
Range
0px to 160px, in steps of 8px
Bottom paddingSlider
ID
padding_bottom
Default
72
Range
0px to 160px, in steps of 8px
Blocks
Blocks are added, reordered, duplicated, and removed inside the section. Each type has its
own settings.