Central de Atendimento Nuvem Configure sua loja Layout Personalização básica Cores e fontes

Como alterar as cores do meu layout?

Veja os passos para alterar as cores de elementos do layout, para personalizar a loja virtual de acordo identidade visual da sua marca.

Última atualização: 14/07/2022

Para que a sua loja virtual reflita a identidade visual da sua marca, é importante que personalize as cores do layout através do painel administrador Nuvemshop.

Delete

Info

Recomendamos que use cores que se adaptam ao seu logo e a fundos claros, para que seus produtos sejam destacados no site.

Além disso, é importante verificar se as cores configuradas para o seu design não se sobrepõem. Se você tiver duas cores iguais ou muito parecidas, é possível que existam elementos ou textos que não sejam vistos em sua loja.

Neste tutorial, te mostramos como eleger e alterar as cores de sua loja virtual.

Alterar as cores do layout

1. Acessar o painel administrador Nuvemshop.

2. Seguir pelo caminho "Minha Nuvemshop > Layout" e clicar em "Personalizar seu Layout atual".

Caminho para acessar o editor de layout no painel Nuvemshop

3. Na seção 'Imagem da sua marca', clicar na opção "Cores da sua marca".

Seção imagem da sua marca > Cores da sua marca

4. Você terá duas opções para alterar as cores do seu layout:

  • Alterar as cores de elementos distintos, selecionando manualmente cada cor;
  • Usar combinações de cores pré-definidas.

Delete

Success

Antes de prosseguir com a seleção de cores do seu Layout, recomendamos ler as indicações para elemento que uma cor for aplicada. Ao fazer isso, você evitará que esses elementos fiquem ocultos ou em uma configuração que dificulte a sua visualização/leitura.


Paleta de cores manual

Na seção 'Cores da sua marca', você verá os elementos que pode personalizar, como: cor principal, cor secundária, cor de destaque, cor de fundo e dos textos, entre outros. Lembrando que alguns layouts possuem mais possibilidades de edição.

Lista dos elementos para eleger as cores
Delete

Info

Recomendamos não usar mais de quatro cores diferentes para manter a identidade visual da sua marca.

Clique no círculo de cor de cada elemento que deseja alterar para eleger a cor de sua preferência. Para usar uma cor diferente das que já aparecem como sugestão, basta clicar em "Nova cor".

Botão para eleger uma nova cor para o layout
Nesse caso, será possível escolher uma cor a partir do quadro, onde você pode: 1) mudar a escala na barra do lado direito e 2) selecionar o tom da cor no quadrado, no lado esquerdo. 

Veja o GIF de exemplo:

GIF de exemplo para escolher e usar uma nova cor

Delete

Info

Para adicionar cores personalizadas, você pode usar a lista de cores com seus códigos correspondentes do nosso tutorial 👉 Quais cores posso usar no Layout e nas variações de produtos?.

Delete

Paleta de cores pré-definidas

Existem as combinações de cores pré-determinadas, que seguem o padrão de cada layout

Ao selecionar alguma delas, sua loja terá as mesmas cores que demonstramos na 🎨 Loja de Layouts, de acordo com o tema em uso.

Seção "Combinações pré-definidas" com três opções de grupos de cores

Ao escolher uma das combinações, mostraremos a visualização de como as cores se aplicam no layout, no lado direito da tela de edição. Você pode trocar para a versão mobile também, para ver como o site é apresentado em celulares e tablets.

Confira o GIF de exemplo:

GIF de exemplo para visualizar as combinações de cores pré-definidas no layout

Delete


Delete

Warning

Tenha em conta que as opções de cores podem variar dependendo do layout que escolheu. Nesse tutorial, estamos usando o Amazonas

Cada layout possui uma configuração diferente de elementos e cores e nem todos serão iguais. Em alguns casos, as cores escolhidas podem ser aplicadas em mais de um elemento do layout, que estão "ligados" no código-fonte para manter a estética do design.


5. Após escolher as cores para os elementos, basta clicar no botão "Publicar alterações".

Clicar no botão para publicar as alterações realizadas no layout

Se você estiver editando pelo rascunho, pode escolher entre "Salvar rascunho" ou "Publicar".

Clicar nos botões para salvar as edições do rascunho ou publicar na loja

Delete

Info

Para testar as alterações sem publicar o Layout, recomendamos que use a versão rascunho. Para saber mais, consulte o tutorial 📝 Como editar o layout da minha loja em rascunho?.



Pronto! 🙌

As novas cores aplicadas já estão aplicadas em sua Nuvemshop.

Delete

Info

Sugerimos que deixe o fundo da sua loja liso para destacar os produtos. Mas, caso esteja usando os layouts Trend e Simple e queira incluir uma imagem de fundo no site, veja os passos do tutorial 👉 Como colocar uma imagem de fundo no layout?


Informações extras

Escolher as cores para o layout 

Além de contar com o nosso guia de cores, mencionado no passo 4 deste tutorial, recomendamos algumas ferramentas que realizam combinações de cores, como:

  • 🌐 Color Hunt possui já diferentes combinações de cores prontas e você pode escolher qual a sua preferida e, passando o mouse em cima das cores, poderá pegar os códigos delas;

  • 🌐 Palettr onde você busca diferentes combinações de cores por temas e assim que você busca um tema, verá imagens e cores com os códigos para te inspirar;

  • 🌐 ColorThief é uma ferramenta que te permite puxar a paleta de cor de alguma imagem e você ainda poderá carregar sua própria imagem para puxar os códigos das cores.
Delete

Alterar as cores do Checkout

Hoje também é possível alterar as cores do checkout da sua loja. Confira os passos no tutorial abaixo:


Delete

Warning

Antes alterar as cores do seu Layout, certifique-se de que as cores dos botões do seu Layout estão diferentes da cor do seu plano de fundo. Caso isso, recomendamos alterar para evitar que algum elemento fique oculto.

Delete

Alterar a cor de um único elemento (botão, texto, etc.)

Se após definição das cores do seu Layout, pode acontecer que algum botão, texto ou qualquer elemento da sua loja fique em uma cor que não seja agradável ao olhar dos clientes, ocultando alguma informação importante.

Caso isso aconteça, é possível gerar um tipo de código chamado CSS e aplicá-lo em um campo chamado "Edição de css avançada" nas configurações do Layout.

Para saber mais sobre o que é possível alterar no seu Layout via código CSS, recomendamos ler o tutorial 👉 O que dá para ser alterado por CSS no layout da minha loja?.

Também recomendamos ler o tutorial 👉 Como obter o código CSS para usar na minha Nuvemshop?, nele ensinamos como conseguir localizar o código do elemento que deseja alterar a cor.

Assim que você obter o código, basta seguir os passos do tutorial 👉 Como inserir um código CSS na minha Nuvemshop? para aplicar esse código CSS.

Delete

Success

A Nuvemshop não gera nenhum tipo de código em HTML ou CSS. Se precisar gerar um código com objetivo de alterar as cores desses elementos, você pode solicitar para um desenvolvedor web de sua confiança ou solicitar um orçamento para uns dos 🛠️ Especialistas Nuvemshop sem compromisso.

Delete

Personalização avançada do layout 

Se após personalizar as cores do seu Layout e quiser inserir banners ou alterar alguns elementos da sua loja por meio do código-fonte ou usando código de CSS, consulte o nosso índice abaixo:

Delete


O artigo ajudou você?