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:
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:
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:
- 🌐 FileZilla (utilizado nos exemplos deste tutorial)
- 🌐 Aptana Studio 3
- 🌐 Arachnophilia
- 🌐 Eclipse
- 🌐 Responsive Site Designer
- 🌐 Microsoft Visual Studio Community
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 "Loja online > 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 e 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ário e senha:
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 "Loja online > 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: