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: 17/09/2024

A edição do código CSS da loja online 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).

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.

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.

 

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

Vamos aos passos!

1. Acessar o painel administrador Nuvemshop.

2. Seguir pelo caminho "Minha Nuvemshop > Layout" e clicar em "Editar layout".

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"

No exemplo abaixo, geramos um código que permite alterar a cor de fundo da tag de desconto que aparece na lista de produtos.

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

Info

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

 

Veja o antes e o depois de aplicar o código para alterar a cor de fundo da tag:

Antes

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

Depois

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

 

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

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

📝 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, acessar este outro tutorial:

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

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

Dê sua opinião sobre este artigo