Text and headings

Most of a page is words. Aedify has two elements for them:

• Heading: one line of heading text, such as a section title. It can have an icon before or after it.
• Text: paragraphs, lists, quotes and links, with a full formatting toolbar.

Both are in the Elements group of the palette. New to the builder? Start with Using the builder.

Editing on the canvas

Click a heading or text on the canvas and type. Changes show as you make them.

• A new heading reads Edit heading text until you type, and a new text element reads Write something here. These placeholders aren't published.
• Inside a tab, empty text reads Add this tab's content here. and inside an accordion item, Add the answer or details here. See Accordion and tabs.

A selected element shows a small toolbar under it. For more options, open the element's Settings.

Headings

On the canvas

The heading toolbar has the levels H1 to H6 and three alignment buttons. A heading is plain text: Enter doesn't start a new line, and formatting you paste is dropped, so the heading always matches your theme.

Heading settings

The level sets the heading's meaning and its size: your theme styles each level. To make a heading bigger or smaller without changing its level, use Style → Font size.

Text

The toolbar

Select some text, then use the toolbar:

Text settings

Settings has the same toolbar plus two more controls:

Below the toolbar, Alignment sets the whole element: Theme default, Left, Center or Right.

Theme font and Theme heading font follow your theme, so they change if you change your theme's fonts. Theme heading font works with Dawn, Horizon and themes built on them; on other themes it may show your body font. The other fonts are standard ones that most devices have.

Links

Select the words to link, click Link, and enter the address:

• Start with / for a page in your store, such as /collections/all or /pages/contact.
• Use a full address, starting with https://, for another site.
• Turn on Open in a new tab if the link should open in a new tab.

Click Add link. To change a link, put the cursor in it and click Link again: you can Update link or Remove link.

Link words that say where the link goes, such as "See our shipping rates", rather than "click here". Screen reader users often jump from link to link, and hear only the link text.

Images in text

Insert image opens your store's files: pick an image, upload one (JPG, PNG, GIF, WebP or SVG, up to 20 MB), or add one from a URL. The image goes in at the cursor, at its own size, and loads only when the shopper scrolls to it.

The image uses the alt text saved with the file in Shopify (Content → Files). Set it there before you insert it. For a large image, a caption or a link, use an Image element instead.

Icons in text

Insert icon opens the icon search. The icon goes in at the cursor and takes the size and color of the text around it.

For a heading, open its Settings, expand Icon, and search. Choose Before the text or After the text, or Remove it.

You can also drag an Icon element from the palette onto a heading or text on the canvas, then pick the icon. In text, it goes at the start of the first paragraph.

Icons in text are decorative: screen readers skip them, so make sure the words make sense without them.

The HTML view

Click HTML to edit the element's HTML directly, for example to paste content from another editor. Click Visual to go back.

Text that isn't inside a block, such as a paragraph or a list, is put in a paragraph when you save. For scripts or embeds, use an HTML code element instead.

Style

Headings and text have the Style and Advanced sections every element has. Style applies to the whole element: font size and weight, text and background colors, margins and padding, borders, and custom CSS.

Formatting in the toolbar applies to the words you select. Use Style for the whole element, and the toolbar for a few words.

Choosing heading levels

Screen readers and search engines read headings as an outline of the page, so their levels should follow its structure, not the size you want:

• Heading 1 is the page title. Your theme already shows the page or blog post title as a Heading 1, so start your content at Heading 2.
• Use Heading 2 for each main section, and Heading 3 for parts of a section.
• Don't skip levels on the way down: a Heading 4 straight after a Heading 2 leaves a gap in the outline.

The accessibility check in the toolbar watches for this, counting both Heading elements and headings inside Text:

Click Select next to an issue to jump to the element. The Accessibility check flags skipped levels and H1s across the whole page.

Tips

• Keep paragraphs short. Two to four sentences read well on a phone.
• Leave font sizes to the theme where you can. Your pages then change with your theme, and stay consistent with the rest of your store.
• Check contrast. If you color text or put it on a colored background, make sure it's easy to read. Aim for a contrast of at least 4.5:1.
• Preview on a phone. Long headings wrap onto several lines on small screens. Check them with Preview → Mobile.