Cabeçalho
O que você vai aprender
- Pra que serve e como ele "flutua" sobre o conteúdo
- Como funcionam as duas linhas (superior/inferior)
- Onde vem o logo e o menu de verdade
Pra que serve
É o topo fixo da loja: logo, menu de navegação, busca, conta do cliente e seletor de idioma/país. Ele flutua sobre o conteúdo da página (não empurra o conteúdo pra baixo), o que permite efeitos como transparência sobre um banner.
O cabeçalho é dividido em duas linhas (superior e inferior), cada uma com seu próprio esquema de cores, você pode colocar o logo numa linha e o menu na outra, por exemplo. O conteúdo de cada linha (logo, menu) é definido pelos blocks internos do tipo _header-logo e _header-menu, que já vêm configurados por padrão.
Como adicionar
- No Editor de temas, clique em Adicionar section
- Escolha Cabeçalho
- Ajuste as configurações conforme a referência abaixo
Como configurar
Logo e menu
| Configuração | Pra que serve |
|---|---|
| Posição do logo | Esquerda, centro ou direita. |
| Posição do menu | Esquerda, centro ou direita. |
Conta do cliente
| Configuração | Pra que serve |
|---|---|
| Menu | Menu exibido no dropdown da conta do cliente (só funciona com contas de cliente novas, não com o sistema legado). |
Pesquisa
| Configuração | Pra que serve |
|---|---|
| Ícone de busca | Mostra ou esconde o ícone de lupa. |
| Posição | Esquerda ou direita, no desktop. |
Localização
| Configuração | Pra que serve |
|---|---|
| País/região | Mostra o seletor de país (só aparece se a loja tiver mais de um mercado configurado). |
| Bandeira | Mostra a bandeira do país ao lado do seletor. |
| Seletor de idiomas | Só aparece se a loja tiver mais de um idioma publicado. |
Aparência
| Configuração | Pra que serve |
|---|---|
| Altura | Compacto ou Padrão. |
| Cabeçalho fixo | "Sempre" mantém o cabeçalho visível ao rolar a página; "Nunca" deixa ele rolar junto com o conteúdo. |
| Raio do canto | Arredondamento do cabeçalho (efeito "pílula" flutuante). |
Cores
| Configuração | Pra que serve |
|---|---|
| Padrão | Cor da linha superior. |
| Linha inferior | Cor da segunda linha, se estiver sendo usada. |
Boas práticas
- Se o país/idioma não aparecer mesmo ativado aqui, confira se a loja realmente tem mais de um mercado/idioma configurado, o seletor só aparece quando existe escolha real.