Use Design Mode

Select storefront elements and use Runner's visual editing controls safely.

Entry path: Workspace → select a store → Online Store → Design Mode

What this covers

Open Design Mode on the latest storefront version, select one visible element, make a controlled change, and save it as part of the current project.

Why and when to use Design Mode

Use Design Mode for focused visual changes that are easier to point at than describe from scratch: rewrite a heading, replace an image, adjust spacing, change typography, or remove a visible element.

Use Runner chat for broader work that spans several pages, changes store behavior, or requires new functionality.

Availability and prerequisites

Design Mode is conditional. It is available when:

you are using a desktop layout;
the latest storefront version is ready and selected;
you are not previewing an older version;
Runner is not currently processing another request; and
the Design Mode feature is enabled for the workspace.

If the preview is still preparing, a historical version is selected, or Runner is working, the button can be hidden or disabled.

Open Design Mode

Open your project.
Select Online Store.
Make sure the version label says Current and the preview is ready.
Select Design Mode in the storefront toolbar.
If a bottom editing bar appears with another Design Mode control, select it to enable element selection.
Move over the storefront and select the element you want to change.

English annotations: Design Mode open on the Quiet Mornings storefront before element selection

English callouts highlight the controls. Select the image to enlarge it.

Design Mode is open, but no element is selected yet. Select the element you want to change to reveal its available controls; the screenshot does not show an edit or save.

Design Mode controls

Control	Why you use it	What happens when you select it
Design Mode in the storefront toolbar	Enter the dedicated editing view.	Runner opens the current storefront in the design panel.
Design Mode in the bottom bar	Turn element inspection on or off.	When on, selectable elements are outlined and selecting one opens its editing bar. Turning it off clears the current editing session.
Ask Runner AI field and send arrow	Describe a change for the selected element.	Runner receives the instruction with the selected element. When Runner starts, it clears the selection and resets unsaved direct edits and their undo/redo history, so save any pending direct edits before sending.
Spacing	Change the space inside or around the element.	A panel opens for horizontal and vertical margin and padding.
Image	Replace a selected image or background image.	A panel opens with Upload and AI-generated options when that element supports media editing.
Text	Change type styling.	A panel opens for font size, weight, family, color, opacity, and alignment when supported.
Delete Element	Remove the selected element from the current edit.	The element disappears immediately in the editor. Use Undo if this was accidental, and review before saving.
Undo	Reverse the latest unsaved visual edit.	Runner steps backward through the current Design Mode edit history.
Redo	Reapply an edit you just undid.	Runner steps forward through the current Design Mode edit history.
Save	Keep the current visual edits.	Runner writes the pending changes into the latest version of each file, so a change that a Runner task made to the same file is kept. While the save runs, a Runner AI task waits for it to finish, even one started in another tab. Runner records a new version snapshot when possible, clears this session’s undo/redo history, and reloads the preview. The button is disabled when there is nothing to save, and while an earlier save is still running. If Runner AI is editing your store, Save tells you so and keeps your edits.
Close	Leave the dedicated design panel.	Runner returns to normal storefront preview and clears unsaved edits and command history. Save first if you want to keep the changes.

Make a safe visual change

Navigate to the target page in normal Preview before opening Design Mode.
Enter Design Mode and select one element.
Choose one path for this change:
- For a direct edit, use Spacing, Image, Text, or Delete Element, then review it with Undo or Redo and select Save.
- For an AI request, save any pending direct edits first, reselect the element if needed, enter the instruction in Ask Runner AI, and send it. When Runner starts, the selection and unsaved direct-edit history are cleared.
Wait for the chosen save or Runner request to finish, then review the page in normal Preview.
Check the page again in PC, Pad, and Phone layouts. Confirm the saved heading, image, or spacing is still present after the preview reloads.
Publish only after the saved preview passes your review.

States, limits, and troubleshooting

What you see	Meaning	What to do
Starting design mode…	Runner is preparing the editable preview.	Keep the latest version selected.
Design mode didn’t start	The editable preview did not become ready.	Select Try Again. If it repeats, return to normal Preview and refresh.
Your preview is still loading.	Element inspection is not ready.	Wait for the storefront to finish loading.
You can edit visually again once Runner finishes processing.	Runner is handling another request.	Wait for the request to finish, then select the element again.
Runner starts after an Ask Runner AI request	The visual editor resets for the new task.	Any unsaved direct edits and their undo/redo history are discarded. Save direct edits before sending the request.
The preview reloaded, so your unsaved design changes were discarded.	The storefront preview reloaded before your edits were saved. This happens, for example, after the store wakes up from sleep, when a save fails after the preview reloaded or after Design Mode was closed and reopened, and when Runner starts a task while you are still typing text on the page. The reloaded page shows only saved changes, so Runner cleared the unsaved edits and their undo/redo history.	Make the edits again, then select Save.
AI editing not available for dynamic content	The selected content cannot be changed through that control.	Describe the page and desired result in regular Runner chat.
Nothing to undo / redo / save	The current Design Mode session has no matching action.	Select an editable element and make a change first.
You can save again once your previous save finishes.	An earlier save is still writing your store’s files, for example because you closed and reopened Design Mode while it ran.	Wait for the earlier save to finish. If the preview then reloads and discards your newer edits, make them again, then select Save.
Another Design Mode save is running. Save again when it finishes.	A save from another tab, another device, or a teammate is writing your store’s files. A tab that was closed during its save holds the store for up to 30 seconds. Your edits stay in the editor.	Wait a moment, then select Save again.
Runner AI is editing your store. Save again when it finishes.	A Runner AI task is changing your store’s files, for example one you started in another tab, on another device, or from a chat app. Runner did not save, so the task cannot overwrite your edits. Your edits stay in the editor.	Wait for the task to finish, then select Save again.
Runner is restoring or updating your store. Save again when it finishes.	A version restore or another store update is running. Your edits stay in the editor.	Wait for it to finish, then select Save again.
Saved changes to source files	Runner completed the Design Mode save.	Wait for the preview to reload, then review the changed page again.
We couldn’t save your design changes	Runner could not write one or more edits to your store’s files, for example because the save lost its hold on your store after a long pause. Those edits stay in the editor, and Save stays available. Edits that did save stay saved. If the preview reloaded during the save, the edits that failed are discarded instead, and the reload notice above follows.	Select Save again. If it keeps failing, undo that edit or describe the change in Runner chat. After the reload notice, make the edits again.
The edit is saved but not live	Saving changes updates the project, not the published storefront.	Review the current version, then select Publish Changes.