The Page Editor

VIDEO WALKTHROUGH

Astro Admin — Page Editor & Custom Layouts: setup guide

2:49

Recorded 14 October 2026 · Narrated walkthrough · English captions

Jump to a chapter 8 chapters

1. 0:00Page Editor & Custom Layouts
2. 0:14Understand rows, columns and blocks
3. 0:34Select a block and inspect variations
4. 0:56Inspect content and settings
5. 1:20Check the responsive canvas
6. 1:40Understand draft, copy and update
7. 2:05Leave the demonstration without saving
8. 2:29Your next steps

Read the full video transcript

Astro Admin — Page Editor & Custom Layouts 2026-10-14 — Astro Admin setup

00:00:00 — Page Editor & Custom Layouts
Welcome to the Agentic Ecom Astro Admin guide to page editor & custom layouts. We're using the Sync Comms storefront to show the current controls. We'll review the workflow with previews, without saving changes to this live store.

00:00:14 — Understand rows, columns and blocks
Open Edit Design for the page type you want to work on. Components is the block palette, Navigator gives a tree view, and the centre canvas is organised as rows, columns and blocks. Select an existing block to open its properties on the right. This is a layout editor; product and price data remain in Magento.

00:00:34 — Select a block and inspect variations
Select a block on the canvas, such as Hero Banner. Variations offers layouts for that block. Open its variant picker to compare the available choices. Where a choice uses the two-click confirmation, the first click arms it and the second applies it to the unsaved canvas. We are inspecting the choices without saving a new layout.

00:00:56 — Inspect content and settings
Content controls the block's text, image, link or source data where that block supports it. Settings covers the available block options and spacing. Data-bound blocks may use Magento C M S content or catalogue fields instead of editable text. Use the controls shown for the selected block rather than assuming every block has the same fields.

00:01:20 — Check the responsive canvas
Use Desktop, Tablet and Mobile in the top bar to inspect the layout at each breakpoint. Confirm the order and spacing still work on a narrow screen. Navigator can help you select nested blocks. On your own design, click a Components item to add it, then use undo if the addition is not needed.

00:01:40 — Understand draft, copy and update
More save options separates Save as draft, Publish, Save as new preset, and version history. A draft is a checkpoint. Save as new preset keeps a reusable copy. When editing an existing custom preset, Update can overwrite it in place; if it is already active, that affects the live layout. Choose the action deliberately and prebuild after an intended live change.

00:02:05 — Leave the demonstration without saving
For a new layout, save a named custom preset, select it on Structural Presets, then prebuild the affected pages. When experimenting in a live Admin, discard changes you do not intend to keep. This demonstration leaves the Sync Comms layout unchanged and has not saved a draft, updated its active preset or started a build.

00:02:29 — Your next steps
To put this into practice, edit the correct page type, check blocks and responsive layout, save deliberately then activate and prebuild. Test the complete result on your own staging storefront before publishing. You can follow the written Astro Admin guides at user guides dot Agentic Ecom dot net.

Download videoEnglish captionsDownload transcript

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.