Arquitetura do Header Navigation no Shopify: Modelos de Layout, Espaço Visual e Breakpoints
O cabeçalho de desktop opera dentro de um orçamento horizontal fixo, equilibrando identidade de marca, categorias de produtos, ferramentas de utilidade e etapas de checkout.
Tratar o cabeçalho como um contêiner flexbox não gerenciado faz com que os links colidam com a busca, quebrem em segundas linhas ou colapsem em gavetas móveis. Uma navegação estável exige escolha deliberada de layout, cálculo de espaço e testes responsivos.
Resposta rápida: Qual layout de cabeçalho do Shopify se adapta à sua loja?
Não existe um único melhor layout de cabeçalho no Shopify. Lojas de catálogo costumam se dar melhor com logo à esquerda e links de categoria em linha, pequenas boutiques podem usar logo centralizado com links divididos, e grandes lojas multidepartamento precisam de um cabeçalho de dois níveis com uma barra utilitária separada. Evite esconder a navegação desktop atrás de um hambúrguer.
A escolha da arquitetura de cabeçalho desktop correta depende de quatro modelos essenciais de layout:
- Logo à esquerda + Navegação em linha: Ancora o logo à esquerda, com os links de categoria fluindo para a direita. Oferece a maior extensão horizontal para as categorias do catálogo, agrupando os utilitários à direita.
- Logo centralizado + Navegação dividida: Centraliza o logo, ladeado por links de categoria dos dois lados. Serve para catálogos pequenos, mas divide o espaço horizontal em dois trechos mais curtos.
- Navegação empilhada em dois níveis: Divide a navegação em duas barras horizontais. Uma faixa superior fina abriga os utilitários, reservando a barra inferior para as categorias de produtos.
- Gaveta oculta no desktop: Esconde os links atrás de um ícone de hambúrguer. Embora visualmente minimalista, o Nielsen Norman Group desaconselha a navegação oculta em interfaces desktop.
- O risco do viewport de notebook: A escala de exibição pode reduzir o viewport CSS efetivo de um notebook bem abaixo do de um monitor desktop. Revise as análises da sua loja e teste a navegação em larguras de notebook.
- A hipótese da navegação dividida: Centralizar um logo é uma ideia de layout, não um padrão comprovado, e não encontramos nenhum estudo publicado que a teste. Verifique o engajamento com seus próprios mapas de cliques ou de calor.
- Isolar utilitários das categorias: Links utilitários são ações e ferramentas secundárias. Mantê-los fora da linha de categorias deixa a barra principal para as categorias de produtos.
Por que o espaço do cabeçalho acaba em telas de notebooks
Designers costumam revisar um template em um monitor largo. Alguns clientes navegam em notebooks, onde a escala de exibição do sistema operacional reduz o número de pixels CSS disponíveis para a página.
Como ilustração (um cálculo, não uma estatística): uma tela de 1920px de largura com escala de 150% no Windows resulta em uma largura CSS efetiva de 1280px (1920 / 1.5 = 1280). Verifique nas análises da sua loja os tamanhos de viewport que seus próprios clientes realmente usam.
Quando os elementos do cabeçalho excedem a largura horizontal, a navegação pode quebrar de três maneiras distintas:
+-------------------------------------------------------------------------------+
| Wide Viewport - Illustration |
| [Brand Logo] Women Men Accessories Footwear Sale [Search] [Cart] |
+-------------------------------------------------------------------------------+
+-------------------------------------------------------------------------------+
| Laptop-Width Viewport - Unplanned Wrapping Illustration |
| [Brand Logo] Women Men Accessories Footwear |
| Sale [Search] [Cart] <-- Wraps onto second line, shifting content downward|
+-------------------------------------------------------------------------------+
- Quebra involuntária de linha no flexbox: Os contêineres flex empurram as categorias finais ou os campos de busca para uma segunda linha, aumentando a altura do cabeçalho e deslocando o conteúdo promocional principal.
- Transbordamento horizontal e utilitários cortados: Contêineres flex com nowrap empurram os utilitários além da borda do viewport, escondendo o carrinho fora da tela ou gerando barras de rolagem horizontais.
- Colapso prematuro para a gaveta no desktop: As media queries do tema podem trocar para o menu hambúrguer mobile em um viewport desktop com largura de notebook quando o espaço horizontal não é gerenciado.
Segundo as diretrizes de Cumulative Layout Shift (CLS) do web.dev, “um deslocamento de layout ocorre sempre que um elemento visível muda de posição de um quadro renderizado para o seguinte”. Um cabeçalho que já quebra na primeira renderização é um problema de layout, mas por si só não é um deslocamento de layout. Os deslocamentos acontecem quando o cabeçalho muda depois de ter sido exibido, por exemplo quando uma fonte ou um script carregado tardiamente altera sua altura. Deslocamentos de layout em até 500 milissegundos após uma interação do usuário são excluídos do CLS.
O que a pesquisa diz sobre escaneamento visual, busca e links utilitários
As pesquisas de usabilidade publicadas nos dão algumas expectativas básicas para o design de cabeçalhos de e-commerce. Elas não resolvem todas as questões de layout, por isso indicamos onde um ponto é inferência nossa.
Navegação visível vs. oculta no desktop
No estudo do Nielsen Norman Group de Pernice & Budiu (2016), “no desktop, as pessoas usaram os menus ocultos em apenas 27% dos casos”, enquanto a navegação visível e a combinada foram usadas em 48% e 50% dos casos, respectivamente. A orientação do NN/g é direta: “Não use navegação oculta (como ícones de hambúrguer) em interfaces de usuário para desktop.”
Escaneamento no canto superior esquerdo e a hipótese de navegação dividida
O artigo do NN/g sobre o padrão em F (Pernice, 2017) descreve “muitas fixações concentradas no topo e no lado esquerdo da página”. Um logo à esquerda com links de categoria fica justamente nessa área.
A navegação dividida com logo centralizado é uma hipótese. Não encontramos nenhum estudo publicado que a teste. Se a atenção começa no canto superior esquerdo, os compradores que escaneiam o flanco esquerdo precisam saltar sobre o logo central para chegar às categorias do flanco direito, de modo que esses links podem receber menos atenção. Lojistas que usam cabeçalhos divididos devem verificar o engajamento com mapas de cliques ou de calor.
Posicionamento e tamanho do campo de busca
A orientação do NN/g sobre busca (Nielsen, 2001) é que “nas páginas iniciais, a busca deve ser um campo de digitação e não um link”, posicionada no topo da página, geralmente no canto direito, e “larga o suficiente para conter a consulta típica”. Uma pequena boutique ainda pode preferir um ícone de busca expansível para economizar espaço; trate isso como um compromisso a testar, e não como uma boa prática comprovada por pesquisa.
Categorias de produtos como itens de nível superior
O Baymard Institute (2023) constatou que “33% dos sites mobile não tornam as categorias de produtos os itens de nível superior”, e observa que “ter as categorias de produtos como itens de nível superior em sites desktop corresponde à implementação mobile ideal”. Nossa inferência: se “About Us”, “FAQ” ou “Track Order” ficam na mesma linha das categorias, eles competem com as categorias por espaço e atenção limitados. Isso é um julgamento de design, não um resultado medido.
Comparação de quatro modelos de layout de cabeçalho
Para escolher a arquitetura de cabeçalho correta, os lojistas devem avaliar cada modelo conforme a amplitude do catálogo, as necessidades de busca e a carga operacional de utilitários.
| Header Layout Model | Fits Which Store Type | Search Implementation | Utility Links | Main Risk |
|---|---|---|---|---|
| Logo à esquerda + Em linha | Varejo de catálogo de departamento único | Campo compacto ou ícone expansível ao clicar | Agrupados no bloco utilitário à direita | Quebra de linha quando os rótulos excedem a largura disponível |
| Logo centralizado + Dividido | Pequenas boutiques ou marcas de estilo de vida de luxo | Ícone minimalista com sobreposição modal | Repartidos entre os flancos esquerdo e direito | Não verificado: as categorias do flanco direito podem receber menos atenção |
| Dois níveis empilhados (Two-Tier) | Catálogos multidepartamento e lojas internacionais | Campo de texto largo, proeminente e persistente | Isolados em uma barra utilitária superior dedicada | Altura vertical adicional acima da dobra |
| Gaveta oculta no desktop | Marcas editoriais ou de portfólio sem catálogo | Oculta dentro de um painel off-canvas | Aninhados dentro de um painel off-canvas | O NN/g desaconselha a navegação desktop oculta |
Observação: Esta comparação é um resumo de padrões arquiteturais, não uma auditoria medida de lojas específicas.
A navegação em linha alinhada à esquerda é um ponto de partida comum no e-commerce. Ancorar o logo à esquerda e fazer os links fluírem para a direita dá às categorias de produtos uma extensão horizontal ininterrupta.
A navegação dividida com logo centralizado oferece simetria editorial para marcas com poucos links. No entanto, ao dividir o espaço, adicionar categorias ou seletores de localização pode causar colisões rapidamente.
A navegação empilhada em dois níveis resolve os conflitos de espaço separando as funções na vertical. Lojistas de grande volume podem colocar a identidade da marca, a busca aberta e os utilitários na barra superior e reservar a barra inferior para as categorias. A profundidade das categorias pode então ir para um mega menu: o Baymard relata que “os menus suspensos acionados por hover (também chamados de ‘mega menus’) são atualmente usados como navegação principal em 88% de todos os principais sites de e-commerce dos EUA” em seu benchmark de navegação principal, cujos exemplos vêm de um benchmark de UX de 344 sites de e-commerce. Para o design do painel em si, veja nosso guia de boas práticas de mega menu no Shopify.
Do ponto de vista da acessibilidade, o W3C WAI ARIA Authoring Practices Guide observa que “um menu visualmente persistente é uma menubar”.
Separar menus utilitários da navegação do catálogo
Na arquitetura de sites, a navegação utilitária abrange ferramentas que auxiliam as tarefas do cliente sem pertencer ao catálogo de produtos, como login de conta, rastreamento de pedidos, seletores de moeda, localizadores de lojas e suporte ao cliente. O NN/g resume assim: “A navegação utilitária consiste em ações e ferramentas secundárias”.
Figura 1: Concept illustration (ilustração conceitual) — cabeçalho com links utilitários misturados ao menu principal comparado a um cabeçalho que os move para uma barra utilitária.
Segundo o Nielsen Norman Group (Farrell, 2015), os links utilitários podem receber “um posicionamento visual secundário (menos proeminente)” em comparação com a navegação principal.
Nas vitrines Shopify, os lojistas geralmente têm três maneiras de tirar os links utilitários da linha principal. Quais estão disponíveis depende do seu tema:
- Um menu secundário ou área utilitária na seção Header do tema: Alguns temas oferecem uma segunda configuração de menu ou uma faixa fina acima da barra principal. Consulte as configurações de Header do seu tema para ver o que ele oferece.
- Uma barra utilitária superior: Se o seu tema oferece uma faixa acima do cabeçalho principal, ela pode abrigar itens como seletor de moeda, conta do cliente e rastreamento de pedidos, deixando a barra principal para os links do catálogo.
- Realocação para o rodapé: Mover links institucionais como “About Us”, “Press” e “FAQ” para o rodapé limpa o cabeçalho sem deixá-los inacessíveis.
Para orientações específicas sobre como simplificar a navegação no fluxo de checkout, veja nossa análise do cabeçalho de navegação do checkout.
Engenharia de breakpoints: Testando seu cabeçalho em larguras de notebook
Em vez de confiar na inspeção visual em um monitor widescreen, planeje o cabeçalho com base em um orçamento explícito de pixels horizontais.
Figura 2: Concept illustration (ilustração conceitual) — um header Shopify testado na largura de um monitor amplo e na largura menor de um notebook, onde o menu precisa de um plano.
A fórmula de largura disponível
Estime o orçamento de pixels horizontais disponível para os links de categoria principais com esta fórmula prática:
Available Width = Viewport Width - (Logo Width + Utility Cluster Width + Container Padding & Margins)
Max Width Per Item = Available Width / Number of Primary Links
Uma estrutura hipotética (sem medições reais): meça o logo, o bloco de utilitários e as margens da sua própria loja, subtraia-os da largura do viewport para obter a largura disponível (Available Width) e divida pelo número de links de categoria para obter um orçamento por link. Compare esse orçamento com o rótulo mais largo que você medir na sua loja.
Medindo larguras reais de rótulos no DevTools
Para verificar se a navegação cabe sem quebrar linha, audite a largura dos rótulos diretamente nas ferramentas de desenvolvedor do navegador:
- Abra o Chrome DevTools (
Cmd+Option+IouF12) e ative o Device Mode. - Defina a largura do viewport responsivo para a largura efetiva de notebook do exemplo de escala acima ou para uma largura tirada das suas próprias análises.
- Inspecione o rótulo de navegação mais longo na aba Computed para anotar sua largura renderizada em pixels, incluindo padding e margin.
- Multiplique a largura do rótulo mais longo pelo número de links para uma verificação conservadora. Se o total exceder a largura disponível, o menu provavelmente vai quebrar ou ser cortado.
Regras práticas de arquitetura
Estes são julgamentos de design, não limites medidos. Sempre confirme com a verificação de largura acima.
- Loja de catálogo pequeno: Com poucas categorias principais, logo à esquerda em linha ou logo centralizado dividido costuma caber com mais facilidade em viewports de notebook.
- Loja de catálogo médio: Logo à esquerda em linha pode funcionar se os links utilitários forem ícones compactos e os rótulos forem curtos.
- Grande loja multidepartamento: Com muitas categorias principais, a navegação em linha tende a colidir em telas de notebook. Considere um layout empilhado em dois níveis, ou um mega menu que tire a profundidade da barra.
- Loja internacional ou multimoeda: Os seletores de localização consomem o espaço horizontal dos utilitários. Considere mover os seletores para uma barra utilitária superior ou para o rodapé.
Quando a navegação excede a largura disponível, você tem três caminhos de correção: reduzir os links principais, encurtar o texto dos rótulos ou migrar para um layout de dois níveis. Evite colapsar prematuramente a navegação desktop em uma gaveta off-canvas.
Armadilhas específicas do Shopify: Seletores do Markets, tamanho do DOM e maiúsculas
Construir a navegação dentro do Shopify traz desafios específicos da plataforma.
Seletores de moeda e idioma do Shopify Markets
Lojas que vendem em vários países costumam adicionar seletores de moeda, país ou idioma ao cabeçalho. Dependendo do tema, eles podem aparecer como botões bastante largos com um código de moeda ou uma bandeira. Em um cabeçalho em linha de uma única linha, um seletor largo tira espaço das categorias e pode provocar quebra de linha em notebooks. Considere colocar os seletores do Markets em uma faixa utilitária superior ou no rodapé.
Tamanho do DOM do cabeçalho e sobrecarga de Liquid
Renderizar um extenso menu suspenso de vários níveis diretamente em Liquid adiciona sua marcação a cada resposta de página, e essa marcação conta para o tamanho do DOM da página. Segundo as diretrizes de tamanho do DOM do Google Chrome Lighthouse, o Lighthouse “avisa quando o elemento body tem mais de ~800 nós” e “gera erro quando o elemento body tem mais de ~1.400 nós”. Um cabeçalho pesado consome parte desse orçamento antes mesmo de o conteúdo da página ser renderizado. Para saber mais, veja nosso guia sobre navegação e Core Web Vitals.
Tipografia em maiúsculas e espaçamento entre letras
Os guias de estilo das marcas costumam especificar tipografia em caixa alta com espaçamento de letras ampliado para os links de navegação. Definir o texto em caixa alta (text-transform: uppercase) geralmente alarga o texto em comparação com a caixa de sentença, e o letter-spacing acrescenta espaço após cada caractere. Meça novamente a largura renderizada dos rótulos sempre que alterar a tipografia da vitrine.
Limites nativos de aninhamento de menus no Shopify
De acordo com a documentação da Central de Ajuda do Shopify sobre menus suspensos, “o item de nível superior pode ter até dois níveis de menus suspensos aninhados”, o que estabelece um teto da plataforma de três níveis de navegação. Você configura esses menus no painel do Shopify e os conecta a temas como o Horizon ou outros abordados em nosso hub de temas Shopify.
Prós e contras: Quando não usar cada modelo de cabeçalho
Todo layout de cabeçalho envolve compromissos entre estética, eficiência de espaço e descobribilidade do catálogo.
| Header Layout Model | Do Not Use When | Better Alternative |
|---|---|---|
| Logo à esquerda + Em linha | Marcas de produto único com pouquíssimos links | Logo centralizado com navegação mínima |
| Logo centralizado + Dividido | Seu catálogo continua adicionando categorias, coleções ou seletores | Layout de dois níveis ou navegação em linha alinhada à esquerda |
| Dois níveis empilhados | Vitrines mobile-first em que o desktop responde por pouco tráfego | Navegação em linha de uma única linha e enxuta |
| Gaveta oculta no desktop | Lojas de catálogo que dependem da navegação por produtos | Barras de navegação visíveis em linha ou em dois níveis |
Lojas de produto único que usam cabeçalhos em linha podem acabar com um espaço vazio desconfortável entre a marca e o ícone do carrinho. Por outro lado, um layout dividido centralizado pode ficar sem espaço de cada lado quando a marca adiciona coleções sazonais ou seletores de moeda internacionais.
Cabeçalhos empilhados em dois níveis acrescentam altura vertical e empurram o conteúdo principal para baixo na página, portanto meça a altura combinada da barra de anúncios, da barra utilitária e da navegação principal. Para lojas em que os compradores mobile são esmagadora maioria, essa altura extra no desktop pode não valer a pena.
Por fim, as gavetas ocultas no desktop vão contra a orientação do NN/g e contra sua constatação de que os usuários desktop usaram menus ocultos bem menos do que os visíveis (27% contra 48% dos casos). As gavetas off-canvas são padrão em telas mobile, mas os viewports desktop geralmente têm espaço para links visíveis. Para a arquitetura de gavetas mobile, leia nosso guia de design de menu em gaveta mobile.
Checklist prático: Audite o cabeçalho da sua loja Shopify
Audite o cabeçalho da sua vitrine Shopify com esta checklist de seis etapas:
- Etapa 1: Realizar a auditoria de viewport em largura de notebook — Abra o Chrome DevTools e teste sua vitrine na largura efetiva de notebook do exemplo de escala e nas larguras das suas próprias análises. Confirme que os links de categoria não quebram de linha, que não aparecem barras de rolagem horizontais e que o tema não colapsa em um menu hambúrguer.
- Etapa 2: Tirar os links utilitários não comerciais da linha do catálogo — Remova “Track Order”, “About Us” e “FAQ” do menu principal de categorias. Realoque-os para uma barra utilitária superior, um menu suspenso da conta ou o menu do rodapé.
- Etapa 3: Definir um orçamento de altura do cabeçalho — Meça a altura combinada da barra de anúncios, da barra utilitária e da navegação principal. Verifique quanto da primeira tela elas ocupam em um notebook.
- Etapa 4: Auditar a tipografia da navegação e a redação dos rótulos — Inspecione o rótulo de categoria mais longo. Encurte textos prolixos (por exemplo, “Men’s Outerwear and Jackets” para “Men’s Jackets”). Verifique se a caixa alta ou o espaçamento de letras está inflando a largura dos rótulos.
- Etapa 5: Verificar o tamanho dos alvos de clique e toque — Garanta que os ícones e links do cabeçalho atendam ao W3C WCAG 2.2 Success Criterion 2.5.8 Target Size (Minimum): um alvo de ponteiro de pelo menos 24 por 24 pixels CSS, ou espaçamento suficiente ao redor de alvos menores.
- Etapa 6: Validar a navegação por teclado e o gerenciamento de foco — Verifique se os compradores conseguem percorrer o cabeçalho com Tab e Shift+Tab. Confirme que Escape fecha um menu suspenso aberto e devolve o foco ao elemento que o abriu, como no W3C WAI ARIA Menubar Pattern.
Onde o Navi+ se encaixa
Quando um catálogo em crescimento supera o que o cabeçalho do tema consegue comportar, uma opção é um trabalho personalizado em Liquid. O Navi+ é um app Shopify que cria menus separados sem exigir que você edite o código do cabeçalho do tema.
- Menus separados para desktop e mobile: Construa um Desktop Mega Menu para visitantes no computador e configure um Mobile Menu (gaveta), Tab Bar (consulte nossa análise sobre arquitetura de barra de abas no mobile), Icon Menu ou Floating Button para smartphones.
- Até 3 níveis: Como os menus nativos do Shopify, os menus do Navi+ vão até três níveis. Um Desktop Mega Menu pode guardar a profundidade das categorias em um painel, em vez de na barra do cabeçalho.
- Theme App Embed: O Navi+ é ativado por meio de um theme app embed padrão da Shopify. Os menus são salvos como configuração e renderizados no navegador por scripts do app, sem editar arquivos Liquid do tema.
Não fazemos nenhuma afirmação de velocidade aqui. Meça o efeito na sua própria vitrine com o Google PageSpeed Insights.
Quando não usar o Navi+: Marcas de produto único ou lojas com um catálogo muito pequeno raramente precisam de um app de navegação de terceiros. Para essas lojas, as próprias configurações de cabeçalho do tema podem bastar. Nossos guias de configuração do Navi+ para temas Shopify cobrem temas populares, caso queira comparar.
Se o cabeçalho do seu tema ficou sem espaço, você pode experimentar o Navi+ para criar um Desktop Mega Menu e um Mobile Menu separados sem editar o código do tema — e depois repetir a verificação em largura de notebook da checklist acima.
Perguntas frequentes (FAQ)
Como alterar o menu do cabeçalho no Shopify?
Abra seu tema no editor de temas e selecione a seção Header. Segundo a Central de Ajuda do Shopify, você pode alterar o menu principal padrão na maioria dos temas editando as configurações da seção Header do tema.
Quantos níveis um menu suspenso do Shopify pode ter?
Segundo a documentação oficial do Shopify, um item de nível superior pode ter até dois níveis de menus suspensos aninhados, o que dá um máximo de três níveis de navegação.
Vale a pena usar menu hambúrguer no desktop?
O Nielsen Norman Group desaconselha: “Não use navegação oculta (como ícones de hambúrguer) em interfaces de usuário para desktop.” Em seu teste, os usuários desktop usaram menus ocultos em 27% dos casos contra 48% para a navegação visível.
Onde o campo de busca deve ficar no cabeçalho?
O NN/g recomenda um campo de digitação em vez de um link, posicionado no topo da página (geralmente no canto direito) e largo o suficiente para conter a consulta típica.
Onde devem ficar os links de conta, rastreamento e moeda?
Esses links são navegação utilitária: ações e ferramentas secundárias. O NN/g observa que eles podem receber um posicionamento secundário, menos proeminente, então uma barra utilitária superior ou o lado direito do cabeçalho funciona, separado das categorias do catálogo.
Qual deve ser o tamanho de ícones e links no cabeçalho?
Pelo W3C WCAG 2.2 SC 2.5.8, o tamanho do alvo para entradas de ponteiro é de pelo menos 24 por 24 pixels CSS, a menos que se aplique uma exceção, como espaçamento suficiente ao redor do alvo.
Fontes
- Nielsen Norman Group: Pernice, K. & Budiu, R. (2016). Hamburger Menus and Hidden Navigation Hurt UX Metrics. nngroup.com/articles/hamburger-menus
- Nielsen Norman Group: Nielsen, J. (2001). Search: Visible and Simple. nngroup.com/articles/search-visible-and-simple
- Nielsen Norman Group: Pernice, K. (2017). F-Shaped Pattern of Reading: Misunderstood, But Still Relevant. nngroup.com/articles/f-shaped-pattern-reading-web-content
- Nielsen Norman Group: Farrell, S. (2015). Utility Navigation: What It Is and How to Design It. nngroup.com/articles/utility-navigation
- Baymard Institute: ‘Main Navigation’ Design Examples. baymard.com/homepage-and-category-usability/benchmark/page-types/drop-down-menu
- Baymard Institute (2023): Make Product Categories the Top-Level Navigation Items on Mobile Sites (33% Don’t). baymard.com/blog/main-navigation-product-categories
- Shopify Help Center: Set up drop-down menus in your online store. help.shopify.com
- W3C Web Accessibility Initiative: Understanding SC 2.5.8: Target Size (Minimum). w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
- W3C WAI ARIA: Menu and Menubar Pattern. w3.org/WAI/ARIA/apg/patterns/menubar
- Google web.dev: Cumulative Layout Shift (CLS). web.dev/articles/cls
- Google Chrome Lighthouse: Avoid an excessive DOM size. developer.chrome.com
- Navi+: Setup guides for Shopify themes. naviplus.io/shopify-themes
Explore os temas
Este guia traz links para artigos específicos — aprofunde-se em cada um.