# 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](/es/code-theme/#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](https://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.

> [!NOTE]
> Empezar por un tema listo no cambia nada en la tienda. La tienda solo cambia
> de aspecto cuando publicas y eliges *Usar el tema en la 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í:

```liquid sections/hero.liquid
<h1>{{ 'home.hero_title' | t }}</h1>
```

Y el valor queda en el archivo del idioma:

```json locales/es.json
{
  "home": {
    "hero_title": "El mejor servidor de supervivencia de Latinoamérica"
  }
}
```

> [!TIP]
> Cambia también `locales/pt.json` y `locales/en.json`: quien visita en
> portugués o inglés ve el texto de su idioma. Si falta, aparece el portugués.

## 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](/es/code-theme/mcp/). Describes lo que quieres y apruebas la
  publicación.
- **Edita en tu computadora**: la [herramienta hystore](/es/code-theme/cli/)
  descarga el tema, sigue cada guardado en la vista previa y funciona con git.
- **Aprende el formato**: la [guía del tema](/es/code-theme/guide/) explica
  archivos, secciones, datos y filtros, y los [ejemplos listos](/es/code-theme/examples/)
  dan código para copiar.