Use Design Mode

Entry path: Workspace → select a store → Storefront → Design Mode

Runner storefront preview and controls

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 Storefront.
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.

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, 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.
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.
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.
Iframe is still loading	Element inspection is not ready.	Wait for the storefront to finish loading.
Visual editor disabled while AI is 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.
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.
Saved changes to source files	Runner completed the Design Mode save.	Wait for the preview to reload, then review the changed page 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.

On This Page