# Editor en el panel

Todo lo del tema en código está en **Personalización > Tema en código** en el
panel, en [app.hystore.com.br](https://app.hystore.com.br).

## La pantalla Tema en código

- Lo que está en el aire (versión y fecha), el número del borrador, los
  archivos nuevos, cambiados o quitados, y los errores y avisos del tema.
- *Publicar ahora*, *Pedidos de publicación* (aprobar o rechazar lo que
  pidieron la herramienta y la API) y *Versiones publicadas* (restaurar una en
  el borrador).
- Empezar por un tema listo (Base, Aurora, Celeste o Prisma) en una tienda sin
  tema, y *Reemplazar el borrador por un tema listo* después.
- *Imágenes y fuentes del tema*: envía PNG, JPEG, WebP, GIF, AVIF de hasta
  3 MB y WOFF, WOFF2 de hasta 1 MB (revisados por su contenido; SVG no
  entra), hasta 100 archivos y 40 MB.
- *En la tienda*: *Usar el tema en la tienda* cuando haya una versión
  publicada.

## Editor

*Abrir el editor* abre un editor a pantalla completa:

- los archivos del tema a la izquierda: crear un archivo en una carpeta (en
  blanco o el mismo archivo del tema Base), renombrar, borrar;
- pestañas, código con colores, autocompletado de tags, filtros, variables y
  bloques, y lo que hace cada uno al pasar el mouse;
- *Guardar* o Ctrl+S escribe en el borrador y recarga la vista previa; un
  archivo con error no se guarda y el error aparece en su línea;
- si el archivo cambió en otro lugar, eliges entre la versión guardada y la
  tuya;
- *Diferencia* compara el archivo con lo que está en el aire, e *Historial*
  con cualquier versión publicada, que puede volver a la pestaña;
- las imágenes y fuentes arrastradas al código se envían y el código para
  usarlas se escribe donde cayeron;
- la vista previa, al lado en tamaño de computadora, tableta o celular, es la
  propia tienda en un enlace de 24 horas;
- en la carpeta `apps`, el **+** crea una [app aislada](/es/code-theme/apps/)
  con `index.html`, `app.js` y `app.json` de una vez.

Quien solo tiene *Ver el tema* lo abre en modo de solo lectura.

## Personalizar tema

*Personalizar tema* cambia el tema sin código, con la vista previa al lado:

- **Configuración del tema**: los campos del `theme.json` (colores, textos,
  imágenes, encender y apagar);
- **Secciones de la página**: en cada página, subir y bajar secciones,
  ocultar, quitar, agregar una sección que tiene el tema y editar sus campos.

*Guardar* escribe `config/values.json` y `templates/<página>.json` en el
borrador; la tienda cambia cuando se publica. Si el tema cambió en otro lugar
mientras la pantalla estaba abierta, no se escribe nada y la pantalla carga la
versión guardada.