# Primeiros passos

Do zero até a vitrine nova no ar, em dez minutos. Este guia segue o caminho
mais curto (tudo pelo painel) e mostra onde a ferramenta e a IA entram, para
você escolher depois.

## O que você precisa

- Uma loja na Hystore cujo plano inclui o módulo **Tema em código**. Confira em
  Configurações > Módulos: ele precisa estar ligado.
- Um cargo com as permissões do grupo *Tema em código* (o dono da loja já tem
  todas). Veja [Permissões](/pt/code-theme/#permissoes).
- Para conectar uma IA direto na loja: a opção **Conectar a IA** dentro do
  módulo, no plano.

## 1. Escolha um tema para começar

1. Abra o painel em [app.hystore.com.br](https://app.hystore.com.br).
2. Vá em **Personalização > Tema em código**.
3. Escolha um dos quatro temas prontos: **Base**, **Aurora**, **Celeste** ou
   **Prisma**. Ele vira o seu rascunho, com todas as páginas, claro e escuro,
   e as cores da sua loja.

> [!NOTE]
> Começar por um tema pronto não muda nada na loja. A loja só troca de visual
> quando você publica e escolhe *Usar o tema na loja*.

## 2. Faça a primeira mudança

1. Clique em **Abrir o editor**. Os arquivos ficam à esquerda e a prévia, à
   direita.
2. Abra `locales/pt.json`. Ele guarda os textos do tema em português.
3. Troque um texto, por exemplo o título do topo da página inicial, e aperte
   **Ctrl+S**. A prévia recarrega com o texto novo.

Um texto no tema aparece assim:

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

E o valor fica no arquivo da língua:

```json locales/pt.json
{
  "home": {
    "hero_title": "O melhor servidor de sobrevivência do Brasil"
  }
}
```

> [!TIP]
> Mude também `locales/en.json` e `locales/es.json`: quem visita em inglês ou
> espanhol vê o texto daquela língua. Se faltar, aparece o português.

## 3. Mude as cores e as seções sem código

1. Volte para Tema em código e abra **Personalizar tema**.
2. Em **Configurações do tema**, mude as cores, os textos e as imagens que o
   tema oferece.
3. Em **Seções da página**, escolha uma página e suba, desça, esconda ou
   adicione seções.
4. Clique em **Salvar**. Tudo vai para o rascunho.

## 4. Veja a prévia no endereço da loja

A prévia do editor é a própria loja, com o rascunho. Para mandar para alguém,
use o link de prévia: ele abre o rascunho no endereço real da loja por 24
horas, com uma faixa avisando que é uma prévia. A loja no ar continua igual.

## 5. Publique

1. Em Tema em código, confira a lista de mudanças e os erros (um tema com erro
   não publica).
2. Clique em **Publicar agora**. Isso cria a versão 1 do seu tema.

## 6. Ligue o tema na loja

1. Em Tema em código > **Na loja**, clique em **Usar o tema na loja**.
2. Abra a sua loja: a vitrine agora é o seu tema.

Enquanto o tema em código está no ar, o construtor de arrastar e soltar fica
desligado. Para voltar, escolha um layout pronto de novo: o tema sai da loja
sem ser apagado.

## Próximos passos

- **Peça para uma IA fazer as mudanças**: conecte o Claude, o Cursor ou outro
  app em [Conectar a IA](/pt/code-theme/mcp/). Você descreve o que quer e
  aprova a publicação.
- **Edite no seu computador**: a [ferramenta hystore](/pt/code-theme/cli/)
  baixa o tema, acompanha cada gravação na prévia e funciona com git.
- **Aprenda o formato**: o [guia do tema](/pt/code-theme/guide/) explica
  arquivos, seções, dados e filtros, e os [exemplos prontos](/pt/code-theme/examples/)
  dão código para copiar.