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: 02/06/2022

A edição do código ou conhecido como FTP (File transfer Protocol ou Protocolo de transferência de Arquivo), permite que você acesse o código-fonte do layout da loja para fazer um customização da estrutura do seu layout, diretamente nos códigos de sua loja através dos códigos HTML, CSS e Javascript.

Delete

Warning

O acesso ao FTP não está disponível em todos os planos. Para saber quais funcionalidades o seu plano oferece, consultar a página 🌐 Planos e Preços.


Neste tutorial, ensinaremos como acessar a ferramenta de Edição do código.

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

Consulte o seu plano

Clique para mais informações

A edição do layout via FTP só está disponível em alguns planos. 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).

E para saber como mudar de plano, consulte o nosso tutorial 📝 Como mudar de plano?.

Delete

Acesse a documentação para Designers

Clique para mais informações

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 aqui para acessar a 🛠️ Documentação para Webdesigner

Delete

Saiba como contratar um Designer ou programador

Clique para mais informações

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.

 Clique aqui para acessar a página de 🛠️ Especialistas Nuvemshop

Delete

Entenda o que é possível alterar através da edição do código

Clique para mais informações

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?.

Delete

Veja como trocar o modelo do Layout

Clique para mais informações

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. Após a desativação, consulte Consulte o tutorial  📝 Como escolher outro layout? para saber como trocar de Layout

Delete

Abrindo o FTP

1. Acesse o painel administrador Nuvemshop.

2. Siga pelo caminho "Minha Nuvemshop > Layout".

3. Depois clique em "Editar o código".

4. Em seguida, abrirá uma janela com algumas informações. Leia o aviso de importante com atenção, estando de acordo, clique em "Abrir FTP" para continuar.

5. Após clicar em abrir FTP, 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 editar o código. Com o Host, Usuário e senha (a senha fica oculta) você pode usar para acessar o código da página utilizando um programa auxiliar.


Delete

Success

Só é possível realizar essa edição avançada utilizando um programa auxiliar de computador. Na versão mobile você conseguirá trocar de layout normalmente, mas não conseguirá realizar alterações no código da página.


No exemplo abaixo, baixamos o programa Filezilla, ao abri-lo, você visualizará no cabeçalho da ferramenta os campos Host, Nome de usuário e senha:

Preencha  esses campos com os seus dados de acesso, igual o vídeo abaixo:


Delete

Info

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


7. Lembrando que para alterar o seu Layout através do código usando HTML, CSS e Javascript, é necessário usar uma ferramenta externa. Abaixo listamos alguns programas que permitem editar o de forma externa o seu Layout além do FileZilla: 

🌍 Aptana Studio 3

🌍 Arachnophilia

🌍 Eclipse

🌍 Responsive Site Designer

🌍 Microsoft Visual Studio Community

8. Antes de qualquer alteração, recomendamos que você baixe os arquivos, para conseguir realizar testes antes de mudar oficialmente o layout e também ter um backup, evitando que seu cliente veja sua loja virtual desconfigurada durante o processo.

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

Delete

Success

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 Designer ou indicamos que feche o FTP e siga usando uns dos Layouts da Nuvemshop.


Fechando o FTP

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

1. Acesse o painel administrador Nuvemshop.

2. Siga pelo caminho "Minha Nuvemshop > Layout".

3. Depois clique em "Fechar FTP".


4. Abrirá uma janela com algumas informações. Leia o aviso de importante com atenção, estando de acordo, clique em "Fechar FTP".


Delete

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. Desta forma, ao realizar esta ação, você está ciente de que o tema personalizado que criou para sua loja não estará mais disponível em nossos servidores, e é importante que tenha um backup caso queira aplicá-lo novamente na loja no futuro.


5. Após clicar em fechar  FTP, 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.

O artigo ajudou você?