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

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
• 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
• 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
• Por la API: llaves del tema para integraciones y CI. API del tema

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.

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.
• 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:

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.