Decorated statement

Decorated statement is a short piece of writing with small images arranged loosely around it. Use it for a brand introduction, a note about a collection, or anything that would read as flat text on its own. The images are decoration, not content: they set a mood around the words rather than illustrating a point, and screen readers skip them. Do not put information in them.

Add the section

1. In the theme editor, open the page where you want it.
2. Click Add section.
3. Under Storytelling, choose Decorated statement.

The section arrives with placeholder text and six decoration slots, so you can see the arrangement before adding your own images.

The statement

The words sit in a content slot named Header, prefilled with an eyebrow, a heading, a paragraph, and a button. Edit, reorder, or remove those blocks, or add others. This is ordinary content, so it follows the theme's usual text blocks.

Keep it short. The section reserves space around the statement for the decorations, so a long block of text crowds them out.

The decorations

The images live in a block named Decorations. Each one inside it is a Decoration block. Add, remove, or reorder them; the order in the block list is the order they are placed around the statement, so moving a block moves the image.

Open a Decoration to set:

• Image: the picture. A cut-out subject on a plain or transparent background sits better here than a full photograph.
• Link: optional. Turns the image into a link to the page you set.
• Hover label: a short caption that unrolls over the image when the pointer is on it. One or two words fit best. It appears only when Link is filled in.
• Size: how large it is drawn, from 40 to 320 pixels. Default is 150.
• Rotation: tilts it, from -20 to 20 degrees.
• Position, Horizontal: nudges it left or right from its place, from -20 to 20 percent.
• Position, Vertical: nudges it up or down from its place, from -20 to 20 percent.

The two Position sliders adjust a place the theme already chose. They are for fine-tuning a single image that sits awkwardly, not for laying the field out from scratch. The percentages are read against the section, which is wider than it is tall, so the same number moves an image further sideways than up or down.

Height

Height sets how far apart the upper and lower decorations are held, from 0 to 240 pixels. Default is 100.

It is a minimum. A long statement pushes the section taller than the value on its own, so raising it only has an effect while the words leave room to spare. Raise it to give the statement more air, lower it to pull the section together.

On a phone the decorations move into bands above and below the words, so Height no longer applies there. If the section feels busy on a small screen, remove a Decoration block or two rather than resizing the ones you have.

Other settings

This section also uses the standard Color, Margin, and Visibility controls. See Common section settings. It has no Padding group: Height above sets the space the decorations need.

Tips

• Images with a transparent background (PNG or WebP) read as objects scattered around the text. Rectangular photos read as a collage instead, which fights the statement.
• The theme holds every decoration back from the words on its own. If one image still pulls too much attention, replace it with a paler cut-out or make it smaller rather than working around it.
• A Hover label works best when it names what the link leads to, in the shopper's own words: a collection, an ingredient, a maker. Without a Link the field does nothing.
• Small rotations do more than large ones. Past about 10 degrees an image reads as tipped over rather than casually placed.