Inspect and edit storefront code

Open Runner's conditional code editor, save a focused file change, review Git changes, and avoid losing unsaved work.

The code editor lets you inspect or make a focused change to the storefront files behind the current preview. Use it only when a visual edit or Runner request is not the better fit.

What this covers

Open the conditional code editor, save one focused file change, return to Preview to verify it, and keep commit, push, and publication as separate deliberate actions.

Entry path

Open a store project → Storefront → Open code editor.

Before you start

Wait until the project workspace and storefront preview are connected.
Use the code editor only if you understand the file you intend to change.
Save each changed file before closing its tab or the dialog. Closing an unsaved file does not show a confirmation.
A saved file changes the project workspace, but it is not automatically committed, pushed, published, or proven correct in Preview.
Use Commit and Push only when you are authorized to change the project's configured Git remote.

Editor controls and click results

Control or state	What happens after you use it
Open code editor	Opens the full-height Code editor dialog. Closing the dialog returns the Storefront panel to Preview.
Files icon	Shows the searchable storefront file tree. Expanding a folder loads its contents; selecting a file opens it in a tab.
File tab	Switches the editor to that open file. An orange dot means the tab contains unsaved changes.
Close icon on a file tab	Closes that tab. Runner does not ask about unsaved changes, so save first.
Code editor	Lets you change the active file. Typing changes the open tab but does not save the file by itself.
Command-S on macOS or Control-S on Windows/Linux	Saves the active file to the connected project workspace. The orange unsaved indicator clears after success.
Git branch icon	Opens the current branch, changed-file lists, commit form, and push controls. Selecting a changed file opens its diff.
Stage / Unstage	Adds or removes one file from the next commit. It does not save an unsaved editor tab.
Stage All / Unstage All	Applies the same staging choice to every file in the corresponding list. Review the list before using either action.
Commit message	Records the explanation that will be attached to the next commit.
Commit	Creates a commit from staged files when the message is not empty. Unstaged and unsaved changes remain outside that commit.
Push	Immediately sends commits that are ahead of the configured remote. There is no second confirmation in this panel.
Refresh	Requests the latest Git status for the connected project workspace.

Make and verify one focused edit

Confirm the project name and the current storefront in Preview.
Select Open code editor.
Keep the Files view open, expand the required folder, and select one file.
Read the existing content before changing it.
Make the smallest intended edit.
Press Command-S or Control-S and confirm the orange dot disappears.
Close the code editor and review the affected page in Preview.
Check desktop and mobile layouts when the change can affect either one.
If the result is wrong, return to the editor and correct it, or ask Runner to repair the specific file and visible problem.

Saving proves only that Runner wrote the file. Preview proves only that the current project can display it. Publishing and the live customer journey remain separate checks.

Commit and push only when needed

Save every file you intend to include.
Open the Git branch view.
Select each changed file and review its diff.
Use Stage for the intended files. Avoid Stage All when unrelated changes are present.
Enter a clear Commit message.
Select Commit and wait for the Git status to refresh.
Use Push only after confirming the branch and remote workflow. The action starts immediately.
Return to Preview and verify the visible result. A successful commit or push does not publish the storefront.

Troubleshooting

State	Meaning	What to do
Open code editor is missing	The feature is not enabled for this project.	Use Design Mode or ask Runner to make the change. Do not rely on a copied internal route.
Connecting to sandbox...	The project workspace is not connected yet.	Keep the project open and retry after the workspace reconnects.
File-tree spinner	Runner is loading the current folder.	Wait before selecting another folder repeatedly.
Selecting a file does nothing	The file could not be read or the workspace disconnected.	Check the connection, then select the file once more.
Orange dot remains after save	The file was not saved successfully.	Keep the tab open, read the error message, and retry after reconnecting if necessary.
Open a file from the tree	No file is active.	Select a file in the Files view.
No changes	Git does not report saved file changes.	Save the editor tab, then select Refresh.
Commit is disabled	No staged file or no commit message is present.	Stage the intended saved file and enter a message.
Push is disabled	The branch has no local commit ahead of the remote, or a push is running.	Commit the intended change or wait for the current push.
Failed to load git status	Runner could not read the repository state.	Select Retry. Do not stage or push until the status loads.
Down-arrow count shows the branch is behind	The remote contains commits not present in the workspace.	Stop before pushing and ask the project owner how to update the branch safely.
Save, stage, commit, or push error	The action did not complete.	Keep the current state, read the error, and retry only after checking connection and permission.

Inspect and edit storefront code

On This Page