Using the Code Editor

The code editor lets you view and edit every file in your active theme directly from the Cartly admin. No FTP, no external tools required.

Opening the editor

Go to Online Store → Themes.
Click your active theme, then click Edit Code.

File tree

The left panel shows all theme files organized into folders: layouts/, templates/, sections/, snippets/, assets/, config/, and locales/. Each file has a badge:

Synced — stock platform file, read-only until you fork it.
Custom — your edited version. Fully editable.
New — a file you created.

Use the filter chips (All / Modified / Synced) at the top of the tree to focus on just your customizations.

Editing a file

Click a Custom or New file to open it directly.
Click a Synced file — it opens read-only. Click Edit file or press ⌘E to fork it and start editing.
Press ⌘S (Mac) or Ctrl+S (Windows) to save changes.

Keyboard shortcuts

Shortcut	Action
`⌘S` / `Ctrl+S`	Save current file
`⌘E` / `Ctrl+E`	Fork the active Synced file (opens edit mode)
`⌘F` / `Ctrl+F`	Find in current file

Preview button

Click Preview in the top toolbar to open your storefront in a new browser tab. The preview reflects the current state of all saved files. Preview links expire after 15 minutes.

Creating a new file

Click the + icon in the file tree header.
Choose a file type: Section (generates a working scaffold), Snippet, Asset, or other.
Enter a file name and click Create.
The new file opens immediately and is ready to edit.

Deleting a file

Right-click a Custom or New file and choose Delete. Deleting a Custom file reverts it to the stock platform version (Synced). Deleting a New file removes it entirely.