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: 05/04/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.

Paleta de cores manual

Dentro da 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

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ê?