Code Editor

El code editor permite editar los archivos fuente del tema directamente desde el panel admin, estilo Shopify. Accede desde Apariencia → Code Editor.

Acceso

/admin/themes/code

Árbol de archivos

El panel izquierdo muestra el árbol de archivos del tema activo:

dawn/
├── config/
│   ├── settings_schema.json
│   └── settings_data.json
├── sections/
│   ├── hero.html
│   ├── banner.html
│   ├── slideshow.html
│   └── ...
├── snippets/
│   ├── product-card.html
│   ├── breadcrumb.html
│   └── ...
├── templates/
│   ├── index.html
│   ├── product.html
│   └── ...
├── locales/
│   ├── es.json
│   └── en.json
└── assets/
    ├── theme.css
    └── theme.js

Extensiones editables

Extensión	Descripción
.html	Templates Go y Liquid
.liquid	Templates Liquid explícitos
.css	Hojas de estilo
.js	JavaScript
.json	Configuración, locales, templates JSON
.txt	Archivos de texto
.svg	Iconos SVG
.md	Markdown

Directorios bloqueados

Los siguientes directorios no son editables desde el code editor:

• _platform/ — Addons compartidos
• _base/ — Secciones heredadas
• _tenants/ — Overrides de otros tenants

Estos se excluyen intencionalmente para evitar que un merchant rompa la base compartida.

CRUD de archivos

Acción	Endpoint	Descripción
Leer	/admin/themes/templates/*	Retorna el contenido del archivo
Crear	POST	Nuevo archivo en el tema
Editar	PUT	Actualiza el contenido
Eliminar	DELETE	Borra el archivo
Renombrar	POST	Cambia el nombre del archivo

Guardado como overrides

Cuando un merchant edita un archivo, no se modifica el archivo original del tema. En su lugar, se guarda como override del tenant en GCS:

themes/tenants/<tenant_id>/<theme_name>/overrides/<path>

Por ejemplo, si editas dawn/sections/hero.html, se guarda como:

themes/tenants/abc-123/dawn/overrides/sections/hero.html

Preview del code editor

El preview del code editor usa OpenPreview() del TenantThemeSource, que aplica los overrides de draft encima del tema publicado. Los cambios se ven inmediatamente en el iframe.

AI Edit

Cada sección tiene un botón de AI Edit (/admin/themes/sections/:id/ai-edit) que permite editar el código de la sección con asistencia de IA.

Templates JSON

Los archivos .json en templates/ definen layouts de secciones (sections-everywhere). Ejemplo:

{
  "sections": {
    "hero-abc123": {
      "type": "hero",
      "settings": { "variant_id": "full-bleed" }
    },
    "featured-def456": {
      "type": "featured_products",
      "settings": { "source": "collection" }
    }
  },
  "order": ["hero-abc123", "featured-def456"]
}

Buenas prácticas

• No editar _base/ ni _platform/ desde el code editor — están bloqueados por una razón
• Usar snippets para código reutilizado — crear en snippets/ y renderizar con {% render "nombre" %}
• Preview antes de publicar — siempre verificar que el template compila sin errores
• Separar CSS y JS — mantener estilos en assets/theme.css y lógica en assets/theme.js