Image with text

An image beside a column of blocks: heading, text, key points, stats, collapsible rows, a video or a button.

What it does

Two columns: an image on one side, a stack of blocks on the other. The blocks are the theme’s content blocks, so the text side can be a heading and a paragraph, a list of key points, a pair of statistics, collapsible rows with details, a video or a button. The image can be cropped to a ratio or keep its own proportions.

When to use it

Every chapter of a story: the problem, the ingredients, the founder, the process. It is the workhorse of the home page and the about page. Two or three in a row with alternating image positions carry most of a landing page.

Blocks

Heading, Text, Button: the basic content blocks.
Key point: a short line with an icon, for benefits.
Stats: two or three large numbers with a label each, side by side or stacked.
Specs: a compact table of label and value pairs, for ingredients or dimensions.
Collapsible row: a title that opens to show more, for details that not everyone needs.
Video: a clip in the text column.

Setting it up

Upload the Image and choose Image position and Image ratio.
Add a Heading and a Text block, then whatever the chapter needs: key points, stats or a button.
Choose Layout. Card, with a Card color scheme, for text that needs its own surface.

Settings

Setting	Type	What it does
General
Color scheme	Color scheme	The surface of the row when it is Boxed or a Card. Ignored in List style.
Width	Select	Fixed width keeps the section inside the page margin so it lines up with the sections around it. Full width runs it to the edge of the screen.Options: Fixed width, Full width · Default: Fixed width
Layout	Select	Standard puts image and text side by side on the section surface. Card puts the text on a card with its own color scheme.Options: Standard, Card · Default: Standard
Card color scheme	Color scheme	The surface of each card, separate from the section behind it, so cards can stand off the section background.
Image
Image	Image	The image next to the text. 1200 px wide or more.
Alt text	Text	Describes the image for people using a screen reader and for search engines. Leave empty to use the alt text set on the file in Content.
Image position	Select	Which side of the text the image sits on, on desktop. On a phone the image is always on top.Options: Left, Right · Default: Left
Image ratio	Select	The shape the image is cropped to. Adapt keeps the proportions of the file and lets the text column follow.Options: Landscape, Portrait, Square, Adapt to image · Default: Landscape
Content
Content alignment	Select	Whether heading, text and buttons sit left, centered or right inside the section.Options: Left, Center, Right · Default: Left
Section padding
Top padding	Range	Space between the top of the section and its content. On a phone the theme tightens it by a quarter.0 to 120 px · Default: 90
Bottom padding	Range	Space between the content and the bottom of the section. On a phone the theme tightens it by a quarter.0 to 120 px · Default: 90

Heading block

Setting	Type	What it does
Heading	Text	The heading text. Italicize a word to set it in the accent font.Default: Add a heading that says what you stand for
Size	Select	How large the heading renders, on the shared type scale.Options: Large, Medium, Small, Extra small · Default: Medium
Heading level	Select	Page heading is the one heading that names what the page is about; use it once per page. Section heading and Subheading are for everything else.Options: Page heading, Section heading, Subheading · Default: Section heading
Accent font	Select	Highlight words puts the italicized words on the accent font. Whole heading sets the entire line in it. Off keeps the heading font.Options: Highlight words, Whole heading, Off · Default: Highlight words
Alignment	Select	Overrides the alignment of the section for this block only. Inherit follows the section.Options: Inherit, Left, Center, Right · Default: Inherit

Text block

Setting	Type	What it does
Text	Rich text	A paragraph or two. Bold, italic and links are kept; headings are not, use a Heading block for those.Default: <p>Use this text to explain the product, the story, or the promise behind it.</p>
Size	Select	How large the heading renders, on the shared type scale.Options: Large, Medium, Small · Default: Medium
Alignment	Select	Overrides the alignment of the section for this block only. Inherit follows the section.Options: Inherit, Left, Center, Right · Default: Inherit

Key point block

