Compre o Tema Flex na Nuvemshop
Comprar Agora
Flex Nuvemshop
  • Base de conhecimento TemaFlex
  • Sobre o Flex
    • ▶️Treinamento em Vídeo
    • 📙Manual e suporte
    • 📥Contratação e recomendações
    • 🛠️Lista de Funcionalidades
    • ⚙️Log de mudanças e versões
    • ⏳Roadmap - Melhorias
    • 🎨Template Guide - Figma
    • ❓Dúvidas Frequentes
  • Personalizar Layout
    • Cores da sua marca
    • Tipo de Letra
    • Estilos de layout
    • Cabeçalho
      • Layout
      • Cores
      • Barra de anúncio
      • Barra de contatos
      • Logo
      • Barra de busca
      • Carrinho de compras
      • Menu principal
      • Menu para celulares
      • Menu de departamentos
      • Ícones nos menus
    • Página inicial
      • Banners rotativos
      • Categorias principais
      • Informações de frete, pagamento e compra
      • Produtos em destaque
      • Produtos novos
      • Produtos em oferta
      • Produtos em promoção
      • Produtos mais vendidos
      • Produtos com banner
      • Produto principal
      • Banners de categorias
      • Banner em destaque
      • Banners promocionais
      • Banners em grade
      • Marcas
      • Depoimentos
      • Postagens do instagram
      • Postagens do blog
      • Mensagem de boas vindas
      • Mensagem institucional
      • Vídeo
      • Menu adicional
      • Newsletter
      • Popup promocional
      • Ordem das seções
    • Página de categoria
      • Banner de topo
      • Banner de rodapé
      • Filtros e paginação
      • Produtos na lista
    • Item de produto
      • Estrutura
      • Foto do produto
      • Nome do produto
      • Preço do produto
      • Produto sem estoque
      • Botões
    • Página de produto
      • Cabeçalho
      • Informações do produto
      • Galeria de fotos
      • Opções de compra e pagamento
      • Guia de medidas
      • Formas de entrega
      • Informações sobre a compra
      • Campos personalizados
      • Selos personalizados
      • Termos de aceitação
    • Página Institucional
    • Carrinho de compras
      • Valor mínimo de compra
      • Carrinho de compra rápida
      • Formas de entrega
    • Rodapé da página
      • Layout
      • Cores
      • Logo
      • Inscrição para newsletter
      • Menus
      • Redes Sociais
      • Sobre nós
      • Atendimento
      • Formas de pagamento
      • Meios de envio
      • Segurança e certificações
      • Créditos da loja
    • Edição de CSS avançada
  • Minha Nuvemshop
    • Layout
      • Editar Logo e Favicon
      • Personalizar Layout
    • Páginas de Conteúdo
    • Barras de navegação
    • Informação de contato
  • Produtos
    • Cadastrando produtos
    • Categorias
  • Configurações Gerais
    • Meios de pagamento
    • Formas de entrega (Frete)
    • Domínio
  • Considerações Finais
    • Agora é com você!
Powered by GitBook

®2025. FlexCommerce. Todos os direitos reservados.

On this page

Was this helpful?

Export as PDF
  1. Personalizar Layout

Cores da sua marca

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

PreviousDúvidas FrequentesNextTipo de Letra

Last updated 7 months ago

Was this helpful?

  1. Acesse o painel Nuvemshop e siga pelo caminho "Minha Nuvemshop > Personalizar layout".

  2. Clique na opção Cores da sua marca no menu lateral para acessar as configurações das cores da sua loja virtual.

Selecionando suas cores

Dica: recomendamos não utilizar 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".

Importante!

Na hora de selecionar as cores de seu layout, fique atento ao contraste entre a cor principal e secundária, e entre a cor de fundo e cor de texto dos elementos. Ao fazer isso, você evitará que elementos fiquem ocultos ou em uma configuração que dificulte a sua visualização/leitura.

Cores pré-determinadas

No Flex existem combinações de cores pré-determinadas, que seguem o padrão de tema para cada segmento. Ao selecionar a combinação pré-definida, sua loja terá as mesmas cores que demonstramos no layout escolhido de acordo com o tema em uso.

Ao escolher a combinação, o layout mostrará a visualização de como as cores se aplicam, no lado direito da tela de edição. Além disso, você pode selecionar a versão mobile, para visualizar como o site é apresentado em celulares e tablets.

Após escolher as cores para os elementos, clique "Publicar alterações" para finalizar.

Pronto! 🙌

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

Atenção: caso sua página não esteja condizendo com a versão do manual entre em contato para atualizar sua versão do Tema Flex.

1 - Cores da sua marca: você verá os elementos que pode personalizar, como: Cor principal, Cor secundária e Cor de destaque. 2 - Botão de compra: você poderá personalizar tanto a cor de fundo, quanto a cor do texto do botão. Além disso, ao selecionar a opção "Inverter as cores do botão", o layout irá inventer as cores e aplicar uma borda da cor de fundo do botão. - Cores padrões no botão de compra; - Cores invertidas no botão de compra. 3 - Cores de contraste: você poderá personalizar tanto a cor de fundo, quanto a cor do texto. 4 - Etiquetas de frete grátis e desconto: você poderá personalizar tanto a cor de fundo, quanto a cor do texto da etiqueta.

Ao selecionar uma cor, você pode: - Mudar a escala na barra do lado direito; - Selecionar o tom da cor no quadrado, no lado esquerdo; - Utilizar código chamado 'hexadecimal' na personalização do seu Layout. Quando finalizar a escolha da cor, clique em "Usar esta cor". Automaticamente a mesma será implementada em seu layout para uma melhor visualização de como ficará antes de salvar.