A identidade visual é um dos pilares mais importantes para transmitir profissionalismo e fortalecer a presença da sua marca no ambiente digital.
Pensando nisso, o layout Ipanema oferece um conjunto de configurações globais de identidade de marca que permitem personalizar cores, tipografia e botões, garantindo consistência visual em todas as páginas da sua loja.
Neste tutorial, vamos mostrar passo a passo de como configurar cada uma dessas opções para deixar sua loja com a cara da sua marca.
Vamos aos passos!
1. Acessar o painel administrador Nuvemshop.
2. Seguir o caminho "Loja online > Layout" e clicar em "Editar layout".
3. Clicar no ícone da engrenagem no menu superior para acessar as configurações globais.
4. Em seguida, no menu lateral você irá visualizar a seção de “Identidade de marca”. Nessa seção, você poderá configurar as cores, tipografia ou botões da loja, conforme desejar.
Cores
Cores principais
- Cor de fundo: define a cor de fundo principal da loja, aplicada às páginas e seções do tema.
- Cor dos textos: define a cor padrão dos textos exibidos em toda a loja.
- Cor de destaque: define a cor utilizada em informações estratégicas que merecem maior visibilidade, como textos de desconto, frete grátis e parcelamento sem juros.
Etiquetas de promoção
- Cor de fundo: define a cor de fundo das etiquetas de promoção exibidas nos produtos (ex.: "Promoção", "Desconto").
- Cor dos textos: define a cor do texto exibido dentro das etiquetas de promoção.
Etiquetas de frete grátis
- Cor de fundo: define a cor de fundo das etiquetas de frete grátis exibidas nos produtos elegíveis.
- Cor dos textos: define a cor do texto exibido dentro das etiquetas de frete grátis.
Tipo de letra
Títulos
- Fonte: define a família tipográfica utilizada nos títulos da loja. Escolha entre as opções disponíveis para refletir a identidade visual da sua marca.
- Tamanho: ajusta o tamanho dos títulos, em pixels (px).
- Negrito: quando ativado, aplica o estilo negrito a todos os títulos da loja.
Helpjuice Warning Callout Title
Essa configuração geral pode ser sobrescrita por ajustes específicos em cada seção.
Textos
- Fonte: define a família tipográfica utilizada nos textos gerais da loja. Escolha uma fonte legível e alinhada à identidade da marca.
- Tamanho: ajusta o tamanho padrão dos textos, em pixels (px).
Parágrafo
- Tamanho: ajusta o tamanho dos textos em formato de parágrafo, em pixels (px). Essa configuração se aplica a descrições de produtos, banners e mensagens exibidas em diferentes seções da loja.
Botões
Botão principal
Utilizado nas ações mais importantes da loja, como "Adicionar ao carrinho" ou "Finalizar compra".
- Cor de fundo: define a cor de fundo do botão principal.
- Cor de linha e texto: define a cor do contorno e do texto exibido dentro do botão.
- Estilo: define o estilo visual do botão. Escolha entre “Preenchido” (botão com fundo sólido) ou "Contorno" (botão apenas com borda).
- Arredondado: ajusta o nível de arredondamento dos cantos do botão, em pixels (px), permitindo desde cantos retos até totalmente arredondados.
Botão secundário
Utilizado em ações complementares, que dão suporte às principais sem competir visualmente com elas.
- Cor de fundo: define a cor de fundo do botão secundário.
- Cor de linha e texto: define a cor do contorno e do texto exibido dentro do botão.
- Estilo: define o estilo visual do botão. Escolha entre “Preenchido”, “Contorno” ou "Sublinhado".
- Arredondado: ajusta o nível de arredondamento dos cantos do botão, em pixels (px).
Botão terciário
Utilizado em ações de menor destaque, geralmente como links ou opções auxiliares dentro da loja.
- Cor de fundo: define a cor de fundo do botão terciário.
- Cor dos textos: define a cor do texto exibido dentro do botão.
- Estilo: define o estilo visual do botão. Escolha entre “Preenchido”, “Contorno” ou "Sublinhado".
- Arredondado: ajusta o nível de arredondamento dos cantos do botão, em pixels (px).
5. Clicar em “Salvar” para publicar as alterações.
Pronto!
Agora você já sabe como utilizar as configurações globais para personalizar a identidade de marca da sua loja virtual.