Setting	Type	What it does
Text	Text	A paragraph or two. Bold, italic and links are kept; headings are not, use a Heading block for those.Default: Free shipping on orders over 50
Icon	Select	The small icon in front of the text. None for a plain line.Options: None, Shipping, Returns, Guarantee, Delivery time, Natural, Gift, Secure payment, Check, Star · Default: Shipping
Alignment	Select	Overrides the alignment of the section for this block only. Inherit follows the section.Options: Inherit, Left, Center, Right · Default: Inherit

Stats block

Setting	Type	What it does
Layout	Select	Standard puts image and text side by side on the section surface. Card puts the text on a card with its own color scheme.Options: Side by side, Below one another · Default: Side by side

Stat block

Setting	Type	What it does
Value	Text	The figure, typed as it should read, such as 70% or 2.4x.Default: 70%
Description	Text	What the figure means, in a few words under it.Default: Add the fact this figure stands for
Size	Select	How large the heading renders, on the shared type scale.Options: Large, Medium, Small · Default: Medium

Specs block

No settings

Spec block

Setting	Type	What it does
Label	Text	What the figure means, in a few words under it.Default: Made of
Value	Text	The figure, typed as it should read, such as 70% or 2.4x.Default: Recycled handle with soft vegan bristles

Collapsible row block

Setting	Type	What it does
Heading	Text	The heading text. Italicize a word to set it in the accent font.Default: Shipping and returns
Content	Rich text	What the row shows when opened. Formatted text, lists and links are kept.Default: <p>Describe your shipping and return policy here.</p>
Row style	Select	List draws a hairline under the row, Boxed a border around it, Card lifts it off the page with its own surface.Options: List, Boxed, Card · Default: List
Color scheme	Color scheme	The surface of the row when it is Boxed or a Card. Ignored in List style.
Marker	Select	The symbol at the end of the row that shows it can open.Options: Chevron, Plus · Default: Chevron
Icon	Select	The small icon in front of the text. None for a plain line.Options: None, Natural, Shipping, Returns, Guarantee, Delivery time, Gift, Secure payment, Check, Star · Default: None
Open by default	Checkbox	Shows the row already opened when the page loads. Use it for the one row most visitors want.Default: off
Show below product media	Checkbox	On the product page only: moves the row under the images instead of keeping it in the buy box column.Default: off

Video block

Setting	Type	What it does
Video	Video	A video uploaded to your store. Plays here directly, without a third party player, and is preferred over a video link.
Video link	Video URL	A YouTube or Vimeo link, used when no uploaded video is set. Loads the player only when the visitor presses play.
Poster image	Image	The still shown before a YouTube or Vimeo video loads. An uploaded video uses its own first frame.
Video description	Text	What happens in the video, for people using a screen reader.
Video ratio	Select	The shape of the video frame. Adapt follows an uploaded video; a link is always 16:9.Options: 16:9, 4:5, 1:1, Adapt to video · Default: 16:9
Play video automatically	Checkbox	Starts an uploaded video muted and looping as soon as it is on screen. Uses the visitor's data on a phone.Default: off
Loop the video	Checkbox	Starts an uploaded video again when it ends.Default: off

Button block

Setting	Type	What it does
Button label	Text	What the figure means, in a few words under it.Default: Shop now
Button link	Link	Where the button leads.
Button style	Select	List draws a hairline under the row, Boxed a border around it, Card lifts it off the page with its own surface.Options: Solid, Outline, Text link · Default: Solid
Size	Select	How large the heading renders, on the shared type scale.Options: Large, Medium · Default: Medium
Alignment	Select	Overrides the alignment of the section for this block only. Inherit follows the section.Options: Inherit, Left, Center, Right · Default: Inherit

This section also accepts app blocks, so apps that provide one can add content here.

Tips

On a phone the image is always on top and the text below it, whatever Image position says.
Card layout puts the text on a card with its own color scheme. Use it when the section sits on a photo heavy page and the text needs a calm surface.
Collapsible rows in this section are the same block as on the product page. Show below product media does nothing here; it only matters in the buy box.
Alternate Image position from section to section down a page. Left, right, left reads as a rhythm; three times left reads as a list.