Theme Code Editor

The built-in Code Editor lets you modify every file in your Liquid theme directly from the Cartly admin panel — no external tools or FTP required.

Opening the Code Editor

Navigate to Admin → Online Store → Themes.
Click on the theme you want to edit.
Click the Edit Code button to launch the editor.

File Tree Navigation

The left panel displays the theme's file tree organized by folder: layouts/, templates/, sections/, snippets/, assets/, and config/. Click any file to open it in the editor pane. You can create new files or delete existing ones using the context menu.

Monaco Editor Features

The Code Editor is powered by Monaco — the same editor engine used in VS Code. Key features include:

Liquid syntax highlighting — Tags ({% %}), objects ({{ }}), and filters are color-coded for readability.
JSON validation — Schema files (settings_schema.json, settings_data.json) are validated in real time with inline error markers.
CSS and JavaScript support — Full syntax highlighting and auto-completion for stylesheet and script files in the assets/ folder.
Search and replace — Use Ctrl+F (Cmd+F on Mac) to find text within the current file.
Minimap — A miniature overview of the file on the right side for quick navigation in large files.

Saving Changes

Press Ctrl+S (Cmd+S on Mac) to save. An auto-save indicator in the toolbar shows the save status. Files are saved directly to the theme on the server.

Editing Sections: The Schema Block

Section files (sections/*.liquid) contain a special {% schema %} block at the bottom of the file. This JSON block defines the section's configurable settings that appear in the Visual Editor sidebar. For example:

<div class="hero" style="background: {{ section.settings.background_color }}">
  <h1>{{ section.settings.heading }}</h1>
</div>

{%- schema -%}
{
  "name": "Hero Banner",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Welcome to our store"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#ffffff"
    }
  ]
}
{%- endschema -%}

When you edit the {% schema %} block, the corresponding settings panel in the Visual Editor updates automatically.

Important: Changes Apply Immediately

Warning: If you are editing the currently published theme, every save in the Code Editor is reflected on the live storefront immediately. To avoid disrupting your customers, we recommend duplicating the theme first, editing the copy, and publishing it only when you are satisfied with the changes.