Um dono de loja vê uma grande marca usando um Mega Menu de aparência caprichada e copia tudo para a própria loja exatamente como está. O problema é que essa loja vende apenas vinte produtos, mas o menu está mais movimentado que um marketplace inteiro. No outro extremo, há lojas que vendem centenas de categorias e se contentam com uma única barra de menu horizontal sem graça — os clientes chegam, ficam rolando a página e nunca entendem direito o que a loja realmente vende.
Os dois cometem o mesmo erro: escolhem um menu com base no que gostam de olhar, não no que a loja de fato precisa. Não existe um único tipo de menu melhor para toda loja. Escolher o tipo de menu Shopify certo depende de quantos produtos você tem, de como os clientes compram e de quantos deles estão no celular. Este artigo reúne o que aprendi depois de tocar e observar muitas lojas — não para dizer qual tipo é o melhor, mas para ajudar você a enxergar por conta própria qual se encaixa.
- A escolha do menu começa pelo contexto da loja, não pelo gosto visual.
- Mobile e desktop muitas vezes precisam de padrões diferentes.
- O melhor menu resolve um gargalo claro na jornada de compra.
Por que os menus importam mais do que você imagina
O menu é a primeira coisa em que o cliente toca antes mesmo de olhar um produto. Se ele não consegue se orientar, não compra. Parece óbvio, mas isso se conecta diretamente a um número em que pouca gente presta atenção.
Segundo o Baymard Institute, a taxa média de abandono de carrinho no e-commerce gira em torno de 70%, um valor extraído de dezenas de estudos e que se mantém estável nesse patamar há anos. O menu, claro, não é a única causa, mas alguns clientes vão embora simplesmente porque não encontraram o que procuravam rápido o bastante. Uma boa navegação não cria receita, mas uma navegação ruim a faz vazar aos poucos.
Há mais um ponto: hoje a maior parte do tráfego das lojas vem de celulares. A forma como o cliente usa um menu numa tela pequena é muito diferente da do computador, então um menu que funciona no desktop não vai necessariamente funcionar no mobile. É por isso que ferramentas como o Navi+ permitem configurar mobile e desktop separadamente, em vez de forçar um único menu a servir aos dois.
Quatro fatores que definem qual tipo de menu você precisa
Antes de olhar cada tipo de menu, responda quatro perguntas sobre a sua própria loja. Esses quatro fatores decidem quase tudo.
- Quantidade de produtos e categorias. Uma loja com vinte produtos e uma loja com dois mil produtos precisam de estruturas bem diferentes. Quanto mais categorias você tem, mais precisa de uma forma de deixar o cliente ver a profundidade sem se sentir sobrecarregado.
- Parcela de mobile versus desktop. Abra o Google Analytics e olhe de verdade. Se a maioria dos clientes está no celular, o menu mobile é o menu principal, e o desktop é o secundário.
- Como os clientes compram. Eles sabem exatamente o que querem e vão direto, ou chegam para navegar e explorar? Compradores decididos precisam de atalhos; quem está explorando precisa de estímulos.
- A ação mais importante da loja. Toda loja tem uma coisa que você mais quer que o cliente faça — iniciar uma conversa, abrir o carrinho ou ir para uma página de promoção. Essa ação deve estar sempre ao alcance.
O segundo fator merece um pouco mais de atenção. A pesquisa de Steven Hoober com mais de 1.300 usuários descobriu que a maioria das pessoas opera o celular com o polegar, e a área que o polegar alcança com mais conforto é a metade inferior da tela. É por isso que um botão ou barra de navegação posicionado embaixo costuma receber mais toques do que algo escondido no canto de cima.
Aprofunde-seLeia o guia completo → Quatro fatores que definem qual tipo de menu você precisa
Cada tipo de menu resolve um problema
Cada tipo de menu nasceu para resolver um problema específico. Entenda esse problema e você vai saber quando usá-lo.
Mega Menu é aquele dropdown largo no desktop que distribui muitas categorias de uma vez, muitas vezes com imagens. Combina com lojas que têm muitas categorias e precisam mostrar sua profundidade. Mas, para uma loja com poucos produtos, um mega menu só transmite uma sensação de vazio e de complexidade desnecessária.
Tab Bar é a barra de navegação fixada na parte de baixo da tela do celular, geralmente com três a cinco itens como Início, Categorias, Busca, Carrinho e Conta. Fica exatamente onde o polegar alcança com mais facilidade, e está sempre visível, então o cliente nunca precisa ir procurá-la. É um dos layouts mobile mais confiáveis.
Slide Menu (hambúrguer) esconde o menu inteiro atrás de um ícone de três linhas que abre um painel deslizante. A vantagem é que fica organizado e cabe muitos itens. A desvantagem é que esconde tudo. O Nielsen Norman Group mostrou que esconder a navegação reduz visivelmente a frequência com que os clientes a descobrem — eles a usam menos e, quando usam, usam mais tarde. Um slide menu não é errado, mas não deixe seus itens mais importantes escondidos dentro dele.
FAB (Floating Action Button) é o botão redondo que flutua, normalmente num canto inferior, para uma única ação — uma ligação, um chat, abrir uma promoção. É forte quando a loja tem exatamente uma coisa que quer que o cliente faça. Mas empilhe vários botões flutuantes juntos e eles acabam cobrindo o conteúdo.
| Tipo de menu | Bom quando | Cuidado quando |
|---|---|---|
| Mega Menu | Muitas categorias, majoritariamente desktop | A loja tem poucos produtos |
| Tab Bar | Tráfego mobile alto | Tentar enfiar mais de cinco itens |
| Slide Menu | Muitos itens secundários, quer manter organizado | Esconder um item importante |
| FAB | Uma ação prioritária clara | Colocar vários botões flutuantes ao mesmo tempo |
Aprofunde-seLeia o guia completo → Um olhar sobre cada tipo de menu: quando usar, quando não usar
Combinando menus para cada tipo de loja
Na prática, uma loja raramente usa só um tipo de menu. O valor está em combiná-los — e combiná-los bem depende de qual grupo a sua loja se encaixa.
Uma loja de moda com muitas categorias costuma usar um Mega Menu no desktop para distribuir suas linhas de produtos, e uma Tab Bar no mobile para que o cliente sempre consiga chegar às categorias e ao carrinho. Dois menus diferentes servindo a dois contextos diferentes, mas com a mesma lógica de categorias por baixo.
Uma loja com um ou poucos produtos é o oposto. Um mega menu é exagero. Uma barra de menu enxuta no desktop mais um FAB de chat no mobile costuma ser suficiente — porque, para esse tipo de loja, o mais importante é responder perguntas para fechar a venda, não navegar por camadas de categorias.
Uma loja de porte médio, de algumas dezenas a algumas centenas de produtos, geralmente fica no meio do caminho: um menu de desktop moderado, uma Tab Bar no mobile e, às vezes, um Slide Menu adicional guardando itens secundários como políticas, blog e contato. A regra geral: mantenha visível o que o cliente precisa com frequência e esconda o que ele só precisa de vez em quando.
O que torna essa combinação viável sem mexer em código é o fato de você configurar cada menu para cada tela de forma independente. Com o Navi+, você monta uma Tab Bar para o mobile e um Mega Menu para o desktop no mesmo lugar, arrastando e soltando, sem editar o tema.
Aprofunde-seLeia o guia completo → Combinando tipos de menu para cada tipo de loja
Um processo para decidir o menu certo
Em vez de escolher por achismo, existe uma sequência simples que leva você dos dados até a decisão.
- Olhe os números primeiro. Abra o Analytics e anote a divisão entre mobile e desktop e as páginas que os clientes mais visitam. Essa é a sua base, não um chute.
- Liste o que os clientes precisam alcançar com frequência. Normalmente, apenas três a cinco coisas. Esses são os candidatos para uma Tab Bar ou o menu principal.
- Separe os itens secundários. Políticas, blog, sobre — esses podem ir para um Slide Menu ou para o rodapé, sem precisar ocupar um espaço valioso.
- Escolha uma ação prioritária. Se há uma coisa clara que você quer que o cliente faça, considere um FAB.
- Teste e depois meça. Coloque o menu no ar, observe por uma ou duas semanas e veja se os clientes tocam no que você esperava.
O último passo é importante, mas costuma ser pulado: a velocidade. Adicionar um menu que deixa a página lenta faz mais mal do que bem. O Google recomenda os limites do Core Web Vitals: LCP abaixo de 2,5 segundos, INP abaixo de 200 milissegundos, CLS abaixo de 0,1. Um menu pesado que faz a página travar, com o layout pulando enquanto carrega, já é o bastante para tirar você da zona boa. Na hora de escolher uma ferramenta para construir menus, preste atenção se ela é otimizada para não deixar a página lenta — é por isso que o Navi+ foca em manter os menus leves e em conquistar o selo Built for Shopify.
Aprofunde-seLeia o guia completo → Um processo prático para decidir o menu certo
Por onde começar
Comece aquiVerifique primeiro a participação mobile e liste os três caminhos que os clientes mais precisam usar.
Se você não tem certeza de como começar, faça a menor coisa primeiro: abra o Analytics para conferir sua parcela de mobile e depois anote as três coisas que seus clientes mais precisam alcançar. Só essas duas informações já eliminam a maior parte das escolhas erradas. O resto é tentativa e ajuste.
Não tente deixar tudo perfeito desde o começo. Um menu é algo que deve ser refinado aos poucos, com base em como os clientes de fato usam a loja — e não em como você imagina que eles vão usar.
No fim das contas, um bom menu é algo em que o cliente nunca pensa. Ele só percebe o menu quando ele atrapalha. Então o objetivo não é um menu bonito, mas um menu que o cliente usa sem pensar — ele encontra o que procura, segue em frente e nunca percebe que o menu acabou de ajudá-lo.
Explore os temas
Este guia traz links para artigos específicos — aprofunde-se em cada um.