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. Consulte 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, consulte a nossa página de 👉 planos e preços. Na coluna de funcionalidades, procure pelo título "Acesso ao código-fonte (HTML/CSS/JS)".
Info
Deseja trocar o plano da sua Nuvemshop para aproveitar esse recurso? Consulte 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
DeleteSaiba 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, consulte o tutorial 👉 O que dá para ser alterado no layout da minha loja via FTP?.
DeleteVeja 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, consulte 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 "Minha Nuvemshop > Layout".
3. Clicar em "Editar o código".
4. Em seguida, abrirá uma janela com algumas informações. Leia atentamente o aviso de importante e, se concordar, clique 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. Vamos utilizar 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 que não ocorra 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".
3. Clicar em "Fechar FTP".
4. Abrirá uma janela com algumas informações. Leia atentamente o aviso de importante e, se concordar, clique em "Fechar 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.
Delete
Para acessar os demais conteúdos de personalizações avançadas, acesse: