Table of Contents
Trocar a cor dos elementosOcultar elementosModificar tamanhos dos elementosMudar o alinhamento ou posição dos elementosOutras possíveis alterações via CSSAtravés do campo Edição de css avançada, você pode inserir códigos de CSS que permitem fazer pequenas alterações em seu Layout, como, por exemplo, alterar a cor de um botão ou texto.
Neste tutorial, explicaremos quais alterações é possível fazer via o campo CSS no painel de sua loja.
Importante:
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.
Trocar a cor de qualquer elemento do layout
Clique para mais informações
Você pode, por exemplo, alterar a cor da tag de ofertas ou o botão de compras, mudando de uma cor para outra.
No exemplo abaixo, alteramos a cor do botão de oferta para rosa:
Ocultar elementos
Clique para mais informações
É possível ocultar alguns elementos que não quiser que apareça em sua loja, como a barra de categorias principal, por exemplo.
No exemplo abaixo, ocultamos a barra de categorias principais que fica do lado esquerdo da loja:
Modificar tamanhos dos elementos
Clique para mais informações
Com as edições via CSS, você poderá aumentar o tamanho do logo dentro do seu layout, por exemplo. Mas é possível fazer isso com tamanho de banners, fonte e imagens.
Na imagem abaixo, alteramos o tamanho do logotipo de uma loja:
Mudar o alinhamento ou posição de algum elemento
Clique para mais informações
Você pode jogar um elemento para esquerda, para direito ou centralizá-lo; assim como jogá-lo mais para cima ou mais para baixo.
No exemplo abaixo, mostramos como fica após alteração do alinhamento do menu principal no cabeçalho:
Outras possíveis alterações via CSS
Clique para mais informações
1. Alterar cor de um texto ou do preço de um produto
2. Esconder o cálculo de frete
3. Ocultar tag de "Frete Grátis" ou "Oferta"
4. Mover um elemento para esquerda, direita ou centralizar
5. Retirar as opções de cores no filtro de busca de produtos
6. Retirar menu lateral
7. Diminuir espaço entre imagem do produto e informações, como nome e valor
8. Esconder as opções de Cores por Escrito das variações no filtro de buscas, na página de produtos
9. Alterar cor do cabeçalho do layout
Delete
E para inserir o código de CSS em sua loja virtual, siga os passos do tutorial abaixo:
📝 Como editar o código CSS da minha loja?
Success
Através do código CSS não é possível criar novos elementos, ou seja, você só pode alterar um elemento que já existe em sua loja.