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

Como inserir um código CSS na minha Nuvemshop?

Confira os passos para inserir um código de linguagem CSS no seu painel Nuvemshop para modificar elementos de identidade visual do seu site.

Última atualização: 14/07/2022

A edição do código CSS da loja virtual permite fazer pequenas alterações no layout, sem modificar o código HTML, que é mais complexo e exigiria trabalhar com uma pessoa com conhecimentos de web design para fazer as edições pelo FTP (ou código-fonte).

Delete

Success

A Nuvemshop não gera nenhum tipo de código em HTML ou CSS. Se você não possui conhecimento em CSS ou HTML e precisar alterar algum elemento de sua loja, entre em contato com uns dos 🛠️ Especialistas Nuvemshop para ele poder te ajudar. 


Para aproveitar ainda mais as diversas possibilidades de personalização com edição por CSS, é recomendável ter um conhecimento básico dessa linguagem. Para começar, você pode fazer um curso básico nas, como os da plataforma 🌐 Alura, 🌐 Freecodecamp e 🌐 Trilhas de Conhecimento Nuvemshop.

Delete

Info

Se você já tem conhecimentos básicos de CSS, pode seguir o tutorial 👉 Como obter o código CSS para usar na minha Nuvemshop? para identificar o elemento e obter o código.

Neste tutorial, te mostramos os passos para localizar a ferramenta de edição por CSS, no painel administrador da sua Nuvemshop.

Vamos começar!

1. Acessar o painel administrador Nuvemshop.

2. Seguir pelo caminho "Minha Nuvemshop > Layout" e clicar em "Personalizar seu layout atual".

Menu lateral do painel Nuvemshop

3. Uma vez no editor de layout, descer a tela até encontrar a opção "Edição avançada de CSS" no menu lateral. Menu lateral da seção "Personalizar seu layout", com destaque para a edição de CSS avançada.

4. Colar o código que deseja usar no campo correspondente (Ctrl+V no Windows ou Command+V no Mac) e clicar em "Testar CSS"Campo de texto para aplicar o código CSS, com um exemplo aplicado

5. Clicar no botão "Publicar alterações", no final do menu lateral.

Botão para publicar as alterações realizadas no layout

Delete

Info

Para testar as alterações sem publicar o Layout, recomendamos que use versão rascunho do Layout. Para saber mais, consulte o tutorial👉 Como editar o layout da minha loja em rascunho?.

Veja como era e como ficou:

Antes

Visualização do site antes de aplicar o código CSS

Delete

Depois

Visualização do site depois de aplicar o código CSS

Delete


Delete

Info

Para fazer mais de uma alteração por CSS, recomendamos colar os diferentes códigos um abaixo do outro, separados por um espaço em branco (Enter do teclado). 

No entanto, não é indicado fazer muitas alterações por CSS, pois se você alterar o layout da loja, elas serão perdidas, já que cada layout possui suas próprias características.



Pronto! 🙌

Se o código estiver correto, você verá as alterações aplicadas na sua loja virtual.

Para ver exemplos de personalização com a linguagem CSS, acesse:

📝 O que dá para ser alterado por CSS no layout da minha loja?

E se quiser fazer modificações maiores e mais complexas, é possível acessar o FTP da sua loja e realizar edições por HTML. Para isso, acesse este outro tutorial:

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

Delete

Success

Não é possível criar funcionalidades, novos elementos e modificar a estrutura por meio do CSS, somente por código-fonte (FTP).

O artigo ajudou você?