Code editor

Open it from Online Store › Themes › Code editor for your live theme, or from Edit code in a library theme’s ⋯ menu for that theme. It opens in its own window and fills it. A bar under the top says when you are editing an unpublished theme. On a computer the editor is the same one many developers know from Visual Studio Code.

The layout

• The search box at the top centre: type a file’s name to open it, or start with a prefix to search inside files or run a command.
• The activity bar on the left: Explorer (your theme’s folders and files), Search (find and replace across files) and Store (the live preview of your store). The settings are at its foot.
• The editor in the middle, with tabs. On a tab: Save, Split (a second editor beside it) and More.
• The status bar along the foot: errors and warnings, the cursor’s line and column, the file’s language, whether Liquid help is on, whether the file is saved, and Report a bug.

Liquid help

In theme files you get completion as you type, documentation when you hover over a tag, filter or object, problems underlined while you type, and links that open the file they name (or press F12).

Files

Right-click a file or folder to rename, upload, download, copy its path or find in the folder. Below the files: the open file’s Outline, its Time travel (every saved version of your live theme, to compare or restore; other themes in your library are left out), References and Dependencies.

Saving

Save checks the file and publishes it as a new version of your theme. In an unpublished theme, Save keeps the change in that theme alone: your store does not change until you publish it from Themes, and designers may save there. A save that fails changes nothing. A file with problems that would break the store is refused with the reason. A design a running or paused A/B test shows cannot be deleted or renamed until the test ends. If you leave with unsaved files, Storeloom asks whether to Save changes or Discard changes.

Your store shares its servers with other stores, so a theme also has limits on what it asks of them. Save refuses:

• a file with more than 25,000 Liquid parts (tags, outputs and the words and values in them), or a theme with more than 150,000 in all. The default theme has about 45,000.
• a section that places itself, or a snippet that renders itself with no condition such as {% if %} around it: they would never end. A snippet that renders itself inside a condition (a menu showing its own sub-menus) is fine; snippets, sections and blocks can sit inside one another up to 20 deep.
• a theme whose pages together take more than 20 seconds to show with sample content.

A stylesheet in assets reaches each page cut to the rules that page uses, inside the page, so a long stylesheet does not slow your store down. One that uses @import or image-set(), or nests groups such as @media more than 16 deep, is sent whole.

The assistant

The Assistant panel can explain a file or make a change you describe; you review the change before it is saved. It works on your live theme, so it is not offered while you edit an unpublished theme.