Central de Atendimento Nuvem Configure sua loja Layout Personalização avançada

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: 14/06/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.

Importante:

a seguir, esse tutorial te mostrará o que dá para ser alterado via CSS, caso você conheça essa linguagem de programação. Você pode também entrar em contato com um Especialista Nuvem para que ele crie e personalize seu 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

Dica:

Basicamente, é possível alterar via CSS elementos que já existem, não é possível criar novos elementos. Então tudo que quiser alterar os elementos que já existem, separadamente, é possível fazer 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.