O que dá para ser alterado por CSS no layout da minha loja?
Entenda o que é possível alterar em sua loja sem precisar acessar o FTP do layout.
Última atualização: 09/01/2021
Nós já te mostramos o que você consegue personalizar no layout da sua loja virtual Nuvemshop através do Administrador Nuvem e agora te mostramos o que você consegue personalizar usando códigos CSS, personalizando de uma forma mais específica.
A seguir, você encontra um índice de tutoriais, separado por layout, onde apresentamos alguns códigos já pré criados, para que você possa aplicar algumas modificações em sua loja. É importante ressaltar que a Nuvemshop não faz customizações de layouts ou gera códigos CSS por encomenda. Apenas disponibilizamos essas opções para ajudar com pequenas alterações.
Para outros códigos ou personalizações mais drásticas, entre em contato com um Especialista Nuvem.
- Trend - Códigos CSS para customização do layout
- Discreet - Códigos CSS para customização do layout
- Focus - Códigos CSS para customização do layout
- Lifestyle - Códigos CSS para customização do layout
- Silent - Códigos CSS para customização do layout
- Simple - Códigos CSS para customização do layout
- Material - Códigos CSS para customização do layout
Abaixo mostramos as alterações básicas que podem ser feitas via código CSS:
Trocar a cor de qualquer elemento do layout
Você pode, por exemplo, alterar a cor da tag de ofertas ou o botão de compras, mudando de uma cor para outra.
Ocultar elementos
É possível ocultar alguns elementos que não quiser que apareça em sua loja, como a barra de categorias principal, por exemplo.
Modificar tamanhos dos elementos
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.
Mudar o alinhamento ou posição de algum elemento
Você pode jogar um elemento para esquerda, para direito ou centralizá-lo; assim como jogá-lo mais para cima ou mais para baixo.
Antes:
Depois:
Outras possíveis alterações via CSS
1. É possível "esconder" botões ou informações dentro da sua loja, como o botão de compra, por exemplo. Para isso, é preciso que criar um código CSS e inseri-lo na aba de Edição avançada de CSS, dentro do seu Administrador Nuvem, na aba Layout > Personalizar seu layout; é a última opção do menu lateral.
2. Alterar cor dos botões
3. Alterar cor de um texto ou do preço de um produto
4. Esconder o cálculo de frete
5. Ocultar tag de "Frete Grátis" ou "Oferta"
6. Mover um elemento para esquerda, direita ou centralizar
7. Retirar as opções de cores no filtro de busca de produtos
8. Retirar menu lateral
9. Diminuir espaço entre imagem do produto e informações, como nome e valor
10. Esconder as opções de Cores por Escrito das variações no filtro de buscas, na página de produtos
11. Alterar cor do cabeçalho do layout
12. Esconder algum elemento do layout na versão responsiva
Para vem em qual campo da plataforma você deve incluir os códigos CSS, você pode acessar o tutorial Como edito o código CSS da minha loja.