Aparência

Personalizar sem código

A aba Personalizar e os campos do schema.json.

Personalizar sem código é a aba Personalizar do template (/painel/templates/id/personalizar). Cada campo do schema.json vira um controle, e o valor chega no HTML como config.

Fora do plano Casa, a mensagem do editor é: “O editor de código entra no plano Casa. Nos outros planos você escolhe uma base pronta e personaliza textos, cores e destaques.” Nos modelos de site, os textos editáveis da Aparência são esse caminho sem código. Veja Modelos prontos.

captura de telaAba Personalizar com grupos de campos e um seletor de cor

Como a chave vira variável

A chave hero-title vira config.hero_title. Hífen vira sublinhado.

Exemplo mínimo de schema.json:

{
  "name": "Meu template",
  "version": "1.0.0",
  "settings": [
    {
      "title": "Identidade",
      "fields": [
        { "key": "primary", "label": "Cor principal", "type": "color", "default": "#7c3aed" },
        { "key": "hero_title", "label": "Título", "type": "text", "default": "Bem-vindo" }
      ]
    }
  ]
}

Tipos de campo

| Tipo | O que o lojista vê | | --- | --- | | text, textarea, url, image | Texto ou endereço. URL precisa começar com http://, https:// ou /. | | color | Seletor de cor em hexadecimal. | | number, boolean | Número e liga/desliga. | | select | Lista. options pode ser texto ou objeto com value e label. | | packages | Escolha de produtos. Em config chega uma lista de objetos produto. | | category | Escolha de categoria. Chega o objeto categoria, ou vazio. | | list | Itens repetidos, com fields e max_items até 24. |

O arquivo schema.json é obrigatório no template. Detalhe de pastas em Estrutura de arquivos.