# Editor no painel

Tudo do tema em código fica em **Personalização > Tema em código** no painel,
em [app.hystore.com.br](https://app.hystore.com.br).

## A tela Tema em código

- O que está no ar (versão e data), o número do rascunho, os arquivos novos,
  mudados ou removidos, e os erros e avisos do tema.
- *Publicar agora*, *Pedidos de publicação* (aprovar ou recusar o que a
  ferramenta e a API pediram) e *Versões publicadas* (restaurar uma no
  rascunho).
- Começar por um tema pronto (Base, Aurora, Celeste ou Prisma) numa loja sem
  tema, e *Trocar o rascunho por um tema pronto* depois.
- *Imagens e fontes do tema*: envie PNG, JPEG, WebP, GIF, AVIF de até 3 MB e
  WOFF, WOFF2 de até 1 MB (conferidos pelo conteúdo; SVG não entra), até 100
  arquivos e 40 MB.
- *Na loja*: *Usar o tema na loja* depois que houver uma versão publicada.

## Editor

*Abrir o editor* abre um editor em tela cheia:

- os arquivos do tema à esquerda: criar arquivo numa pasta (em branco ou o
  mesmo arquivo do tema Base), renomear, apagar;
- abas, código com cores, autocompletar de tags, filtros, variáveis e blocos,
  e o que cada um faz ao passar o mouse;
- *Salvar* ou Ctrl+S grava no rascunho e recarrega a prévia; um arquivo com
  erro não é salvo e o erro aparece na linha;
- se o arquivo mudou em outro lugar, você escolhe entre a versão salva e a
  sua;
- *Diferença* compara o arquivo com o que está no ar, e *Histórico* com
  qualquer versão publicada, que pode voltar para a aba;
- imagens e fontes arrastadas para o código são enviadas e o código para usá-las
  é escrito onde caíram;
- a prévia, ao lado em tamanho de computador, tablet ou celular, é a própria
  loja num link de 24 horas;
- na pasta `apps`, o **+** cria um [app isolado](/pt/code-theme/apps/) com
  `index.html`, `app.js` e `app.json` de uma vez.

Quem tem só *Visualizar o tema* abre em modo só leitura.

## Personalizar tema

*Personalizar tema* muda o tema sem código, com a prévia ao lado:

- **Configurações do tema**: os campos do `theme.json` (cores, textos,
  imagens, ligar e desligar);
- **Seções da página**: em cada página, subir e descer seções, esconder,
  tirar, adicionar uma seção que o tema tem e editar os campos dela.

*Salvar* grava `config/values.json` e `templates/<página>.json` no rascunho; a
loja muda quando ele for publicado. Se o tema mudou em outro lugar enquanto a
tela estava aberta, nada é gravado e a tela carrega a versão salva.