# Meu primeiro tema

## O que você vai aprender

Depois de terminar este tutorial, você conseguirá realizar o seguinte:

* Configurar seu ambiente de desenvolvimento local
* Criar um novo tema sincronizado entre o seu ambiente de desenvolvimento e a plataforma.
* Personalizar o seu tema com o Tray CLI em execução no terminal

## Antes de começar

Antes de começar a desenvolver temas, faça o seguinte:

* Para obter uma loja de desenvolvimento e criar um tema, você precisará se tornar um Parceiro Tray, começando pelo preenchimento do formulário no site: [Quero ser Parceiro](https://www.tray.com.br/parceiros/quero-ser-parceiro/)
* Com o cadastro aprovado crie sua loja na plataforma.
* Depois entre em contato com o suporte a parceiros para que eles desabilitem o faturamento da loja e ela não seja bloqueada por falta de pagamento. 

{% hint style="danger" %}
**Atenção:** \
Essa loja não poderá receber pedidos reais. Caso isso aconteça, ela será desabilitada.
{% endhint %}

## Passo 1: Instale o Tray CLI

Para desenvolver nossos temas e fazer a conexão da nossa plataforma com seu ambiente de desenvolvimento você precisará utilizar nossa interface de linha de comando disponibilizada.

O nome dessa interface é o Tray CLI, para saber mais sobre como instala-la e utilizá-la acesse o link abaixo:

{% content-ref url="/pages/Am04h0v1dg6kNp8fRpS1" %}
[Instalação](/themes/tray-cli/instalacao.md)
{% endcontent-ref %}

## Passo 2: Gere o Token

1\. Faça o login no painel administrativo pela URL da sua loja.

2\. Acesse a aba **Configurações** > **Minha Loja > Editar layout** (de acordo com o painel da sua loja)

3\. Acesse a **Lista de desenvolvedores**

4\. Clique em **Adicionar desenvolvedor**

5\. Insira um **Nome** da agencia e **E-mail**, depois clique em **Salvar** que o **Token** de acesso será gerado automaticamente.

6\. Copie o **Token** gerado, ele é importante para sincronizar o seu ambiente de desenvolvimento com a plataforma. De preferencia, salve-o em um arquivo de fácil acesso que o utilizaremos nos próximos passos.

## Passo 3: Crie um novo tema

1. No seu computador de desenvolvimento crie uma nova pasta para o tema que será desenvolvido.

2\. Na pasta abra o terminal para utilizar o Tray CLI

{% hint style="info" %}
Recomendamos o uso do Visual Studio Code com o terminal Bash instalado, devido a facilidade de manuseio do mesmo para o desenvolvimento.
{% endhint %}

3\. Digite o comando com o **Token** gerado para criar um novo tema base, será um tema "limpo" somente com os arquivos de base, da seguinte forma:

```
tray create [options] [token]
```

Para mais informações sobre o uso do comando acesse o link: [download](broken://pages/ZtOhRIXKo8PAGAB5BXDe#download).

Em seguida digite o comando para criar o arquivo de configuração do tema.

```
tray configure [options] [token] [theme_id]
```

Quando o comando for concluído, na pasta do seu computador será gerado um arquivo ***config.json*** com as informações necessárias para sincronizar seu ambiente, e na plataforma um novo tema será exibido.

{% hint style="warning" %}
O arquivo ***config.json*** só existirá no seu computador, para que ele faça a conexão do seu ambiente de desenvolvimento com a plataforma. Não modifique este arquivo para não prejudicar o funcionamento do Tray CLI. Saiba mais no link: [Arquivo de configuração](/themes/construindo-seu-template/visao-geral/arquivo-de-configuracao.md).
{% endhint %}

## Passo 4: Personalize o layout do tema

Com a pasta no seu computador configurado, você precisará baixar o tema base criado na plataforma para começar a editá-lo.

1. Na pasta do tema abra o terminal e use o comando **`tray download`** para baixar todos os arquivos do tema da plataforma para o seu computador, da seguinte forma:

```opencl
tray download
```

Para mais informações sobre o uso do comando acesse o link: [download](broken://pages/ZtOhRIXKo8PAGAB5BXDe#download).

Após conclusão do download siga para os próximos passos.

2\. Para começar a personalizar o tema e as alterações serem enviadas automaticamente para a plataforma, no terminal utilize o comando **`tray watch`**, da seguinte forma:

```
tray watch
```

Para parar a execução do comando no terminal utilize as teclas **CTRL** + **C**.

{% hint style="warning" %}
**Atenção**

Arquivos SASS / SCSS não são mais suportados.
{% endhint %}

3\. Para visualizar as modificações aplicadas na loja utilize o comando **`tray open`**, da seguinte forma:

```
tray open
```


---

# 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/comece-por-aqui/meu-primeiro-tema.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.