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

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
• 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
• 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
• Pela API: chaves do tema para integrações e CI. API do tema

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.

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

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.