Central de Atendimento Nuvem Configure sua loja Layout Personalização avançada

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

Saiba como acessar ao editor do código de seu layout para customização usando HTML, CSS e JavaScript

Última atualização: 08/08/2024

Na Nuvemshop, você tem a possibilidade de editar o código FTP (File transfer Protocol ou Protocolo de transferência de Arquivo) do layout.

Esse recurso é voltado para a customização do layout da loja através das linguagens de programação HTML, CSS e Javascript e é importante ter esse conhecimento para fazer as edições no código.

Warning

O acesso ao FTP não está disponível em todos os planos. Consultar as funcionalidades oferecidas no seu plano na página 👉 Planos e Preços.

 

Antes de acessar a edição do código

Para acessar a edição do código por FTP, é importante verificar as seguintes informações:

Consulte o seu plano

Dependendo do plano em que sua loja estiver, será necessário fazer o upgrade para habilitar o Editor do código.

Para saber se o seu plano possui essa ferramenta, consultar a nossa página de 👉 planos e preços. Na coluna de funcionalidades, procurar pelo título "Acesso ao código-fonte (HTML/CSS/JS)".

 

Info

Deseja trocar o plano da sua Nuvemshop para aproveitar esse recurso? Consultar o tutorial 👉 Como mudar de plano?.

 
 
 

Acesse a documentação para Designers

Se você possui conhecimento em HTML, CSS e Javascript ou já contratou um designer de sua confiança que possa fazer essas alterações para você, é importante seguir a nossa documentação para webdesigners, com todas as boas práticas para o correto funcionamento do layout.

Clique no link abaixo para acessar a documentação:

🛠️ Documentação para Webdesigner

 
 

Saiba como contratar um Designer ou programador

Se não tiver o contato de nenhum designer, recomendamos procurar um de nossos Especialistas Nuvemshop e solicitar um orçamento. Eles já estão habituados a personalizar nossos layouts e saberão como te ajudar.

Para acessar a página e solicitar um orçamento, clique no link abaixo:

🛠️ Especialistas Nuvemshop

 
 

Entenda o que é possível alterar através do FTP

Para saber o que você pode alterar acessando o editor de código de sua loja, consultar o tutorial 👉 O que dá para ser alterado no layout da minha loja via FTP?.

 
 

Veja como trocar o modelo do Layout

Ao habilitar o acesso do FTP (edição do código), não será mais possível trocar de Layout. Para que isso seja possível, primeiro você deve encerrar o acesso ao FTP e depois trocar de Layout.

Para desativar a edição do código, consultar o tutorial 👉 Desativar o FTP.

Em seguida, consulte o tutorial 👉 Como escolher outro layout? para saber como trocar de Layout.

 
 

Opções de ferramentas externas

Para alterar o seu Layout usando HTML, CSS e Javascript, é necessário usar uma ferramenta externa. Abaixo, listamos alguns programas que permitem editar o FTP: 

 
 

Vamos aos passos!

Abrir o FTP

Para ter acesso ao código do layout da loja e realizar as customizações por HTML, CSS ou JavaScript, siga os passos abaixo:

Passo a passo

1. Acessar o painel administrador Nuvemshop.



2. Seguir o caminho "Minha Nuvemshop > Layout" e clicar em "Editar o código".

 

4. Em seguida, abrirá uma janela na laterar com algumas informações. Leia atentamente o aviso e, se concordar, clicar em "Abrir FTP" para continuar.
 


5. Agora, iniciaremos o processo para habilitar o seu acesso ao FTP, podendo levar alguns minutos.

 

6. Após a liberação do acesso FTP, você verá uma janela com as credenciais do seu acesso para editar o código.


Para acessar o código da página em um programa auxiliar (como o Filezilla), você precisará copiar e colar o Host, Usuário senha (oculta).
 

Success

Somente é possível realizar essa edição avançada utilizando um programa auxiliar de computador. Ou seja, não é possível fazer pela versão mobile.

 


7. Utilizaremos o programa Filezilla para fazer as edições. Ao abri-lo, você visualizará no cabeçalho da ferramenta os campos Host, Nome de usuáriosenha:


8. Preencha esses campos com os seus dados de acesso, igual ao GIF abaixo:
 

 

Info

Para saber como usar o Filezilla, recomendamos a leitura do artigo do site Techtudo: 🌐 Como usar o Filezilla?

 

Pronto! 🙌

Agora a sua loja possui acesso ao FTP (edição do código).

Antes de qualquer alteração, sempre faça um backup dos arquivos como metida de segurança (essa ação não é feita pela Nuvemshop). Assim, caso alguma interação no código afete a navegação da loja, você pode restaurar as configurações do seu Layout via FTP (código-fonte).

 
 


❗ Recomendamos que só faça as alterações se possuir conhecimento em código de HTML, CSS ou Javascript. Caso não tenha, poderá contratar um profissional da área ou siga usando uns dos 🎨 Layouts da Nuvemshop.


Antes de rodar o código personalizado

Depois de editar o código do layout da loja, existem 2 ações importantes a fazer para evitar que ocorram erros:

Selecionar o tipo de transferência

Após inserir os dados no programa auxiliar, para não ocorrer nenhum erro, é obrigatório deixar o tipo de transferência como binário, conforme configuramos no FileZilla:
 

 

Success

Caso selecione a opção ASCII, pode aparecer o erro "503 ASCII (text) data type is not supported for file transfer operations", impossibilitando de aplicar as edições no código do layout.

 
 
 

Certificado SSL seguro

Depois de configurar o tipo de transferência, como mostramos acima, será o momento de rodar o código personalizado do layout.

1. Ao clicar em "Quickconnect", aparecerá uma janela com as informações do certificado de segurança (SSL) do domínio.
 


2. Nela, mantenha as duas opções selecionadas e clique em "Ok".
 


3. Caso apareça outra janela, basta confirmar novamente, clicando mais uma vez em "Ok".

 
 

Fechar o FTP

Se futuramente decidir trocar o layout da sua loja ou usar o modelo padrão (sem as personalizações por código), será preciso fechar o seu acesso ao FTP (Edição do código). Para isso, siga os passos abaixo:

Passo a passo

1. Acessar o painel administrador Nuvemshop.

2. Seguir o caminho "Minha Nuvemshop > Layout"  e clicar em "Fechar FTP".
 

4. Em seguida, clicar em "Fechar".

5. Aguardar alguns minutos para o sistema poder fechar o FTP.

 

Success

Ao fechar o FTP, todas as alterações realizadas diretamente nos códigos são perdidas e a Nuvemshop não realiza backups dos layouts customizados. Assim, ao realizar esta ação, você está ciente que o tema personalizado não estará mais disponível em nossos servidores e é importante que tenha um backup salvo caso queira aplicá-lo novamente na loja no futuro.

 

 

5. Iniciaremos o processo de desativação do seu acesso ao FTP, podendo levar alguns minutos.

Pronto! 🙌 

O seu acesso ao FTP será encerrado, retornando ao Layout padrão da Nuvemshop.

 
 

Para acessar os demais conteúdos de personalizações avançadas, acesse:

📁 Personalização avançada do layout

O artigo ajudou você?

Dê sua opinião sobre este artigo

Neste artigo