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 PermitidosDescriçã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

Last updated