Primeros pasos

De cero a la vitrina nueva en el aire, en diez minutos. Esta guía sigue el camino más corto (todo en el panel) y muestra dónde entran la herramienta y la IA, para que elijas después.

Lo que necesitas

• Una tienda en Hystore cuyo plan incluya el módulo Tema en código. Revísalo en Configuración > Módulos: tiene que estar encendido.
• Un rol con los permisos del grupo Tema en código (el dueño de la tienda tiene todos). Mira Permisos.
• Para conectar una IA directo a la tienda: la opción Conectar la IA dentro del módulo, en el plan.

1. Elige un tema para empezar

1. Abre el panel en app.hystore.com.br.
2. Ve a Personalización > Tema en código.
3. Elige uno de los cuatro temas listos: Base, Aurora, Celeste o Prisma. Se vuelve tu borrador, con todas las páginas, claro y oscuro, y los colores de tu tienda.

2. Haz tu primer cambio

1. Haz clic en Abrir el editor. Los archivos quedan a la izquierda y la vista previa, a la derecha.
2. Abre locales/es.json. Guarda los textos del tema en español.
3. Cambia un texto, por ejemplo el título de arriba de la página de inicio, y presiona Ctrl+S. La vista previa se recarga con el texto nuevo.

Un texto en el tema se ve así:

<h1>{{ 'home.hero_title' | t }}</h1>

Y el valor queda en el archivo del idioma:

{
  "home": {
    "hero_title": "El mejor servidor de supervivencia de Latinoamérica"
  }
}

3. Cambia colores y secciones sin código

1. Vuelve a Tema en código y abre Personalizar tema.
2. En Configuración del tema, cambia los colores, textos e imágenes que el tema ofrece.
3. En Secciones de la página, elige una página y sube, baja, oculta o agrega secciones.
4. Haz clic en Guardar. Todo va al borrador.

4. Mira la vista previa en la dirección de la tienda

La vista previa del editor es la propia tienda, con el borrador. Para mandarla a alguien, usa el enlace de vista previa: abre el borrador en la dirección real de la tienda por 24 horas, con una franja que avisa que es una vista previa. La tienda en el aire sigue igual.

5. Publica

1. En Tema en código, revisa la lista de cambios y los errores (un tema con error no se publica).
2. Haz clic en Publicar ahora. Esto crea la versión 1 de tu tema.

6. Enciende el tema en la tienda

1. En Tema en código > En la tienda, haz clic en Usar el tema en la tienda.
2. Abre tu tienda: la vitrina ahora es tu tema.

Mientras el tema en código está en el aire, el constructor de arrastrar y soltar queda apagado. Para volver, elige de nuevo un diseño listo: el tema sale de la tienda sin borrarse.

Próximos pasos

• Pide a una IA que haga los cambios: conecta Claude, Cursor u otra app en Conectar la IA. Describes lo que quieres y apruebas la publicación.
• Edita en tu computadora: la herramienta hystore descarga el tema, sigue cada guardado en la vista previa y funciona con git.
• Aprende el formato: la guía del tema explica archivos, secciones, datos y filtros, y los ejemplos listos dan código para copiar.