Development workflow

Today: the code editor

Themes are edited in the browser, in Storefront › Themes › Edit code. The editor gives you:

• Liquid, JSON, CSS and JavaScript highlighting, with autocomplete and hover docs for every tag, filter and object (from the same reference as these docs).
• Theme check on save: syntax errors, invalid schemas and unknown setting types are shown with the file and line. The live theme refuses a save with errors; a copy keeps it and flags it.
• Preview beside the code, reloaded after each save, on any page of the store.
• History: every save is kept. Compare a file with an older version and restore it.
• Restore points: a snapshot of every file. The live theme gets one each day it changes; make your own before a big change.
• Conflict handling: if a teammate saves the same file while you edit it, you get their version to merge instead of overwriting it.
• References: before you rename or delete a file, the editor lists the templates, sections and store pages that use it.

A safe routine

1. Duplicate the live theme and work on the copy.
2. Make a restore point before large changes.
3. Check the copy with Preview in English and Arabic, on a phone width.
4. Publish the copy. The previous live theme stays in your library (up to 20 themes per store).

Upload and download

A theme can be uploaded or downloaded as a .zip in Storefront › Themes. Uploads are checked: allowed folders and file types only, at most 2,000 files, 5 MB per text file and 20 MB per asset, valid JSON and schemas, no links or executables.

Coming next: CLI and local development

A command-line tool, sooquna theme dev, will serve a theme from your computer against a store’s real data with live reload, and push and pull files. It’s planned for phase 2. Until then, keep your theme in Git and download a copy after each change.