The Page Editor

The block palette, a block's Variations / Content / Settings, adding a block — then discarding · silent, captioned

The page editor (the Agentic Builder) is where you shape a page. You reach it from Edit Design on any page tile in Structural Presets, from Open Blank Editor, or by editing a Saved Layout. Its URL looks like /admin/editor?type=homepage.

The editor edits structure, not colour

Colours, fonts and decoration come from the global Style and Theme presets and apply to every page. The editor’s job is the arrangement of blocks. The right-hand panel even links out to the Theme and Style editors for that reason.

Anatomy of the editor

• Top bar — exit, the page badge, responsive breakpoints (Desktop / Tablet / Mobile), Save draft, and the Components / Navigator toggle.
• Left — Components — the palette of blocks you can add, grouped into Layout & Structure, Global Elements, Commerce (Magento), Basic Content, Media (plus a Navigator tree view).
• Centre — Canvas — the page itself, as nested Row → Column → Block.
• Right — Properties — settings for whichever block is selected (Variations / Content / Settings).

Adding blocks (click, don’t drag)

It's click-to-add, not drag-and-drop

To add a block, click it in the Components palette. The new block is inserted into the page and selected automatically. Many people expect to drag — you don’t have to. (You can drag existing blocks around the canvas by their ⠿ handle to reorder them.)

The palette is grouped:

Layout & Structure

Row (full-width container), Inner Row (2- or 3-column), Tabs, Accordion, Hero Banner, Spacer, Divider. Build your skeleton from these first.

Commerce (Magento)

Dynamic, data-bound blocks: Product Title, Product Price, Add to Cart, Category Grid, Account Dashboard, and more. These render real Magento data once the relevant sync has run.

Global Elements

Reusable pieces (e.g. a CMS block, rich text) that you can drop into any page.

Use the Navigator tab (next to Components) for a tree view of the whole page — handy on complex layouts for selecting a block that’s hard to click on the canvas.

The Properties panel

Select any block and the right panel shows its name and its tabs (Variations, Content, Settings), with Reset Settings and Delete at the bottom.

The variant picker (two-click apply)

The Variations tab is a grid of ready-made layouts for that block — each a card with a name, a short description, and a mobile-behaviour tag (e.g. “Swipeable”, “2-col stack”). The active one has an accent ring and a ✓.

Applying a variant takes TWO clicks — by design

The first click on a variant arms it: the card turns green with a “Click to Apply” overlay (it auto-cancels after a few seconds). A second click on the same card applies it (you’ll see a “Applied variant: …” toast). This deliberate confirm stops accidental layout swaps — so if you click once and “nothing happens”, that’s expected: click it again.

For example, the Category Grid ships variants like Scroll Rail (default), Masonry Grid, Featured + Grid, Circle Icons, Card Overlay, Image Cards, Tiles with Count and Carousel Scroll. The Hero Banner ships Fixed Cover, Parallax Scroll, Ken Burns Zoom and Diagonal Split.

Content, Settings and Spacing

Content

The block’s actual content — text, image, links, the SKU or category it points at.

Settings / Advanced

Per-block typography overrides and the box model.

Spacing

A visual margin & padding editor — click a side and type a value.

At the bottom of the panel: Reset Settings and Delete block.

Responsive preview

The top bar has Desktop / Tablet / Mobile buttons. They resize the canvas so you can check each breakpoint; the current one is shown at the top-right of the canvas. Switch to Mobile before publishing to confirm your layout stacks sensibly — the variant tags (“2-col stack”, “Swipeable”) tell you how each block behaves on small screens.

Undo, redo and history

The top bar has undo / redo and a history (clock) button. History keeps your saved drafts so you can restore an earlier version — see the Save menu below.

The save model (the important part)

The Save button is a split button. Its dropdown is the heart of how the editor works — learn these four options:

Save as draft

A checkpoint, stored in History. It does not go live. Use this constantly while you work.

Publish

Name it — this saves the page as a custom preset. It does not go live on its own: you then activate it on Structural Presets for that page type, then Prebuild. (The on-screen note says exactly this: “Save as a custom preset. Activate it on Structural Presets to go live.”)

Save as new preset…

Keep a reusable copy without going live. This is how you create a custom structural preset.

Drafts & version history

Restore, publish or name a previously saved version.

1. Work on the page, saving drafts as you go. The canvas itself is the live preview — there is no separate Preview button.

2. When it’s right, choose Publish from the Save menu and give it a name. This stores it as a custom preset (it does not change the live store yet).

3. Activate that preset on Structural Presets for this page type.

4. Prebuild to push it to the live storefront.

Going live is TWO steps: Activate, then Prebuild

Publish saves your page as a custom preset — it does not change the live store by itself. To go live you must (1) activate that preset on Structural Presets for the page type, then (2) run a Prebuild. If you published and the site looks unchanged, you’ve skipped one of these two steps — this is the single most common “it didn’t work” report.

Deleting a block or starting over

• Delete one block — select it, then Delete block at the bottom of the Properties panel (or the trash icon on the block).
• Reset a block’s settings — Reset Settings in the Properties panel.
• Discard everything — close the editor without publishing; your live layout is untouched. Or restore an earlier version from Drafts & version history.

Next: Style presets Set the site-wide shape, texture and spacing language.