Início›Configure sua loja›Layout›Personalização avançada

Como editar o código do layout da minha loja?

Veja como liberar a edição do código do layout da sua loja, em layouts legados e em layouts com seções da Nuvemshop.

Última atualização: 22/09/2026

Você pode personalizar o layout da sua loja editando o código dele com HTML, CSS e JavaScript. O caminho para liberar essa edição depende do tipo de layout que a sua loja usa.

Dica

O acesso ao código-fonte não está disponível em todos os planos. Para conferir se o seu plano tem o recurso, consultar a página de planos e preços e procurar por "Acesso ao código-fonte (HTML/CSS/JS)" na coluna de funcionalidades.

Qual é o caminho de edição de código do meu layout?

Existem dois caminhos, e o que define qual é o seu é o tipo de layout instalado na loja:

Tipo de layout

 O que libera a edição
Layout legado (Amazonas, Rio, etc.) Abrir o acesso ao código FTP no painel administrador. A conexão FTP é feita pela CLI da Nuvemshop que automatiza toda a sincronização.
Layout com seções (Como o Ipanema) Fazer o fork do layout, pela CLI da Nuvemshop.

Nos dois casos, a edição dos arquivos acontece fora do painel administrador, por isso recomendamos que seja feita por uma agência ou por uma pessoa desenvolvedora. Se você não tem alguém para fazer essas alterações, os Especialistas Nuvemshop já estão habituados a personalizar os nossos layouts e podem enviar um orçamento.

Para saber como funcionam as atualizações das melhorias para cada tipo de layout, acessar: Como testar atualizações do meu layout na Nuvemshop sem perder as personalizações?

O que preciso antes de editar o código do layout?

Antes de liberar a edição, vale conferir estes pontos:

  • Plano com acesso ao código-fonte. Se o seu plano não tem o recurso, consultar como mudar de plano na Nuvemshop.
  • Conhecimento em HTML, CSS e JavaScript, seu ou de quem for fazer as alterações.
  • Backup dos arquivos antes de qualquer alteração. A Nuvemshop não faz backup de layout personalizado, então guarde uma cópia para conseguir restaurar o layout se algo afetar a navegação da loja.
  • A documentação do layout, com as boas práticas para o funcionamento correto. Consultar a documentação para webdesigners.

Como liberar a edição do código

Em layout legado, o primeiro passo acontece no painel: você abre o acesso ao código e recebe as credenciais que serão usadas na ferramenta de edição. Para isso, siga os passos abaixo:

1. Acessar o painel administrador da sua loja.

2. Ir em "Loja online > Layout" e clicar em "Editar o código".

3. Ler o aviso da janela lateral e, se concordar, clicar em "Abrir FTP".

4. Aguardar a liberação do acesso, que pode levar alguns minutos.

5. Copiar as credenciais exibidas na janela, que são o Host, o Usuário e a senha.

Pronto!

O acesso ao código está aberto e as credenciais estão prontas para usar na ferramenta de edição.

Observação

Com essas credenciais, a forma indicada de editar os arquivos é a CLI da Nuvemshop, que sincroniza as alterações e dispensa um cliente FTP de terceiros. Para o passo a passo, consultar como instalar e usar a CLI da Nuvemshop para editar layouts.

Para saber o que é possível alterar por esse caminho, consultar o que dá para ser alterado no layout da minha loja via FTP.

Para os demais conteúdos de personalização avançada, acessar a seção personalização avançada do layout.

Perguntas frequentes 

Para voltar ao layout padrão ou trocar de layout, é necessário fechar o acesso ao código antes. Para isso, siga os passos abaixo:

1. Acessar o painel administrador da sua loja.

2. Ir em "Loja online > Layout" e clicar em "Fechar FTP".

3. Clicar em "Fechar" para confirmar.

4. Aguardar a desativação do acesso, que pode levar alguns minutos.

Pronto!

O acesso ao código está encerrado e a loja volta ao layout padrão da Nuvemshop.

Dica

Ao fechar o acesso, todas as alterações feitas diretamente no código são perdidas, e a Nuvemshop não guarda backup de layout personalizado. Guarde uma cópia dos arquivos antes, se quiser aplicar a personalização na loja outra vez no futuro.

Depois disso, para escolher outro modelo, consultar como escolher outro layout.

Os layouts com seções são os mais recentes da loja de temas, como o Ipanema, e trazem o editor por seções. Em "Loja online > Layout", o card do layout mostra o nome e a versão dele.

 

Se o card do seu layout opção que aparece é "Editar o código" com abertura de FTP, o layout é legado.

Não. Em layout com seções, a liberação do código é o fork, feito pela CLI da Nuvemshop, e não passa pelo botão de abrir FTP no painel.

 

O acesso por FTP continua existindo para os layouts legados.

Em layout legado, não. Enquanto o acesso ao código estiver aberto, a troca de layout fica bloqueada, e é necessário fechar o acesso antes.

 

Como fechar o acesso apaga as alterações feitas no código, guarde uma cópia dos arquivos antes de fazer isso.