# Tema em código

Um tema em código desenha a vitrine da sua loja a partir de arquivos que você
escreve: Liquid para as páginas, CSS para o visual e JSON para configurações e
textos. Ele vai além do construtor de arrastar e soltar: qualquer layout,
seções e componentes seus, em todas as páginas da loja, e até pequenos apps com
JavaScript num espaço isolado.

## Por onde começar

| Você quer | Comece por |
|---|---|
| Entender o caminho completo, do zero até a loja | [Primeiros passos](/pt/code-theme/start/) |
| Pedir para o Claude, o Cursor ou outra IA mudar a loja | [Conectar a IA (MCP)](/pt/code-theme/mcp/) |
| Editar no seu computador, com git e a sua IA | [Ferramenta hystore](/pt/code-theme/cli/) |
| Editar sem instalar nada | [Editor no painel](/pt/code-theme/editor/) |
| Copiar um banner, uma vitrine de produtos, um contador | [Exemplos prontos](/pt/code-theme/examples/) |
| Pôr uma roleta, uma calculadora ou um mini jogo | [Apps isolados](/pt/code-theme/apps/) |
| Integrar com o seu sistema ou CI | [API do tema](/pt/code-theme/api/) |

## Quatro jeitos de editar

- **No painel**: Personalização > Tema em código > *Abrir o editor*. Código com
  autocompletar e conferência, prévia ao lado. [Editor no painel](/pt/code-theme/editor/)
- **No seu computador, com a sua IA**: `npx @hystudios/hystore theme pull` baixa
  o tema e um `AGENTS.md` que ensina o formato ao Claude Code, Cursor, Codex e
  outros. [Ferramenta hystore](/pt/code-theme/cli/)
- **Com a IA conectada na loja**: o Claude, o Cursor e outros apps com MCP
  entram pelo painel e editam o rascunho sem instalar nada. [Conectar a IA](/pt/code-theme/mcp/)
- **Pela API**: chaves do tema para integrações e CI. [API do tema](/pt/code-theme/api/)

Quem não escreve código também muda textos, cores e a ordem das seções em
**Personalizar tema**, com os campos que o tema declara.

## Do rascunho à loja

1. **Rascunho**: toda edição vai para o rascunho. A loja no ar não muda.
2. **Conferência**: cada arquivo é conferido ao salvar (HTML proibido, sintaxe
   do Liquid, regras de CSS, formato do JSON). Um arquivo com erro é recusado
   com a linha e o motivo.
3. **Prévia**: um link de 24 horas abre o rascunho no endereço real da loja.
4. **Publicar**: no painel, quem tem a permissão *Publicar o tema* publica.
   Pela ferramenta, pela IA ou pela API é um **pedido de publicação** que essa
   pessoa aprova, vendo o que mudou.
5. **Usar na loja**: Tema em código > Na loja > *Usar o tema na loja*.
   Enquanto o tema em código está no ar, o construtor fica desligado. Escolher
   um layout pronto de novo tira o tema da loja sem apagá-lo.

As últimas 30 versões publicadas ficam guardadas; qualquer uma volta para o
rascunho.

> [!TIP]
> Uma loja sem tema pode começar por um tema pronto, com todas as páginas,
> claro e escuro, nas cores da loja: **Base** (simples e completo), **Aurora**
> (faixa em degradê, servidores em carrossel), **Celeste** (janela sobre um céu
> com nuvens em pixel, menu na lateral) ou **Prisma** (cara de loja digital,
> catálogo com filtros).

## O que um tema não faz

- Rodar JavaScript na página. A interação vem de atributos `data-hystore-*` e
  elementos `<hystore-*>` que a loja trata. JavaScript de verdade só dentro de
  um [app isolado](/pt/code-theme/apps/).
- Mexer em dinheiro ou conta. Carrinho, pagamento, perfil, compras, senha e
  entrar são páginas da própria loja e abrem sem o tema.
- Ler dado privado. O tema vê os dados públicos da loja e só o nick e a skin de
  quem está olhando: nunca e-mail, saldo ou pedido.
- Esconder a área obrigatória dos planos gratuitos (anúncios, links legais).

A loja confere o tema ao salvar, limpa a página de novo ao desenhar, e a
política de segurança de conteúdo bloqueia scripts. Se o tema falhar ao
desenhar, a página cai no layout padrão da loja em vez de ficar em branco.

## Planos

O tema em código é um módulo do plano: aparece nas lojas cujo plano inclui
**Tema em código**, e o dono pode desligá-lo em Configurações > Módulos.
Conectar a IA direto na loja é uma opção dentro desse módulo. Sem o módulo, as
telas do tema mostram o caminho para os planos, chaves e sessões da ferramenta
param de funcionar (desconectar continua disponível) e a loja que usava o tema
volta ao layout pronto, sem apagar nada.

## Permissões

Equipe > Cargos de Acesso, grupo *Tema em código*:

| Permissão | Permite |
|---|---|
| Visualizar o tema | ver arquivos, versões e pedidos; abrir o editor só para ler |
| Editar o tema | mudar o rascunho, imagens e fontes; restaurar versões |
| Publicar o tema | publicar, aprovar ou recusar pedidos |
| Credenciais do tema | criar e revogar chaves, ver e desconectar sessões da ferramenta |

Uma chave ou sessão da ferramenta nunca faz mais do que o cargo de quem a
criou permite, e para de funcionar se essa pessoa sair da loja ou perder a
permissão. A cada chave nova, login da ferramenta ou app de IA conectado, o
dono da loja (e quem fez, se for outra pessoa) recebe um e-mail com o link para
desconectar.