Desktop Mega Menu Slide Menu Tab Bar

Heater — substituir o header principal pelo Navi+ para dobrar um site grande em uma navegação fácil e consistente entre mobile e desktop

Como uma grande rede de reparos em Hong Kong substituiu todo o header padrão pelo Navi+ — transformando centenas de páginas de marca × modelo × defeito × loja em um sistema de navegação consistente tanto no mobile quanto no desktop.

H
Heater
heaterhk.net
Reparo de celular & tablet Shopify Site grande
Em resumo
Setor
Reparo de celular & tablet (Hong Kong)
Plataforma
Shopify
Desafio
Site muito grande; o header padrão não dá conta; mobile e desktop desconexos
Navi+ menus
Desktop Mega Menu · Slide Menu · Tab Bar (substituem o header principal)
Foco
Substituir o header, unificar a navegação mobile + desktop

O problema do cliente

A Heater é um site grande: mais de 13 marcas, cada marca com muitos modelos, cada modelo com muitos tipos de defeito (tela, bateria, conector de carga, câmera, infiltração de água…), além de 5 lojas e um fluxo de agendamento / orçamento. A estrutura é na verdade uma árvore muito ampla e profunda: marca × modelo × defeito × loja.

O header padrão do tema não dá conta dessa árvore. No desktop é uma barra de menu plana; no mobile é um hambúrguer drawer montado à parte. Duas experiências diferentes, duas lógicas diferentes — quem está acostumado com o desktop e passa para o mobile precisa reaprender do zero. Um site grande com header fraco torna o site inteiro difícil de navegar, e o cliente apressado por causa do aparelho quebrado tende ainda mais a desistir.

O que o Navi+ resolve

A proposta não é "adicionar um menu", mas substituir o papel do header principal por um sistema Navi+ unificado — uma mesma fonte de estrutura para todos os dispositivos, para que mobile e desktop falem a mesma língua de navegação.

Desktop Mega Menu — substitui o header desktop e dobra o site todo em um só lugar

O Mega Menu substitui a barra de menu padrão no desktop: todas as marcas × tipos de defeito são reunidas em uma estrutura com colunas claras e imagens. Um site grande fica fácil de varrer com um único passar do mouse — o cliente vê na hora quais marcas e quais defeitos a loja conserta, em vez de ter que clicar página por página de cada marca.

Slide Menu — substitui o menu mobile, com a mesma estrutura do desktop

No mobile, o Slide Menu substitui o hambúrguer padrão e usa a mesma estrutura do mega menu: o cliente desliza pelos níveis marca → modelo → defeito. Como é uma mesma fonte, mobile e desktop ficam consistentes — sem precisar montar e manter dois menus separados, e o cliente não precisa reaprender ao trocar de dispositivo.

Tab Bar — completa o novo header com as ações sempre ao alcance

O Tab Bar fixo na parte de baixo da tela mobile mantém as ações importantes sempre prontas: Agendar, Lojas, Ligar, Menu. Junto com o Slide Menu, ele substitui o resto do header padrão — o cliente tem uma barra de navegação enxuta, exatamente ao alcance do dedão, em vez de ter que subir até o topo da página.

O resultado pretendido

Quando o header principal é substituído por um sistema Navi+ unificado, um site muito grande fica fácil de navegar, e o mais importante — a experiência no mobile e no desktop vira uma só. O cliente aprende uma vez e usa em qualquer lugar.

  • O header padrão é substituído por um único sistema de navegação Navi+.
  • A árvore do site grande (marca × modelo × defeito) é dobrada em poucos passos claros.
  • Mobile e desktop ficam consistentes porque partem de uma mesma fonte de estrutura.
  • Menos trabalho de manutenção: acabaram os dois menus separados para dois dispositivos — sem precisar trocar o tema.

Princípios a reter

Pontos que se aplicam à maioria dos sites grandes e de muitos níveis — não só à Heater.

  • O header é a espinha dorsal de um site grande: quanto maior o site, mais forte o header precisa ser — o Navi+ assume esse papel.
  • Uma fonte de estrutura para todos os dispositivos: mobile e desktop partem de uma mesma árvore de categorias para ficarem sempre consistentes.
  • Dobrar um site grande em poucos passos: mega menu + slide menu transformam centenas de páginas em um caminho curto.
  • Substituir o header, sem trocar o tema: melhorar a navegação sem refazer a loja nem remover o app que já está rodando.

Tem uma loja parecida e quer experimentar o Navi+? Dá uma olhada nos tipos de menu ou leia a documentação.

K
Khoi — Founder, Navi+
Criou o Navi+ e cuida pessoalmente da consultoria de navegação para lojas Shopify com muitas categorias.

Comece com Navi+ AI Menu Builder

Escolha sua plataforma — gratuito para instalar, ao vivo em minutos.