How It Appears
The toolbar appears automatically when you:- Select part of a text block (partial selection) — Shows inline formatting options like bold, italic, and underline.
- Click on a full text block (whole block selected) — Shows block-level controls like alignment, heading size, and AI rewriting.
The toolbar closes automatically when you click outside of it, press the Escape key, or deselect the text.
Partial Text Selection Controls
When you select a portion of text within a block, the toolbar shows inline formatting options:Text Formatting
| Button | Action | Shortcut |
|---|---|---|
| B (Bold) | Toggle bold formatting | Cmd/Ctrl + B |
| I (Italic) | Toggle italic formatting | Cmd/Ctrl + I |
| U (Underline) | Toggle underline formatting | Cmd/Ctrl + U |
Text Color
Click the color circle button to open the color picker. The circle displays the current text color of your selection. The color picker has two tabs:Custom tab
Custom tab
A full color picker with:
- Saturation/brightness selector
- Hue slider
- Hex color input field (type a hex code like
#FF5733and press Enter) - Eyedropper tool (click to pick any color from your screen — available in supported browsers)
Theme tab
Theme tab
Quick-access swatches from your brand style, organized into groups:
- Brand colors — Primary, secondary, and tertiary brand colors
- Text colors — Headline and body text colors
- Button colors — Button background, hover, and text colors
Reset Formatting
When your selected text contains formatting spans (bold, italic, color changes, etc.), a reset button (circular arrow icon) appears. Clicking it removes all inline formatting from the selection, returning the text to its default style.Text Highlight Toggle
For heading text (H1-H6), if text highlighting is enabled in your brand style, a Highlight toggle appears. Activating it wraps the selected text in the highlight font configured in your brand style.Whole Block Selection Controls
When an entire text block is selected, the toolbar switches to block-level controls:AI Rewrite Button
The Rewrite button (with the sparkle icon) opens the AI chatbox with the selected text pre-filled, allowing you to rewrite the content using AI prompts.Text Alignment
Three alignment buttons control the horizontal alignment of the text block:| Button | Alignment |
|---|---|
| Left align | Aligns text to the left edge |
| Center align | Centers text horizontally |
| Right align | Aligns text to the right edge |
Alignment controls only appear for text blocks that support alignment. Some section elements have fixed alignment determined by the section layout.
Heading Size Controls
The heading size controls let you change the typographic level of the text block:- Minus button (-) — Decrease size (e.g., H1 becomes H2, P1 becomes P2)
- Size dropdown — Shows the current size level. Click to open a dropdown with all nine options:
- H1 through H6 — Heading levels (largest to smallest)
- P1 through P3 — Paragraph levels (largest to smallest)
- Plus button (+) — Increase size (e.g., H3 becomes H2, P2 becomes P1)
Button Text
When you select text inside a button element, the toolbar shows only the Rewrite button. Other formatting options are hidden since button text inherits its styling from the brand style (button font size, weight, and color).Read-Only Fields
For fields that come from external data (like Shopify product titles and prices), the toolbar shows:- Edit in Shopify button — Opens the Shopify admin in a new tab where you can edit the source content.
- Size controls — Minus, size dropdown, and plus buttons to adjust how the field is displayed in the builder.