# Tema en código

Un tema en código dibuja la vitrina de tu tienda a partir de archivos que tú
escribes: Liquid para las páginas, CSS para el aspecto y JSON para
configuraciones y textos. Va más allá del constructor de arrastrar y soltar:
cualquier diseño, tus propias secciones y componentes, en todas las páginas de
la tienda, y hasta pequeñas apps con JavaScript en un espacio aislado.

## Por dónde empezar

| Quieres | Empieza por |
|---|---|
| Entender el camino completo, de cero a la tienda en el aire | [Primeros pasos](/es/code-theme/start/) |
| Pedirle a Claude, Cursor u otra IA que cambie la tienda | [Conectar la IA (MCP)](/es/code-theme/mcp/) |
| Editar en tu computadora, con git y tu IA | [Herramienta hystore](/es/code-theme/cli/) |
| Editar sin instalar nada | [Editor en el panel](/es/code-theme/editor/) |
| Copiar un banner, una vitrina de productos, una cuenta regresiva | [Ejemplos listos](/es/code-theme/examples/) |
| Poner una ruleta, una calculadora o un mini juego | [Apps aisladas](/es/code-theme/apps/) |
| Integrar con tu sistema o CI | [API del tema](/es/code-theme/api/) |

## Cuatro formas de editar

- **En el panel**: Personalización > Tema en código > *Abrir el editor*. Código
  con autocompletado y revisión, vista previa al lado. [Editor en el panel](/es/code-theme/editor/)
- **En tu computadora, con tu IA**: `npx @hystudios/hystore theme pull` descarga
  el tema y un `AGENTS.md` que enseña el formato a Claude Code, Cursor, Codex y
  otros. [Herramienta hystore](/es/code-theme/cli/)
- **Con la IA conectada a la tienda**: Claude, Cursor y otras apps con MCP
  entran por el panel y editan el borrador sin instalar nada. [Conectar la IA](/es/code-theme/mcp/)
- **Por la API**: llaves del tema para integraciones y CI. [API del tema](/es/code-theme/api/)

Quien no escribe código también cambia textos, colores y el orden de las
secciones en **Personalizar tema**, con los campos que el tema declara.

## Del borrador a la tienda

1. **Borrador**: toda edición va al borrador. La tienda en el aire no cambia.
2. **Revisión**: cada archivo se revisa al guardar (HTML prohibido, sintaxis de
   Liquid, reglas de CSS, formato del JSON). Un archivo con error se rechaza
   con la línea y el motivo.
3. **Vista previa**: un enlace de 24 horas abre el borrador en la dirección real
   de la tienda.
4. **Publicar**: en el panel, quien tiene el permiso *Publicar el tema*
   publica. Desde la herramienta, la IA o la API es un **pedido de
   publicación** que esa persona aprueba, viendo lo que cambió.
5. **Usar en la tienda**: Tema en código > En la tienda > *Usar el tema en la
   tienda*. Mientras el tema en código está en el aire, el constructor queda
   apagado. Elegir de nuevo un diseño listo saca el tema de la tienda sin
   borrarlo.

Las últimas 30 versiones publicadas quedan guardadas; cualquiera vuelve al
borrador.

> [!TIP]
> Una tienda sin tema puede empezar por un tema listo, con todas las páginas,
> claro y oscuro, en los colores de la tienda: **Base** (simple y completo),
> **Aurora** (franja en degradado, servidores en carrusel), **Celeste** (una
> ventana sobre un cielo con nubes en píxeles, menú lateral) o **Prisma**
> (aspecto de tienda digital, catálogo con filtros).

## Lo que un tema no hace

- Ejecutar JavaScript en la página. La interacción viene de atributos
  `data-hystore-*` y elementos `<hystore-*>` que la tienda maneja. JavaScript
  de verdad solo dentro de una [app aislada](/es/code-theme/apps/).
- Tocar dinero o cuentas. Carrito, pago, perfil, compras, contraseña e inicio
  de sesión son páginas de la propia tienda y abren sin el tema.
- Leer datos privados. El tema ve los datos públicos de la tienda y solo el
  nick y la skin de quien mira: nunca correo, saldo ni pedidos.
- Ocultar el área obligatoria de los planes gratuitos (anuncios, enlaces
  legales).

La tienda revisa el tema al guardar, limpia la página de nuevo al dibujar, y su
política de seguridad de contenido bloquea scripts. Si el tema falla al
dibujar, la página cae en el diseño estándar de la tienda en vez de quedar en
blanco.

## Planes

El tema en código es un módulo del plan: aparece en las tiendas cuyo plan
incluye **Tema en código**, y el dueño puede apagarlo en Configuración >
Módulos. Conectar la IA directo a la tienda es una opción dentro de ese
módulo. Sin el módulo, las pantallas del tema llevan a los planes, las llaves y
sesiones de la herramienta dejan de funcionar (desconectar sigue disponible) y
la tienda que usaba el tema vuelve a su diseño listo, sin borrar nada.

## Permisos

Equipo > Roles de Acceso, grupo *Tema en código*:

| Permiso | Permite |
|---|---|
| Ver el tema | ver archivos, versiones y pedidos; abrir el editor solo para leer |
| Editar el tema | cambiar el borrador, imágenes y fuentes; restaurar versiones |
| Publicar el tema | publicar, aprobar o rechazar pedidos |
| Credenciales del tema | crear y revocar llaves, ver y desconectar sesiones de la herramienta |

Una llave o sesión de la herramienta nunca hace más de lo que permite el rol
de quien la creó, y deja de funcionar si esa persona sale de la tienda o
pierde el permiso. Por cada llave nueva, inicio de sesión de la herramienta o
app de IA conectada, el dueño de la tienda (y quien lo hizo, si es otra
persona) recibe un correo con el enlace para desconectarlo.