Skip to main content

Text elements

Add and style Heading, Paragraph, and Text elements from Insert, including dynamic Shopify content.

Text elements carry your message, labels, and dynamic product data. In the builder, open Insert, switch to the elements view, and find Text under the Basics group. Three presets are available:

  • Heading — for titles and section headers.

  • Paragraph — for body copy and longer descriptions.

  • Text — a flexible inline text block for labels, captions, and short phrases.

Add and edit text

Drag a text preset onto the canvas or into an existing column, row, or grid cell. Double-click the element to edit copy directly on the canvas. A formatting toolbar appears while you edit, with bold, italic, and underline, links, and bullet or numbered lists.

On the Style tab of the Design panel you control typography: font family, size, weight, line height, letter spacing, alignment, color, and decoration. Text elements can inherit Text styles from your project's brand styles so you can update fonts and sizes in one place.

Dynamic Shopify content

Text elements aren't limited to static copy. Connect a text element to Shopify fields through the Content section in the Design panel — common sources include a product Title, Description, and Price.

When a text element sits inside a container with Repeat on — for example, repeating over a collection's products — each repeated instance shows that product's data automatically. Pair dynamic text with Conditional visibility to show a sale label only when a product is on sale, or hide a label when it's out of stock.

Structure and accessibility

Choose the correct preset for semantic HTML. Use Heading for page and section titles rather than styling a Paragraph to look like a heading — this helps accessibility and SEO on your published storefront. You can also set the underlying HTML tag on the Settings tab.

Use Layouts & layers to locate text inside nested structures, and rename layers like "Product title" or "Sale badge" so you can find them quickly.

Responsive text

Typography can be set per breakpoint, so a hero heading might be larger on desktop and smaller on mobile. Change the breakpoint above the canvas, then adjust the values. Turn on Balance for short headlines that should wrap evenly across lines.

Tips

Keep one primary heading per section. Mix Heading and Paragraph presets rather than overriding sizes everywhere — this keeps your design consistent and makes global font updates easier later.

Related articles

Did this answer your question?