Ao criar a sua loja virtual Nuvemshop, você poderá personalizá-la para que seu layout tenha a identidade visual da sua marca. Neste passo a passo, você verá como alterar as cores de alguns elementos de sua loja. 

💡 Dica: recomendamos que não utilize mais do que quatro cores em seu layout e que, idealmente, essas cores estejam relacionadas com as cores do seu logo.

Vamos aos passos!

1.  No painel de administração de sua loja, na seção "Personalizar", clique na opção Minha Nuvemshop > Layout.

2. Você já será direcionado para a página de personalização do seu layout, onde deverá clicar no botão "Personalizar seu layout atual". 

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

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

👉 Poderá usar uma paleta de cores predeterminadas

Nesta seção você verá diferentes combinações de cores e poderá selecionar essas combinações para personalizar o seu Layout de forma mais rápida e simples.

Caso não goste das combinações você pode seguir para a opção de Configuração avançada de cores, por meio dessa ferramenta você poderá trocar as cores separadamente de diferentes elementos da página, como cor principal de sua marca, cor de fundo e cor dos textos.

🌟 Importante: cada layout possui uma configuração diferente de cores e nem todos serão iguais. Em alguns casos, as cores escolhidas podem ser aplicadas para algum elemento do layout e ser aplicada em outros que estão "ligados" no código, para manter a estética do layout.

4. Caso escolha pela personalização manual das cores (Configuração Avançada), é só clicar na opção que deseja alterar e logo em seguida irá expandir um menu com as cores principais.

5. Escolha uma cor e clique sobre ela para selecionar.

6. E se você não gostar de nenhuma das cores que estão na paleta, você pode clicar em "Nova Cor" e escolher a sua cor personalizada:

7. Veja que a cor que escolher terá um código, igual o exemplo abaixo:

Você também poderá usar esse campo para selecionar as cores usando o código chamado hexadecimal na personalização do seu Layout.

📌 Importante: Este campo é indicado para quem possui conhecimentos em código HTML e CSS.

8. Quando finalizar de escolher a cor, clique em "Usar esta cor" e ela já será implementada em seu layout para que veja como ficará antes de salvar.

9. Defina se você quer salvar suas alterações no rascunho do seu layout, ou publicá-las em sua loja:

Para salvar essa alteração em um rascunho, clique em "Salvar rascunho". Para publicá-la imediatamente em sua loja, clique em "Publicar".

🌟 Importante: ao clicar em "Publicar", todas as alterações salvas no seu rascunho serão publicadas na sua loja e não somente a mudança que você fez no momento. Para saber como usar o rascunho consulte o tutorial 👉 Como utilizar um rascunho para editar o layout da minha loja?

Pronto, agora seu layout já está com as cores escolhidas.

💡Dica: se não sabe que cores escolher para que sua loja fique com um ar mais profissional, 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.

Como alterar as cores do Checkout

Hoje também é possível alterar as cores da sua marca no checkout da sua loja. Para saber como fazer essa alteração, acesse o nosso tutorial abaixo.

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.

Nele você encontrará os principais tutoriais para te ajudar nesta personalização.

Encontrou sua resposta?