Skip to main content
Version: next

Using the CMS

Edit your pages in the CMS Studio: build a page from sections, check it on any device, add images, and publish.

Before you start​

Editing happens in contribution mode. Make sure it is enabled for your session — otherwise the Studio is unavailable (it answers a not found page). See the contribution mode guide.

Open the Studio​

The Studio is a dedicated screen at /admin/cms/studio. Two ways get you there:

  • On any CMS page, open the Editorial Toolbox and click Edit this page in the Studio (in the CMS group). The Studio opens on that page.
  • Click Manage pages in the same group to open the Studio on its page list, then pick a page.

The URL of the Studio mirrors the page it edits (/admin/cms/studio/<page-uri>), so it can be bookmarked or shared with another contributor. The X-Ray edit link of a CMS page opens it too.

Find your way around​

The Studio has three columns and a top bar:

  • Structure (left) lists the sections of the page in order. Each row is named after what the section says (its title, its first text, or the product or category it is bound to), with the section type underneath, so ten product cards read as ten different rows. A bound entity shows its key ("Product 17") until you open the section once. Click a section to select it, drag it by its handle to move it, or use the keyboard: Alt + ↑/↓ moves the focused section, Enter selects it, Delete removes it after a confirmation, Ctrl/Cmd + D duplicates it, and → reaches the row's duplicate and delete buttons. Hovering a row highlights the section in the preview, and the other way around. The Pages tab of the same column lists every page: open one, create a new page, duplicate or delete one.
  • Preview (centre) is your storefront page, exactly as shoppers see it. Click a section there to select it. Links are inert in the preview so you stay on the page you are editing.
  • Inspector (right) edits the selected section in three tabs: Content (the section's own fields), Style (background, spacing) and Advanced (visibility per device). When nothing is selected, it shows the page settings instead.

The top bar carries the page name and its status pill, the device picker, undo/redo, the unpublished-changes indicator and the Publish button.

Build the page​

  • Add a section — click Add a section at the bottom of the structure. The palette replaces the list: search a section type or browse by category, then pick one. The new section is inserted after the selected section (or at the end) and selected right away.
  • Edit a section — select it, then use the inspector tabs. Edits show in the preview as you type. Rich text fields have an HTML source button (</>): edit or paste HTML, then apply it. The editor keeps only what it can render and tells you when it dropped something; Escape leaves the source without applying.
  • Reorder, duplicate or remove — from the structure rows (drag handle, hover actions) or with the keyboard shortcuts above.

Undo and redo cover every section edit with the usual shortcuts (Ctrl/Cmd+Z and Shift+Ctrl/Cmd+Z). Escape closes the palette or deselects the section.

Check the page on any device​

The device picker in the top bar sizes the preview frame:

  • Responsive fills the canvas.
  • Named presets (phones, tablets, laptops, desktops) apply a known viewport; the rotate button swaps width and height.
  • Type any width or height for a custom size.
  • Random widths changes the width every few seconds so every breakpoint of your theme gets exercised. Picking a preset or typing a size stops it.

The current size shows in the status bar and, while the frame resizes, on the frame itself.

Add images​

Fields that accept an image open the media library, where you can browse folders, upload new files, and pick an image to insert — see Manage media. Selected images are served from your CMS backend, so they are available on the published page.

Edit the page settings​

Deselect any section (Escape, or the inspector's close button) and the inspector shows the page-level metadata:

  • Title — the page name.
  • Status — Published or Draft, controlling whether the page is visible.
  • URL — the address the page is served at.
  • Title tag and Meta description — the SEO metadata.

It also shows the read-only creation and last-modified dates.

Like section edits, changes made here are tracked as unpublished changes and go live when you publish — there is no separate save button.

Publish​

While you have unpublished changes, the Publish button is enabled (Ctrl/Cmd + Shift + P also works). Click it to make your changes live on the storefront. A confirmation appears, and the button is disabled again once everything is published. Leaving the Studio with unpublished changes asks for a confirmation, since they are not stored anywhere else.

Each page is served at a URI and has a visibility flag. If a page's URI changes, the previous URI keeps working and redirects to the new one, so existing links and search-engine results don't break.

Next​