# Como criar um Editor

É possível disponibilizar ao lojista opções de personalização do tema, deixando-o infinitamente mais flexível, versátil e atraente.

Você pode disponibilizar aos usuários opções que podem envolver: troca de títulos, posicionamento de colunas no layout, cores, imagens e outras infinitas opções, tendo como limite apenas sua criatividade.

Se você deseja criar um painel de customização no seu tema, será necessário seguir os passos abaixo:

{% hint style="success" %}
***Observação:** Se o tema já possui o botão "Editar Tema", poderá pular para o* [*2º passo*](#2o-passo) *e editar os arquivos que já estão presentes na pasta* `configs/`*.*
{% endhint %}

## ***1º Passo***

Crie os dois arquivos a seguir dentro da pasta *<mark style="background-color:blue;">**/configs**</mark>* que está na raiz do seu tema.

&#x20;***settings.html***

***settings.json***&#x20;

## ***2º Passo***

Você deverá inserir em cada um dos arquivos recém criados as opções de customização desejadas, para isso você deve seguir o padrão abaixo.

*Saiba como inserir as customizações no arquivo* [***settings.html clicando aqui*** ](https://partners.tray.com.br/themes/construindo-seu-template/editor-do-tema/editor/settings.html)*e no arquivo* [***settings.json clicando aqui.***](https://partners.tray.com.br/themes/construindo-seu-template/editor-do-tema/settings-json)

## ***3º Passo***

Após a criação dos arquivos, um novo botão *(**Edita Tema**)* irá aparecer nas opções do tema de sua loja virtual

![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FAF81NFB2P0fmXsv49ejc%2FIlustra%C3%A7%C3%A3o%2041.png?alt=media\&token=1b340fb1-c8ad-4a23-bd9a-ca13203fc97b)

Ao clicar neste novo botão o usuário será direcionado para a página de customização, onde será possível selecionar os modelos pré-definidos, alterar seus valores e publicá-los no tema em questão.

![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FRuYypAdTcLA7IXYw97Kk%2FIlustra%C3%A7%C3%A3o%2042.png?alt=media\&token=35912bc1-da18-475a-9532-fdb4e6451d76)

Após as alterações serem enviadas é possível utilizar a variável **`settings`** no código html do tema. Veja mais sobre como utilizar o [settings clicando aqui](https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/settings).