# 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="../tray-cli/instalacao" %}
[instalacao](https://partners.tray.com.br/themes/tray-cli/instalacao)
{% 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](https://partners.tray.com.br/themes/comece-por-aqui/broken-reference).

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](https://partners.tray.com.br/themes/construindo-seu-template/visao-geral/arquivo-de-configuracao).
{% 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](https://partners.tray.com.br/themes/comece-por-aqui/broken-reference).

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