The editor window

The editor opens with a lot on screen at once. This page names the parts, so that every guide after it can say "open the Elements panel" and you know where to look.

Four areas

The rail on the left is a column of icons, always visible. Each entry opens a flyout beside it:

Entry	vi	What it holds
Templates	Mẫu	Prebuilt sections you drag straight onto the page
Elements	Phần tử	The palette — text, images, buttons, containers, product lists…
Store	Cửa hàng	Elements that pull from your catalogue
Layer	Lớp	The tree of elements on this page
Pages	Trang	The site's pages, and where you create one
Assign	Gán trang	Assigns a template page to a content type (only shown when the current page is that kind)
Settings	Cài đặt	Settings that apply to every page on the site
Shortcuts	Phím tắt	The keyboard shortcut list
Manage store	Quản lý cửa hàng	Switches to the Manage screens

Press an open entry again to close its flyout — the × is inside the thing being closed, and the rail entry is always there.

The canvas in the middle is your page. It is not a mock-up: this is the real renderer, the same one that produces the HTML when you publish.

The inspector on the right shows the selected element's options. With nothing selected, it shows this page's settings.

The breakpoint bar at the top switches between four widths: Desktop, Laptop, Tablet, Mobile. Changing breakpoint is not zooming — it changes which size you are editing, and most properties are stored per size. Details in Styling for phones.

Save, Preview and Publish are three different things

This is the most common confusion, so plainly:

Save records your draft. Nobody visiting the store sees any change. The editor reports "Changes saved".

Preview opens the saved page on the real storefront address, without publishing. This is how you look at a draft exactly as a shopper would.

Publish puts it live for everyone.

Publishing touches the whole site, not just the page you have open. The dialog says exactly that: "Publishing updates all {n} pages on this site, not only this one." That is deliberate — a header edited once must not be fresh on this page and stale on the rest — but it means any half-finished drafts saved on other pages go live too. Check before you press it.

After publishing, the dialog hands you the public link, with Copy link and Open page.

When a page refuses to save

Occasionally you get "This page can't be saved as it is" with a reason. All three reasons name the fix:

Message	Means
A global header has to stay at the top, a global footer at the bottom	You dragged a global section out of its band. Move it back.
A global section can only sit at the top level	You nested it inside another section. Pull it out.
This page has the same global section on it twice	Remove one of them.

These are fixable refusals, and the page says so rather than silently dropping your work. See Global sections.

Keyboard shortcuts

The full list is under Shortcuts on the rail. The ones you will use:

Action	Keys
Undo	⌘ Z
Redo	⇧ ⌘ Z
Show/hide the inspector	⌘ \
Select parent element	⌘ ↑
Deselect	Esc
Move element	↑ ↓ ← →
Duplicate	⌘ D
Copy / Cut / Paste	⌘ C · ⌘ X · ⌘ V
Delete	Del

On Windows and Linux, press Ctrl where it says ⌘. The interface shows ⌘ on every platform, but the handler accepts Ctrl as well. This is something the interface does not currently tell you, and it lives here until it does.

The arrows move an element along its container's axis: ← → when things sit in a row, ↑ ↓ when they stack.

Site settings — the whole site, not this page

The rail's Settings entry opens a dialog with two tabs, and both affect every page:

• Font — the site's default font when published, chosen from Google Fonts or from font files you upload yourself. Elements with their own font keep it.
• Custom code — your own CSS and JavaScript, injected on every page.

Do not confuse it with the inspector when nothing is selected — that one is this page's settings.

While the editor is loading

The editor shows a skeleton and counts the parts as they arrive: translations, your page, the page list, settings, theme, fonts, products. If something fails to load, it names it and lets you carry on:

"Some parts didn't load: … The editor still works — reload to try again."

An editor that opens without its font list beats a blank screen, so it opens and tells you honestly what is missing.