# Edição no código do tema

{% hint style="danger" %}

### **Atenção!**

Recomendamos criar uma cópia de segurança antes de editar os códigos HTML e CSS. Assim, caso aconteça algum problema, você poderá retornar rapidamente a um tema funcional. 

Vale lembrar que a Tray não se responsabiliza por problemas gerados devido a edição do código.

Somente edite o código do seu tema se tiver conhecimentos avançados em HTML, CSS e JS. Caso contrário, o template poderá parar de funcionar na sua loja.
{% endhint %}

Nós criamos um tema com diversas personalizações através do painel administrativo da Tray, de modo a facilitar o controle da sua loja. Entretanto entendemos que você possa querer modificar as coisas um pouco mais afundo. É isso que vamos te explicar a seguir.

Para fazer qualquer modificação mais complexa no seu tema, será necessário que ele não esteja publicado. Mas não se preocupe, você não precisa tirar a loja do ar, basta duplicá-lo. Caso o seu tema não esteja publicado ainda, você poderá fazer as alterações sem a necessidade de duplicá-lo, apesar de recomendarmos duplicar.

Para isso, acesse ***Minha Loja > Aparência da loja***, no seu tema e clique na setinha apontando para baixo, depois clique em "Duplicar". Você poderá editar nome depois caso queira.

<figure><img src="/files/k14BWtMrNa0WDehKA9zp" alt=""><figcaption><p>Clique sobre a imagem para ampliá-la</p></figcaption></figure>

Após duplicar o tema você terá acesso a uma nova opção chamada ***Editar HTML***. Será através dela que você terá acesso ao editor online da plataforma para fazer as edições.

<figure><img src="/files/ZsQcnW4PDLIzqwrSkbFk" alt=""><figcaption><p>Clique sobre a imagem para ampliá-la</p></figcaption></figure>

Você poderá editar qualquer arquivo no editor de arquivos que aparecer, desde que tenha conhecimento para tal. Recomendamos que só altere os arquivos ***style.css*** e ***style.min.css*** que controlam os estilos do tema.

No editor online os arquivos serão exibidos em lista, no canto direito da tela. Os arquivos css mencionados acima estarão dentro da pasta css. Ao clicar em algum arquivo, ele será carregado na parte mais a direita da tela. A imagem abaixo exemplifica isso.

<figure><img src="/files/Gj4c2bN3UxYvnBOmjDPZ" alt=""><figcaption><p>Clique sobre a imagem para ampliá-la</p></figcaption></figure>

Faça as alterações que quiser e salve utilizando o botão abaixo. Para que as modificações sejam refletidas na loja, é necessário atualizar o arquivo css minificado, o ***style.min.css***. Recomendamos a ferramenta CSS Minifier. Você pode acessar ela clicando [**aqui**](https://cssminifier.com/).

Copie o código minificado gerado pela ferramenta e colo no arquivo ***style.min.css*** sobrescrevendo todo o conteúdo já existente. Salve as alterações utilizando o botão salvar.

Após esse procedimento você precisará publicar novamente o tema para que as modificações fiquem disponíveis na loja. Siga os passos vistos na seção **Instalação.** Pronto. Alterações feitas.&#x20;

{% hint style="info" %}
**Vale lembrar que:** Devido ao cache da plataforma, pode demorar até 1 hora para que as alterações sejam aplicadas. Lembre-se de limpar o cache do seu navegador antes de verificar se as alterações foram atualizadas.
{% endhint %}


---

# 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://manuais.starads.com.br/colecao-standard-v2/edicao-no-codigo/edicao-no-codigo-do-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.