Para gerar códigos de CSS para a modificação de certos elementos do layout da sua loja virtual, é necessário ter um conhecimento básico dessa linguagem de programação.
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, basta continuar a leitura desse tutorial, nele explicamos como obter um código. Caso tenha alguma dúvida de como gerar o código, você pode entrar em contato com uns dos 🛠️ Especialistas Nuvemshop para eles poderem te ajudar.
Uma vez que saiba os conceitos básicos, você pode seguir as etapas que informamos abaixo para começar a testar pequenas alterações no design da sua Nuvemshop.
Info
Caso não tenha esse conhecimento e queira aprender, indicamos os cursos básicos das plataformas 🌐 Alura, 🌐 Freecodecamp ou 🌐 Trilhas de Conhecimento da Nuvemshop.
Vamos começar!
1. Acessar o seu site (como se fosse um cliente), clicar com o botão direito do mouse sobre o elemento que deseja modificar e escolher a opção "Inspecionar".
No exemplo abaixo, modificaremos a etiqueta de porcentagem de desconto que aparece na lista de produtos:
2. Vai abrir a janela de código no navegador e, no canto inferior direito, você encontrará o CSS (na aba "Styles" ou "Estilos").
3. A partir daí, você pode modificar os aspectos visuais do item selecionado.
Para saber qual é o "nome" do elemento que você deseja alterar, siga os passos abaixo.
Identificar o elemento
3.1. Na tela de códigos do navegador, clicar no ícone 
, localizado na parte superior da janela.
3.2. Posicione o mouse sobre o elemento que deseja alterar a cor e você verá a sua identificação. Confira o exemplo no GIF abaixo:
Sabemos que o item é o ".label-primary, .label-accent".
Warning
Modificaremos a cor de fundo da etiqueta de porcentagem de desconto do produto para "Dark magenta", de código hexadecimal #8B008B.
4. Na aba "Styles" da janela de códigos, posicionar o mouse sobre a seção para confirmar se é o elemento foi realmente selecionado.
Em caso positivo, basta clicar onde está a indicação da cor e alterar com o código hexadecimal da mesma. Veja o exemplo em GIF:
Success
A alteração feita na janela de códigos não será salva por definitivo na sua loja virtual, é apenas para você visualizar como ficará o elemento.
5. Se for a alteração que você queria fazer, agora será o momento de selecionar a regra de CSS e copiar o código final.
Confira o GIF de exemplo:
6. Seguir os passos que indicamos no tutorial 👉 Como inserir um código CSS na minha Nuvemshop? para implantar o código no painel administrador de sua Nuvemshop.
Pronto! 🙌
Agora você sabe como identificar o elemento e copiar o código CSS para realizar as modificações no layout.
Info
Recomendamos que teste as alterações sem publicar o Layout, usando a ferramenta de rascunho, conferindo se fica bem visível tanto no computador quanto no celular. Para saber mais, consultar o tutorial 📝Como editar o layout da minha loja em rascunho?.
Para ver exemplos de personalização com a linguagem CSS, acessar:
📝 O que dá para ser alterado por CSS no layout da minha loja?