Skip to main content

Page Builder Studio — Overview & Action Header

How to get there: Experience Manager → Project → surface → Pages → Edit on a page row Route: /org/ecom/customerpages/<page_id>/edit?from=experience Permission: Edit existing Public Pages records (Storefront). Publishing needs …pages.publish; the Templates button needs Build Public Pages.

The Page Builder Studio is where a page is actually assembled: drag blocks onto a canvas, configure each one, preview, tune SEO, publish.

Figure 1 — The studio in Builder mode.
You must arrive with a project selected

The editor reads the active project from the project context. Opening its URL directly in a fresh session shows "No Project Selected" and nothing else. Reach it through Experience Manager — that also gives you the Back to Experience Manager bar along the top, which returns you to the exact hub tab you came from.


1. The action header​

Figure 2 — The action header. The subtitle carries the page name, its page type and the project.
#ControlWhat it does
1VersionsOpens the version drawer — published and manually saved snapshots.
2TemplatesApplies a starter layout over the current page. Needs Build Public Pages.
3Deep TranslateTranslates every text string on the canvas into your target languages. Writes to the draft only.
4PublishPushes the draft to the live storefront. Asks for confirmation first.
5Save DraftSaves without publishing.

The left of the bar carries a back arrow, the page title (Edit · Shopping Cart) and a subtitle giving the page name, its page type and the project — Shopping Cart · page-type CART · Optima Orbit.

The status pill​

Beside the buttons sits a pill with one of three states:

PillMeaning
DraftNever published. Nothing of this page is public yet.
LiveThe published version matches the draft.
Needs Re-PublishThe draft has changes the public page doesn't — most often after a Deep Translate. Press Publish.
Deep Translate does not publish

Translating writes to the draft and flips the page to Needs Re-Publish. A small marker appears on the button when translations have drifted out of sync. Visitors see nothing until you press Publish.


2. The four operational modes​

Figure 3 — The mode tabs, directly under the action header.
#ModeGuide
1BuilderVisual Builder mode — palette, canvas, inspector
2PreviewPreview mode — the draft rendered as a visitor sees it
3Featured Image & SEOSEO mode — social image, metadata, AI generation, audit
4Advanced JSONAdvanced JSON mode — the raw page envelope
Modes are not deep-linkable

Unlike Experience Manager's tabs, these four are internal editor state — there is no ?tab= parameter for them. You cannot bookmark "this page in SEO mode", and the browser back button does not step through mode changes. Link to the page and say which mode to open.

Builder and Preview appear only if you hold the builder permission. A user without it lands in Advanced JSON.


3. The Versions drawer​

Figure 4 — Versions.

Every publish, and every manual snapshot, is kept. The drawer lists them newest first so you can inspect what changed and roll back a bad publish.

Use it before a risky edit: publish first, so there is a known-good snapshot to return to.