Code Editor Overview
What the code editor is, when to use it, and a tour of the file tree, editor, and preview.
The code editor is where you edit your theme's source files directly — Liquid templates, CSS, JavaScript, configuration. It's powerful, but most stores never need it: the visual editor covers roughly 80% of what merchants want to do.
When to use the code editor
- You need a section type that no theme provides.
- You want to change CSS rules that aren't exposed as theme settings (specific spacing, custom hover behaviors, breakpoints).
- You're integrating a third-party script (analytics, chat widget) that needs to be added to the layout.
- You're debugging a rendering issue.
Opening the code editor
- Go to Themes.
- Find the theme you want to edit and open its menu (⋮) → Edit code.
- If you picked a first-party theme like Fuji, Storra automatically duplicates it into a copy you own — the original Fuji stays read-only so it can be updated by the platform without overwriting your changes. You'll edit your copy.
The three panels
Left — file tree
Every file in your theme, organized into folders. Right-click a folder for New file / New folder; right-click a file for Rename / Delete / Duplicate. Drag files to move them.
Deep dive: Theme file structure
Center — code editor
The actual editing surface. It's the same editor that powers VS Code (Monaco), with syntax highlighting for Liquid, HTML, CSS, JS, and JSON, plus autocomplete for Storra's template variables. Open multiple files in tabs across the top, switch between them, search across files with Ctrl/Cmd+F.
Right — live preview
Your storefront, rendered with the file changes you've saved. The preview re-renders when you save a file. Switch between pages using the page picker in the toolbar.
Saving
Press Ctrl/Cmd+S to save the current file. Saves run a linter that flags syntax errors and broken references. You can save broken code (useful for work-in-progress) but you can't publish a draft with errors — Publish surfaces a list of what's blocking when you try.
What you can do here
Each topic gets its own article:
- Theme file structure — what each folder is for and which file controls which page.
- Writing Liquid — variables, filters, loops, conditionals.
- Building custom sections — adding a brand-new section type that shows up in the visual editor.
- CSS & asset editing — how stylesheets, images, and JS files work.
- Version history & restore — rolling back changes when something breaks.
FAQ
Can I use TypeScript or a build step?
No — assets are served as-is, with no bundler. If you want a build-driven workflow, develop locally, compile to plain CSS/JS, and import the result via Importing a theme.
What if I break the theme so badly it won't render?
Your live storefront keeps serving the most recently published version. A broken draft never reaches customers. Either fix the issue, restore an earlier file from version history, or restore an earlier theme snapshot from Themes.
Can two stores share the same edited theme?
Export the theme as a ZIP from one store, import it into the other (see Importing a theme). Themes don't sync between stores automatically.
Updated recently