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.
4. Colar o código que deseja usar no campo correspondente 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
Depois
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).