> For the complete documentation index, see [llms.txt](https://ereemby.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ereemby.gitbook.io/docs/sistema-de-temas/editor-local.md).

# Editor local

Edite o tema da sua loja no seu próprio computador usando a IDE que preferir.

O tutorial abaixo é ensinado utilizando **VS Code**. O processo funciona da mesma forma em outros editores.

{% hint style="info" %}
Você vai criar um tema, gerar um token, baixar os arquivos e editar tudo localmente.
{% endhint %}

{% hint style="warning" %}
Guarde o token do tema com segurança.\
Não compartilhe esse token com outras pessoas.
{% endhint %}

{% stepper %}
{% step %}

### Acesse a área de templates

Entre no painel da Ereemby e abra a página de templates:

[Abrir Templates](https://ereemby.com/dashboard/templates)

<details>

<summary>Imagem do passo 1</summary>

<figure><img src="https://2689733486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3dDDJrzdKjZTltqBHmfD%2Fuploads%2F6uiYJUCmuSOfMxnoqOt9%2Fvivaldi_h4vKRhw1rq.png?alt=media&amp;token=a04220d0-35d1-4df8-abea-c6c10fce5a93" alt=""><figcaption></figcaption></figure>

</details>
{% endstep %}

{% step %}

### Crie um novo tema

Na seção **Biblioteca de temas**, clique em **Criar tema**.

Depois, informe um nome para o seu tema e confirme a criação.

<details>

<summary>Imagem do passo 2</summary>

<figure><img src="https://2689733486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3dDDJrzdKjZTltqBHmfD%2Fuploads%2FdHTNVOi5rqRQZ0xk3aKj%2Fvivaldi_iaHOcmHWZV.png?alt=media&amp;token=abf75f0b-8862-4059-a54a-45a22eb4ca27" alt=""><figcaption></figcaption></figure>

<div align="left"><figure><img src="https://2689733486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3dDDJrzdKjZTltqBHmfD%2Fuploads%2FwyX7ktWwjHzgX72owc2O%2Fvivaldi_3GgmYf55FY.png?alt=media&amp;token=64995abe-a9e7-46f0-990a-366f87bcc006" alt=""><figcaption></figcaption></figure></div>

</details>
{% endstep %}

{% step %}

### Abra a opção de edição local

Depois de criar o tema, clique nos **3 pontinhos** ao lado do botão **Publicar**.

Em seguida, escolha a opção **Editar localmente**.

<details>

<summary>Imagem do passo 3</summary>

<img src="https://2689733486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3dDDJrzdKjZTltqBHmfD%2Fuploads%2FcnwTfVEBj5uqpb8bpKEd%2Fvivaldi_KYO8T0sEMZ.png?alt=media&amp;token=37158f8a-457c-45ca-83ed-8f4212cb7472" alt="" data-size="original">

</details>
{% endstep %}

{% step %}

### Gere o token do tema

Ao clicar em **Editar localmente**, a Ereemby abre um modal com os comandos para conectar o tema ao seu computador.

Clique em **Gerar token** e copie os comandos exibidos.

Exemplo:

```bash
npm install ereemby-cli -g
ereemby login <token-do-tema>
ereemby pull
```

**O que cada comando faz:**

* `npm install ereemby-cli -g`: instala o CLI da Ereemby.
* `ereemby login <token-do-tema>`: autentica seu tema localmente.
* `ereemby pull`: baixa os arquivos do tema para a pasta atual.

<details>

<summary>Imagem do passo 4</summary>

<figure><img src="https://2689733486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3dDDJrzdKjZTltqBHmfD%2Fuploads%2FsTIvltpXg69dSyl96VYN%2Fvivaldi_RYHlOKJ6oM.png?alt=media&amp;token=1ccd74e6-1ea1-4b48-8563-0d5d79d98843" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2689733486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3dDDJrzdKjZTltqBHmfD%2Fuploads%2FuLED4ljyt90UahWiPYfj%2Fvivaldi_Xpy2Nij1A2.png?alt=media&amp;token=514174bc-97b2-4669-8a87-e792e49606cc" alt=""><figcaption></figcaption></figure>

</details>
{% endstep %}

{% step %}

### Crie uma pasta no seu computador

Crie uma pasta na sua área de trabalho para usar no projeto.

Se for usar **VS Code**, clique com o botão direito na pasta e selecione **Abrir com Code**.

Se essa opção não aparecer, abra o VS Code e arraste a pasta para dentro do editor.

{% hint style="info" %}
Você pode usar outra IDE. O importante é abrir a pasta do projeto no editor.
{% endhint %}

<details>

<summary>Imagem do passo 5</summary>

<figure><img src="https://2689733486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3dDDJrzdKjZTltqBHmfD%2Fuploads%2FoZWwtkxbmtd3J88NYtHI%2FSem%20T%C3%ADtulo-1.png?alt=media&amp;token=ee56b1be-2c21-4d63-88cb-e2f02882ee3c" alt=""><figcaption></figcaption></figure>

</details>
{% endstep %}

{% step %}

### Abra o terminal da IDE

Com o editor aberto, localize a opção **Terminal** no menu superior.

Depois, clique em **New Terminal** para abrir um terminal dentro da pasta do projeto.

<details>

<summary>Imagem do passo 6</summary>

<figure><img src="https://2689733486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3dDDJrzdKjZTltqBHmfD%2Fuploads%2FpQkYI2aqYMkKh8buCCns%2FCode_JHhAML6VQY.png?alt=media&amp;token=d79a85a8-411b-46df-804b-f13432cfebbd" alt=""><figcaption></figcaption></figure>

</details>
{% endstep %}

{% step %}

### Execute os comandos copiados

Com o terminal aberto na pasta do projeto, execute os comandos que você copiou na plataforma.

A ordem normal é esta:

```bash
npm install ereemby-cli -g
ereemby login <token-do-tema>
ereemby pull
```

Depois disso, os arquivos do tema serão baixados para essa pasta.

<details>

<summary>Imagem do passo 7</summary>

<figure><img src="https://2689733486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3dDDJrzdKjZTltqBHmfD%2Fuploads%2FvzfzuegvryJc7HTrk2Vp%2FSem%20T%C3%ADtulo-2.png?alt=media&amp;token=1c8de10c-1047-4e51-92ff-ea93b32156e6" alt=""><figcaption></figcaption></figure>

</details>
{% endstep %}

{% step %}

### Edite e envie as alterações

Agora você já pode editar o código do seu site pela sua IDE.

Quando terminar, envie as alterações com o comando:

```bash
ereemby push
```

Esse comando publica no tema as alterações feitas localmente.
{% endstep %}
{% endstepper %}

### Resumo rápido

1. Crie um tema na **Biblioteca de temas**.
2. Abra a opção **Editar localmente**.
3. Gere o token e copie os comandos.
4. Abra uma pasta na sua IDE.
5. Instale o Ereemby CLI usando `npm install ereemby-cli -g`
6. Rode `ereemby login <token>` e `ereemby pull`.
7. Edite os arquivos.
8. Envie tudo com `ereemby push`.

{% hint style="success" %}
Pronto. Seu tema pode ser desenvolvido localmente e enviado para a Ereemby quando quiser.
{% endhint %}