# 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

![](/files/vU2RjviQEQ8FjdYJSZJB)

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://partners.tray.com.br/themes/construindo-seu-template/editor-do-tema/editor/settings.html.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.