The visual builder is a full-screen workspace with three panes. Once you know what each does, editing is fast.
The header bar
Across the top: a Back button (left), the page title, an amber Unsaved changes flag when you have edits, and a Save button (right). Save is disabled until you’ve made a change, and reads Saving… while it works. See Saving & publishing.
The three panes
📷 Screenshot: The full three-pane editor with one section selected — label each pane: Sections, Live preview, Settings.
1. Sections (left)
Every block on the page, top to bottom, as a row showing a drag grip, the block name, and a one-line preview of its content. The selected row has a colored border. Hover a row to reveal its Duplicate and Remove icons. A + Add section button sits at the bottom. If the page is empty you’ll see “No sections yet. Add your first one below.”
2. Live preview (center)
A live view of your real storefront rendering the page through your actual theme and components. It updates as you edit. Click a section in the preview to select it in the list — and selecting a section in the list highlights it in the preview.
3. Settings (right)
The fields for the selected block. Its header shows the block name, an Expand/Shrink toggle (widens the panel for comfortable editing), and a Close (×). Before you select anything it reads “Select a section to edit its settings.” You can drag the panel’s left edge to resize it (double-click the edge to reset); your width is remembered.
💡 Tip: Nothing is saved automatically. The amber Unsaved changes flag is your reminder to hit Save.
Next: Adding & arranging blocks.