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.
Helpjuice Success Callout Title
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
Para temas legados (FTP)
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.
Helpjuice Info Callout Title
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 temas baseados em seções (Ipanema/Fork)
Nos layouts com seções, como o Ipanema, é o fork que libera esse código para edição quando a personalização vai além do que o editor de layout oferece.
O fork é feito pela CLI da Nuvemshop. Depois de aplicado, o layout aparece identificado como "Forked" na lista de layouts.
Helpjuice Warning Callout Title
Com o fork, o layout continua conectado às atualizações da Nuvemshop. A diferença é que elas deixam de ser aplicadas sozinhas e passam a chegar como aviso para você revisar antes de publicar.
Para o passo a passo do fork e da edição dos arquivos, consultar o tutorial da CLI: Como instalar e usar a CLI da Nuvemshop para editar layouts?
E para entender como aplicar as versões novas depois do fork, consultar como testar as atualizações do meu layout na Nuvemshop sem perder as personalizações.
Para os demais conteúdos de personalização avançada, acessar a seção personalização avançada do layout.
Perguntas frequentes
Como encerrar o acesso ao código em um layout legado?
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.
Helpjuice Success Callout Title
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.
Como sei se o layout da minha loja é legado ou com seções?
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.
Preciso abrir o FTP para editar um layout com seções?
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.
Posso trocar de layout com a edição de código liberada?
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.