Settings.html

A pagina settings.html é responsável por toda a estrutura dos campos presentes na área administrativa. É através dele que é gerado o layout que será exibido na opção de "Editar Tema", com ele o lojista pode definir cores, imagens, posicionamento entre outras questões de configuração do tema.

Este arquivo deve ser criado antes do settings.json, para que o settings.html envie as informações necessárias para o settings.json.

Como usar

Esse arquivo deve possuir como estrutura inicial o seguinte:

settings.html

<fieldset></fieldset>

Dentro da tag <fieldset></fieldset> devem ser incluídos os campos de personalização desejados, seguindo os preceitos de uma tag <form> comum. Cada input irá representar um valor a ser customizado, onde o campo name será o responsável por diferenciar e enviar os parâmetros para o arquivo settings.json.

settings.html

<fieldset>
  <label for="limite_produtos">Titulo:</label>
  <input type="text" name="titulo" id="titulo" placeholder="Titulo exibido na Vitrine">
  <label for="cor">Cor:</label>
  <input type="text" name="cor" id="cor" placeholder="#1f65b5"/>
  <label for="limite_produtos">Limite de Produtos:</label>
  <input type="text" name="limite_produtos" id="limite_produtos" placeholder="valor de 4 a 16">
</fieldset>        

Exemplo de Resultado

Campos customizados

Para definir os parâmetros dos campos customizados são utilizadas a tag <select></select> ou a tag input que possui algumas limitações de tipos permitidos, mostrados na tabela abaixo.

Tipos de INPUT Permitidos	Descrição
checkbox	Define um checkbox
upload	Define um campo para upload de arquivos
hidden	Define um campo invisível
radio	Define um radio button
text	Define um campo de texto