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

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:

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

E o valor fica no arquivo da língua:

{
  "home": {
    "hero_title": "O melhor servidor de sobrevivência do Brasil"
  }
}

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. Você descreve o que quer e aprova a publicação.
• Edite no seu computador: a ferramenta hystore baixa o tema, acompanha cada gravação na prévia e funciona com git.
• Aprenda o formato: o guia do tema explica arquivos, seções, dados e filtros, e os exemplos prontos dão código para copiar.