Editing theme code

The code editor lets you edit your theme’s raw files — Liquid, CSS, JavaScript, JSON config, locales, and assets — instead of (or alongside) the drag-and-drop visual editor. It’s a full in-browser editor with a file tree, syntax highlighting, multi-tab editing, per-file revision history, and the same draft-then-publish model as the rest of the theme tools.

Open Online store → Themes, then choose Edit code on any theme to launch it.

Caution

Editing code changes your theme’s draft. Nothing reaches customers until you Publish. Edits are scoped to the theme you opened — published versions are immutable snapshots and are never altered by editing the draft.

The editor layout

The code editor has three parts:

• File tree (left) — every file in the draft, grouped by folder: Layout, Templates, Sections, Blocks, Snippets, Assets, Config, and Locales. Each folder shows a file count, and a Search files box at the top filters the tree as you type.
• Editor (center) — open files appear as tabs. The active file opens in a Monaco code pane with syntax highlighting for Liquid, CSS, JavaScript, JSON, and SVG. An orange dot on a tab marks unsaved changes.
• Top bar — the theme name, a Draft / Published snapshot badge, a status line (Draft saved, file path, and which version you’re viewing), the version picker, and the Preview, Visual editor, Delete, and Publish actions.

Each open file keeps its own buffer, so you can switch between tabs without losing unsaved work in any of them. If you try to leave the page or close a tab with unsaved edits, you’re warned first.

Opening and editing a file

1. In the file tree, expand a folder (for example Sections) and click a file. It opens in a new tab and loads in the editor.

2. Edit the contents. The tab shows an orange dot and the top bar flips to Unsaved changes while a file is dirty.

3. Press Save — the button on the tab strip, or Ctrl/Cmd + S. JSON files are auto-formatted on save. The badge returns to All changes saved and a File saved toast confirms it.

Note

Binary assets (images, fonts, PDFs) can’t be edited as text. When you open one, the editor shows This file is not editable as text with an Open asset button that opens the file in a new tab. To replace it, upload a new version from the file tree (see below).

Reloading a file

If you want to throw away local edits and reload the last saved draft of the active file, use Current version in the top bar. If the file has unsaved changes, you’re asked to confirm — reloading discards those edits.

Creating a new file

Each editable folder in the tree has a + (Create file) button. The exact dialog depends on the folder, but they all generate the correct path for you.

Code files

For Layout, Templates, Sections, Blocks, Snippets, and Locales, the + opens a create dialog where you enter a name and (where relevant) pick a format.

1. Click + on the folder, for example Sections.

2. Choose the file format — Liquid or JSON for sections — and enter a name. Use lowercase letters, numbers, hyphens, and underscores only.

3. The dialog previews the path it will create (for example sections/hero.liquid). Choose Create, and the new file opens in the tree ready to edit.

Creating a template also asks for the template type (Product, Collection, Page, and so on), and — for a metaobject template — a subtype. Add an optional suffix to make an alternate template such as templates/product.bold.json.

Assets

The Assets folder’s + opens Add asset with two tabs:

• Upload binary asset — drag in or pick an image, font, or PDF (up to 20 MB). Supported types include PNG, JPG, GIF, WebP, WOFF/WOFF2, TTF/OTF/EOT, and PDF. Uploading a file that already exists at that path safely replaces it.
• Create blank asset — generate an empty CSS, CSS.liquid, JavaScript, JS.liquid, or SVG file to edit as text.

Note

The Config folder is system-managed — you can edit settings_data.json and settings_schema.json in place, but the folder has no + button because those files are created and managed for you.

Deleting a file

Open the file, then choose Delete in the top bar and confirm. This removes the file from the current draft only — published versions still contain it. Protected/system files can’t be deleted (the Delete button is disabled for them).

File history and restoring a revision

Every time you save a text file, the editor keeps a revision. With a text file open in the draft, a File history strip appears below the editor listing recent revisions as time-ago buttons (newest first), each with a tooltip showing the exact timestamp.

1. Click a revision button to load that historical content into the editor. The top bar shows a Viewing old revision badge and the pane becomes read-only — you’re inspecting, not editing.

2. To keep that old content, choose Restore to draft and confirm. The selected revision becomes the new draft content for the file (and a fresh revision is recorded).

3. To go back to the live draft without restoring, choose Return to latest draft.

Tip

Restoring a revision doesn’t touch other files — it’s a per-file undo. If you need to roll back the whole theme, use a published version instead (below).

Browsing published snapshots

The version picker in the top bar (the clock button) lets you switch what the editor is showing. It lists Current draft plus every published version (V1, V2, … with any release label and publish date).

Choosing a published version opens it as a read-only snapshot. A banner reads You are browsing a published snapshot, the file tree disables create/rename/delete, and you can open any file to inspect exactly what shipped in that version — but you can’t edit it in place. Switch back via Current draft at any time.

You can also reach a snapshot straight from Online store → Themes: expand View versions on a theme and choose Browse on any version.

Starting a draft from a version

To make an old published version editable again, copy it into the draft.

1. While browsing a published snapshot, choose Start draft from this version in the top bar.

2. Confirm the replace. Every file from that version is copied into the draft, overwriting your current draft changes.

3. The editor returns to the draft view, now matching the chosen version, ready to edit and re-publish.

The Themes page offers the same thing as Use as draft under View versions — it opens the editor and prompts you to replace the draft with that version.

Caution

Starting a draft from a version is destructive to the current draft (not to any published version). If your draft has work you want to keep, publish or note it first — the copy overwrites every draft file.

Publishing with a label

Publishing turns your saved draft into a new live version.

1. Save every open file you want included — only saved draft content is published.

2. Choose Publish in the top bar. In the Publish theme dialog, optionally enter a Release label (for example Summer update) to identify the snapshot later.

3. Choose Publish. A new live version is created from the current draft and the storefront switches to it. The draft stays editable.

Published versions are immutable and numbered, so you can always roll back. To revert the live store to an earlier version, open Online store → Themes, expand View versions, and choose Make live (or Set live) on the version you want — see Manage themes.

Note

You can’t publish while browsing a published snapshot — return to the draft first. The dialog tells you when the draft revision isn’t ready (refresh the editor and try again).

Editing in two places at once

The draft is shared across the code editor, the visual editor, and other browser tabs. If the same draft is changed elsewhere after you opened the editor, a save can be rejected to protect the newer content. Reload the editor to pick up the latest draft, then re-apply your change. Avoid editing the same file in two tabs at once.

Troubleshooting

• Save failed / “draft revision” error. The draft changed elsewhere (another tab, the visual editor, or a teammate). Reload the editor and re-apply your edit.
• I’m viewing file history and can’t type. You loaded an old revision, which is read-only. Choose Restore to draft to make it editable, or Return to latest draft.
• Delete is disabled. The file is protected/system-managed, or you’re browsing a published snapshot, or you’re viewing an old revision — return to the current draft first.
• Can’t edit a file. It’s a binary asset (image, font, PDF). Use Open asset to view it, or upload a replacement from the Assets folder.
• Publish button is missing or disabled. You’re browsing a published snapshot (return to the draft), or the draft revision isn’t ready yet — refresh the editor.
• My change isn’t live. Publishing ships only saved files. Save first, confirm All changes saved, then Publish.

Next steps

Themes & the visual editor

Edit visually with sections and blocks in Themes & the visual editor.

Manage themes

The full library, versions, and rollback in Manage themes.

Alternate templates

Give products, collections, or pages their own layout with alternate templates.

Theme architecture

How files fit together in theme architecture.

Related: Import a theme ZIP · Liquid objects · Section schema · Setting types