Text, Image, and Divider work as full sections on any page, and as blocks inside many other sections. Their settings are the same in both places, with small differences noted below.
Add one
In the builder, click Add new section. Text and Image are in the Content group, Divider in Decoration. Per page you can add up to 3 Text sections, 3 Image sections, and 10 Dividers. To add one as a block, select a section and click Add new block.
Text
- Text: the editor has bold, italic, underline, strikethrough, text size (Small, Normal, Large, Huge), text color, highlight color, and a button to clear formatting.
- Preset: Default, Paragraph, or Heading 1 to Heading 6. Headings use your heading fonts and tell search engines how the page is built. Use only one Heading 1 per page.
- Font: Default uses the font of the preset. Body, Heading, Subheading, or Accent uses that font from the Fonts settings instead.
- Size (10 to 30 pixels), Line height, and Letter spacing (Tight, Normal, or Loose).
- Width: Fit (as wide as the text) or Fill (full width). Alignment (left, center, right) appears with Fill.
On the collection page, text can use {{collection_name}}, {{collection_description}}, and {{products_count}} to show live values for the collection being viewed.
Image
- Image: pick a picture from your media library.
- Width: Fit, Fill, or Custom with a Custom width in percent. Alignment is hidden with Fill.
- Ratio: Auto (the image's own shape), Portrait, Square, or Landscape. With a fixed ratio, Fit picks Cover (fills the frame, may crop) or Contain (shows the whole image).
- Corner radius: rounds the corners, from 0 to 100 pixels.
- Link: optional. The image opens this address when clicked, for example
https://example.com/products/your-link.
Divider
A line that separates content. It is horizontal in a stacked layout, and becomes vertical when placed directly inside a horizontal group.
- Width: Fit or Fill.
- Thickness: 1 to 10 pixels. Length: 5% to 100% of the space.
- Alignment: Start, Center, or End. It shows when Length is under 100%.
- Corner radius: Sharp or Rounded line ends.
Colors and spacing
- As a section, each has a Color scheme: its background, its text color, and for the divider the line color (the scheme's border color). See Color schemes.
- As a block, Text has Use parent color scheme (on by default). Turn it off to pick a different scheme. Images in blocks follow their section.
- Padding on each side. A Divider section allows up to 200 pixels, for a bigger space between sections.
Good to know
- Empty text does not show on the store, so an empty Text block leaves no gap.
- Image is cropped: set Fit to Contain, or Ratio to Auto.
- Divider not vertical: it must sit directly inside a group set to Horizontal, see How do I use Group blocks to place content side by side or in columns?.