# 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:

{% code title="settings.html" %}

```html
<fieldset></fieldset>
```

{% endcode %}

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`**.

{% code title="settings.html" %}

```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>        
```

{% endcode %}

### Exemplo de Resultado

![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FrxucWzV00YVtvhnBIH37%2FIlustra%C3%A7%C3%A3o%2043.gif?alt=media\&token=6506fc88-6827-4f25-a37c-631b77719748)

## 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                |