This covers how to preview your changes across device sizes, save your work, and manage access when multiple people edit the theme draft.
The preview in the center of the editor is a live preview: it updates in real time as you make changes. No manual refresh needed.
The preview runs your actual storefront inside the editor, so animations, hover effects, and interactive elements behave as they would for customers.
Use the view mode controls in the toolbar to preview your store at different screen widths, or press Cmd+Option+V (Mac) / Ctrl+Alt+V (Windows) to cycle through modes
| Mode | Simulates |
|---|---|
| Desktop | Wide-screen browser |
| Tablet | Mid-size screen (landscape/portrait tablet) |
| Mobile | Smartphone screen |
Switching modes resizes the preview. Check all three to make sure your layout looks good across devices: especially after adding sections or adjusting typography.
Many customers shop on mobile. Always check the mobile preview after making layout changes.
Click Save in the toolbar to save all pending changes.
- The Save button is greyed out and unclickable when everything is saved. It becomes active as soon as there are unsaved changes.
- You can also press
Cmd+S(Mac) /Ctrl+S(Windows).
Changes are reflected on the live storefront only after saving. Previewing in the editor is safe: nothing is published until you save.
The editor tracks your full edit history. Use undo/redo to step through changes:
| Action | Mac Shortcut | Windows / Linux Shortcut |
|---|---|---|
| Undo | Cmd + Z | Ctrl + Z |
| Redo | Cmd + Y | Ctrl + Y |
Or click the Undo / Redo icons in the toolbar.
History is persisted to local storage, so you can undo changes even after refreshing the page (within the same session).
Access to the Theme Editor is controlled by two roles, assigned through your Commerce Panel team settings:
| Role | What They Can Do |
|---|---|
| Theme Collaborator | Create, edit, and delete pages and sections. Can save and work on drafts but cannot publish a theme draft as the active theme. |
| Theme Approver | Full control: create, edit, delete, and publish. Can override any active editor — including Collaborators — and take control of the theme when needed. |
Only users assigned one of these roles can access the Theme Editor.
The Theme Editor allows only one active editor per page at a time. As soon as a user opens a page in the editor, they hold the editing lock for that page. If another user tries to open the same page, they will see it as locked and cannot make edits until the current editor releases control.
The editor enforces this across four scenarios:
| Scenario | What Happens |
|---|---|
| Same user, multiple browser tabs | Only the first tab has edit access |
| Same user, multiple browser windows | Only the first window has edit access |
| Same user, multiple devices | Only the first device has edit access |
| Two different users simultaneously | The second user sees the locked state |
The editor shows a locked state indicating who holds the lock. In this state:
- The configuration panel is read-only
- The preview is visible but not editable
- AI features are disabled
If a Theme Approver finds a page locked by another user, they have two options:
- Request Access — sends a notification to the current editor asking them to release the lock. The current editor can choose to accept or ignore the request. Only this option is available to Theme Collaborator.
- Force Access — takes control of the page immediately without waiting for the current editor to respond. The current editor will lose edit access. This option is not available to Theme Collaborator.
A Theme Approver can override any active lock immediately, without waiting for the current editor to release it.
When an Approver overrides:
- The current editor receives a notification that their access is being revoked.
- They have got 60 seconds to save their work.
- After 60 seconds, the lock transfers to the Approver.
When you're done editing, closing the editor releases the lock automatically.
The editor doesn't auto-save. Changes are only saved when you explicitly click Save (or use the keyboard shortcut). Unsaved changes are visible in the preview and reflected in the save button state.
- Get Started: understand the editor layout
- Keyboard Shortcuts