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
35
Block types
—
File
sections/image-story.liquid
Used by default on:
page.about
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.
Content
Section labelText
Appears above the image and story. Leave empty to hide.
ID
section_label
Default
Our story
EyebrowText
ID
eyebrow
Default
Behind the daily ritual
HeadingText
ID
heading
Default
A little care, every day
Content sizeDropdown
ID
heading_size
Default
Medium
Shown when
heading is set or text is set or mobile_subheading is set
Smallsmall
Mediummedium
Largelarge
Mobile subheadingText
Optional short introduction above the image on mobile.
ID
mobile_subheading
Body textRich text
ID
text
Default
<p>Morning light, warm water, a few quiet minutes. Skincare begins with these small moments: a familiar texture, a gentle touch, time to feel like yourself.</p><p>From the first cleanse to the final layer, make room for a ritual as personal as the skin you’re in.</p>
Full story linkLink
Choose a page with the full story. Leave empty to hide the read more link.
ID
story_link
Read more labelText
ID
story_link_label
Default
Read our story
Shown when
story_link is set
Button labelText
ID
button_label
Default
Explore the collection
Button linkLink
Leave empty to hide the button on the storefront.
ID
button_link
Shown when
button_label is set
Button styleDropdown
ID
button_style
Default
Text link
Shown when
button_label is set
Primaryprimary
Secondarysecondary
Text linklink
Image
ImageImage
ID
image
Mobile imageImage
Optional. Uses the main image when left empty.
ID
mobile_image
Desktop image ratioDropdown
ID
desktop_image_ratio
Default
Square
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
Default
The quiet beauty of an everyday ritual.
Layout
Image positionDropdown
ID
image_position
Default
Left
Leftleft
Rightright
Desktop image sizeDropdown
ID
desktop_image_size
Default
Small
Smallsmall
Mediummedium
Largelarge
Desktop content overlapSlider
Moves the content panel over the image edge. Set to 0 to keep the image and panel side by side.
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
Mobile header alignmentDropdown
ID
mobile_header_alignment
Default
Left
Shown when
eyebrow is set or heading is set or mobile_subheading is set