Tell your story: where the beans come from, how you roast, your café.
How to add it
In Shopify admin, go to Online Store → Themes and click Customize.
Open the page from the page picker at the top of the editor.
In the sidebar, click Add section and choose Image with text.
Fill in the content, then click Save.
Tips
Use the icon blocks for small trust marks, such as Organic or Fairtrade.
Screenshots
The Image with text section on a phone.Image with text settings in the theme editor.Icon blocks.
Settings
Setting
Options
What it does
Section appearance
Color scheme
Color scheme
Media
Image
Image
Mobile image
Image
Optional. Falls back to the desktop media when empty.
Prioritize image loading
On / Off
Turn on only when this section is above the fold (visible without scrolling), for example at the top of the home page. Loads its first images immediately instead of when they scroll into view.
Settings
Section height
Adaptive (fit content) · Small · Medium · Large
Fixed heights crop the image to fill its column. Adaptive keeps the image's own shape.
Mobile section height
Adaptive (fit content) · Small · Medium · Large
Image width
Small · Medium · Large
Mobile image width
Small · Medium · Large
The columns stack on mobile, so this sets how much of the width the image takes.
Image placement
Image first · Image second
Mobile image placement
Image first · Image second
Whether the image sits above or below the content once the columns stack.
Position
Content alignment
Left · Center · Right
Mobile content alignment
Left · Center · Right
Content position
Top · Middle · Bottom
Mobile content position
Top · Middle · Bottom
Animations
Blocks
Click Add block under the section in the sidebar. Drag blocks to change their order.
Subheading up to 2
Setting
Options
What it does
Subheading
Text (bold, italic, links)
Subheading size
Small · Medium · Large
Heading up to 2
Setting
Options
What it does
Heading
Text (bold, italic, links)
Italicized words switch to the Accent font from Theme settings → Typography. They stay italic and keep the color of the text around them.
Heading size
Small · Medium · Large · Extra large
Heading level
H1 · H2 · H3 · H4 · H5 · H6
Adjust for page structure — one H1 per page. Size is controlled separately.
Text up to 3
Setting
Options
What it does
Text
Rich text
Text size
Small · Medium · Large
Button up to 2
Setting
Options
What it does
Button label
Text
Link
Link
Button style
Primary · Secondary · Ghost · Link
Button size
Small · Medium · Large
Open in a new tab
On / Off
Link up to 3
Setting
Options
What it does
Link text
Text
Link
Link
Open in a new tab
On / Off
Icon up to 4
Setting
Options
What it does
Icon
None · Award · Bag · Coffee bean · Book · Building · Coffee cup · Envelope · Globe · Headset · Leaf · Lock · Refresh · Shield check · Star · Truck
Custom image
Image
Replaces the icon. Shown at the icon width.
Icon width
16–64 px
Link
Link
Icon link description
Text
Needed when the icon links somewhere: icons are decorative, so this is what a screen reader announces. Example: Read our sourcing story.
