In the docs

The basics

Text

Text is any words on the page: a heading, a sentence, a small label, a price. You type it straight onto the page, where shoppers will read it.

New this week
Bread that keeps
A slow, sour dough baked dark. It's better on day two, and still good on day five.
Three texts in a stack: a small label, a heading, and a sentence. Each has its own size and colour.

How to make one

  1. Press T, or choose Text in the toolbar.
  2. Click on the page and start typing. Or drag first, to set how wide the text can run before it wraps.
  3. Click anywhere else when you're done.

To change the words later, double-click them. Or select the text and type in the box under Text in the Design tab.

Design

A text's look starts from your store's fonts. Pick a size and font, and change your store's fonts later without touching each text.

Size
Font
Honey from the hill farm
Sizes and fonts come from your store's design, so changing a font there changes every text that uses it.
Font
Heading or Text follow your store's defaults; Mono is for figures and codes. Any font… picks any font at all, or one you uploaded.
Size
Small, Body, Heading or Display, or a size of your own.
Weight
From light to heavy.
Align
Left, centre or right.
Tracking
Letters closer together or further apart.
Case
As typed, or all capitals.
Text colour
From your store's design, or any colour you choose.
Max width
Stops long sentences running too wide to read comfortably.

Behaviour

Show on
Every screen, wide screens only, or phones only.
Shows
Inside a component, a text can show a product's name, price or description instead of what you typed. A list then fills it in for each product.

Good to know

Free delivery on orders over $60
Shop now →
Two texts in a row, on a dark bar. The second was turned into a link, and set 44 tall so it's easy to tap on a phone.
  • Want a word to be a link? Select the text and choose ⋯ › Turn into › Link.
  • Buttons and badges are text too, with a background: ⋯ › Turn into › Button. See Buttons and links.
  • On a linked copy of a component, you can change the words without changing the original.

Recipes that use it