Developer theme editor with live storefront code mode

A storefront workbench for developers

The visual builder is the fastest way to shape a storefront. Enterprise teams often need another layer as well: a place to inspect the theme as source, make deliberate changes, and keep the live storefront close by while they work.

Stoify Code mode adds that layer without creating a second rendering system. Open the builder in developer mode and work through a familiar file tree for theme settings, navigation, footer configuration, page templates, and scoped custom CSS.

Familiar files, controlled runtime

The editor exposes a fixed virtual filesystem rather than arbitrary executable code. JSON files map to the same normalized theme and builder configuration used by the visual editor. The CSS file is applied to the storefront theme root, with unsafe imports and script-like rules rejected before save.

That boundary gives developers useful source access while keeping products, orders, checkout, customer data, and server code outside the theme surface.

See the storefront while you edit

The workbench places the file tree, editor, and live preview side by side. Open files in Chrome-like tabs, close the ones you are not using, jump to a file with quick open, and format JSON or CSS when a change is ready for review.

Each builder root can also expose a custom CSS class hook. Add classes such as hero-banner or campaign-grid in the visual inspector, then target them from styles/custom.css:

.hero-banner {
    min-height: 42rem;
}

Download the active source file for review or import a replacement JSON/CSS file into the selected virtual file. Imports are validated locally and remain unsaved until the developer explicitly saves the theme.

Valid changes flow into the existing preview session. Invalid JSON stays in the editor, shows a diagnostic, and leaves the last valid preview state in place. That makes experimentation safer without making the editor feel slow.

Visual and code modes share one theme

Code mode is an extension of the visual builder, not a parallel product. Both surfaces use the same theme tokens, responsive templates, history controls, preview routes, save actions, and storefront renderer. A visual save updates the corresponding source file, and a code save updates the normalized runtime configuration.

Developer theme editing is available on the Enterprise plan. Read the launch story in Developer access without a second storefront runtime.