> For the complete documentation index, see [llms.txt](https://manuais-temas.netzee.com.br/nuvemshop-cosmetics-beauty/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manuais-temas.netzee.com.br/nuvemshop-cosmetics-beauty/edicao-do-codigo/dimensoes.md).

# Edição do Código

{% hint style="danger" %}

##  **Atenção!** 

Tenha muito cuidado ao editar o código do tema. Alterações sem conhecimento das tecnologias utilizadas poderão fazer sua loja não funcionar corretamente!
{% endhint %}

Através do painel administrativo da loja é possível fazer a edição de qualquer arquivo do tema. Todo tema segue uma estrutura lógica requerida pela Nuvemshop.

Para desenvolvermos esse tema utilizamos as tecnologias requerida pela Nuvemshop. A Nuvemshop utiliza além do CSS e do JavaScript uma tecnologia chamada *<mark style="color:purple;">Twig</mark>* para montar as páginas da sua loja. O Twig é uma linguagem de template que se assemelha muito ao HTML. Por isso, para alterar qualquer código do tema é necessário ter conhecimento nessas linguagens.

Para editar o código do tema da sua loja acesse *<mark style="color:purple;">Minha Nuvemshop</mark>* na seção *<mark style="color:purple;">Personalizar</mark>* do painel administrativo, e em seguida selecionar a opção <mark style="color:purple;">Editar HTML e CSS do layout.</mark> A imagem abaixo exemplifica o caminho e a tela que será carregada.

![](https://2252824695-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZPGQXxKTSZy7aHFxzRce%2Fuploads%2FS1qb7Op1hj2vGYZil5uM%2Fimage.png?alt=media\&token=db22e664-9586-400f-83cc-8bc694f452b4)

Essa página contém um editor de arquivos. Esse editor é dividido em duas partes. A parte da esquerda contém a estrutura de diretórios e arquivos do tema. A parte da direita é a visualização do arquivo e campo de edição. Quando quiser editar o código do tema selecione o arquivo desejado. Ele será carregado na parte cinza a direita. Após realizar as alterações clique no botão <mark style="color:purple;">Salvar</mark>

As modificações no layout podem demorar até 2 horas para serem aplicadas pela plataforma. Se caso passar esse tempo e elas não forem aplicadas, siga os passos abaixo:

1. Recarregue o painel administrativo da loja e entre na página de edição do código do tema.
2. Force a limpeza dos caches do seu navegador apertado as teclas Ctrl+Shift+Del simultaneamente, selecione somente a opção de cache e clique em Limpar Dados
3. Em último caso, se todos esses passos falharem, será necessário contatar o suporte da plataforma para que eles possam verificar o ocorrido.

**Atenção!** Para otimizar o carregamento da sua loja, os arquivos de CSS e JavaScript da sua loja são minificados, de modo a reduzir de tamanho. Arquivos minificados possuem os dizeres `.min` antes da extensão do arquivo.

Para minificar o código CSS clique [<mark style="color:purple;">aqui</mark>](https://cssminifier.com/) e para JS [<mark style="color:purple;">aqui</mark>](https://javascript-minifier.com/). Procure o arquivo com o mesmo nome do arquivo alterado acrescido de `.min` antes da extensão do arquivo e cole o conteúdo gerado pela ferramenta. Caso não faça isso as alterações **não terão efeito.**