O cabeçalho é uma área que fica no topo de cada página da sua loja Nuvemshop. O cabeçalho exibe e isola os elementos superiores fixos da loja, como logotipo e menu principal.
Seções adicionais
Dentro do Cabeçalho do layout Ipanema, você pode incluir dois tipos de seção. Além das configurações do próprio cabeçalho, você pode adicionar também a seção “Barra de anúncio”.
Veja na tabela abaixo, como funciona e para que serve cada uma:
Seção |
Quando usar? |
O que configurar? |
| Cabeçalho | Para exibir logotipo, navegação principal, busca, carrinho e acesso à conta em uma única barra consistente. | Uma linha extra de navegação (por exemplo, links em destaque, categorias secundárias) com textos e URLs para que os clientes descubram coleções ou campanhas importantes. |
| Barra de anúncios | Para destacar valores mínimos para frete grátis, promoções, prazos ou avisos curtos acima do cabeçalho principal. | Uma mensagem curta (com formatação básica) e um link opcional (por exemplo, para uma categoria ou página de campanha). |
A seguir, mostramos como você pode personalizar e configurar o cabeçalho da sua loja usando o layout Ipanema.
Vamos aos passos!
1. Acessar o painel administrador Nuvemshop.
2. Seguir o caminho "Loja online > Layout" e clicar em "Editar layout".
3. No menu lateral esquerdo, clicar em “Cabeçalho”.
4. Em seguida, clicar novamente na opção “Cabeçalho” para poder abrir as configurações.
5. Clicar abaixo para seguir o passo a passo de como configurar o cabeçalho e todos seus elementos:
Cabeçalho
5.1. No menu lateral, você poderá configurar a disposição, design e cores do cabeçalho:
Disposição
- Posição do logo: escolha entre Esquerda ou Centro para definir onde o logotipo aparecerá no cabeçalho da versão desktop.
- Usar outra posição para celulares: ativar essa opção caso queira que o logo apareça em uma posição diferente na versão mobile. Permite escolher entre Esquerda ou Centro.
Design
- Largura: define a largura do cabeçalho. Selecione Página para alinhá-lo ao conteúdo principal ou Completo para que ele ocupe toda a tela.
- Espaçamento superior e inferior: ajusta o espaçamento vertical interno do cabeçalho, em pixels (px).
- Espaçamento esquerdo e direito: ajusta o espaçamento horizontal interno do cabeçalho, em pixels (px).
- Espaçamento diferente para celular: ative para configurar valores de espaçamento exclusivos para dispositivos móveis.
- Cabeçalho sempre visível ao navegar na loja: quando ativado, o cabeçalho fica fixo no topo da tela enquanto o cliente rola a página, facilitando o acesso ao menu, busca e carrinho.
Cores
- Cor de fundo: clique na bolinha de cor para selecionar e definir a cor de fundo do cabeçalho (ex.: #FFFFFF para branco).
- Cor dos textos: clique na bolinha de cor para selecionar e definir a cor dos textos exibidos no cabeçalho (ex.: #000000 para preto).
- CSS personalizado: essa opção permite adicionar regras de CSS próprias para personalizar visualmente o cabeçalho além das opções padrão.
5.2. Feito isso, você também poderá configurar os outros elementos do cabeçalho, como logo, utilidades e navegação.
Veja abaixo como configurar cada um desses elementos:
Logo
Clicar em “Logo” para poder abrir as configurações no menu lateral e escolher a altura do logo. Você também poderá configurar uma altura específica para celulares selecionando a opção “Usar altura diferente para celular”.
Utilidades
Clicar em “Utilidades” para poder abrir as configurações no menu lateral, onde você poderá configurar a disposição, design e cores dos ícones do cabeçalho.
Disposição
- Formato em computadores: escolha como os elementos serão exibidos na versão desktop. Selecione “Ícone e texto” para mostrar o nome ao lado do símbolo ou “Ícone” para exibir apenas o símbolo.
- Tipo de busca: define como o campo de busca aparece no cabeçalho. “Expandido” mantém a barra de pesquisa sempre visível, enquanto “Comprimido” mostra apenas o ícone, que abre o campo ao ser clicado.
- Usar outro tipo para celulares: ative para configurar um tipo de busca diferente especificamente para dispositivos móveis.
- Mostrar ícone de usuário no celular: quando ativado, exibe o ícone de acesso à conta do cliente na versão mobile.
Design
- Ícone de compra: define qual ícone representará o carrinho de compras no cabeçalho. Escolha entre Sacola ou Carrinho.
- Tamanho do ícone: ajusta o tamanho dos ícones exibidos no cabeçalho, em pixels (px).
- Usar outro tamanho para celulares: ative para definir um tamanho de ícone diferente na versão mobile.
- Separação entre elementos: controla o espaçamento entre os ícones e demais elementos do cabeçalho, em pixels (px).
Cores dos ícones
- Ícone: define a cor dos ícones do cabeçalho. A opção Padrão mantém a cor definida nas configurações gerais do tema, mas é possível personalizar para uma cor específica, basta clicar em cima do botão e selecionar uma nova cor.
Navegação
Clicar em “Navegação” para abrir as configurações do menu de navegação do cabeçalho no menu lateral. Você poderá configurar a navegação principal, disposição, design, cores e recursos adicionais do cabeçalho.
Navegação principal
- Usar texto em maiúsculas: quando ativado, exibe os itens do menu principal totalmente em letras maiúsculas.
- Mostrar um link de "Categorias" em computadores: ative para exibir um link adicional chamado "Categorias" no menu da versão desktop.
- Mostrar uma barra horizontal de categorias no celular: quando ativado, apresenta uma barra horizontal com as categorias da loja na versão mobile, facilitando a navegação.
Disposição
- Alinhamento no computador: define o alinhamento do menu principal na versão desktop. Escolha entre Esquerda ou Centro.
Design
- Espaçamento superior e inferior: ajusta o espaçamento vertical interno do menu, em pixels (px).
- Espaço entre links: controla a distância horizontal entre os itens do menu, em pixels (px).
Cores
- Cor de fundo: define a cor de fundo do menu. A opção Padrão mantém a cor definida nas configurações gerais do tema.
- Cor dos textos: define a cor dos textos dos links do menu. A opção Padrão mantém a cor definida nas configurações gerais do tema.
- Linha divisória no computador: define a cor da linha que separa o menu do restante do cabeçalho na versão desktop.
Recursos adicionais
- Link em destaque: quando ativado, permite destacar um link específico do menu principal, dando mais visibilidade a uma categoria ou campanha.
- Banner em destaque: quando ativado, exibe um banner dentro do menu, útil para divulgar promoções, lançamentos ou coleções especiais.
- Navegação secundária: quando ativado, adiciona um segundo menu ao cabeçalho, ideal para organizar links extras (como categorias secundárias, institucional ou atendimento).
6. Para adicionar a seção “Barra de anúncio” ao cabeçalho, basta clicar em “Adicionar seção > Barra de anúncio > Adicionar”. Você pode adicionar quantos anúncios desejar, para isso clicar em “Adicionar Anúncio”.
7. Clicar em “Salvar” para publicar as alterações.
Pronto!
O seu cabeçalho está configurado e personalizado exclusivamente para sua loja!
Para saber como gerenciar as seções e páginas do seu layout, consultar o tutorial abaixo:
📝 Como trocar, adicionar e gerenciar páginas e seções do layout Ipanema na Nuvemshop?