Não existe um único conjunto de menus que sirva para todas as lojas. Uma loja de moda com milhares de SKUs precisa de uma navegação muito diferente da de um café que vende algumas dezenas de itens. Este artigo reúne como combinar menus do Shopify por tipo de loja, com base no que observei tanto tocando uma loja quanto acompanhando como outras lojas fazem.
Antes da tabela, um ponto importante: o menu no desktop e o menu no mobile não deveriam ser iguais. As pessoas seguram o celular com uma mão e tocam principalmente com o polegar. Segundo observações de Steven Hoober, cerca de 75% das interações no mobile são feitas com o polegar, e a área mais fácil de alcançar é a metade inferior da tela. No desktop é o contrário: as pessoas leem de cima para baixo, então um menu horizontal no topo faz mais sentido. Dois contextos diferentes pedem duas formas diferentes de organizar o menu.
Uma tabela sugerida para combinar menus do Shopify por tipo de loja
| Tipo de loja | Desktop | Mobile |
|---|---|---|
| Moda / Lifestyle, catálogo grande | Mega Menu | Tab Bar + Slide Menu |
| Eletrônicos, muitas categorias técnicas | Mega Menu com filtros | Slide Menu |
| Alimentação / Local, poucos produtos | Simple Nav (menu horizontal simples) | Tab Bar |
| Beleza / Skincare | Mega Menu com imagens | Tab Bar + FAB de chat |
| Dropshipping, muitas linhas de produto | Mega Menu | Slide Menu |
Esta tabela é um ponto de partida, não uma regra. Abaixo estão as razões de cada linha, para que você possa ajustá-la à sua própria loja.
Moda e lifestyle: um catálogo grande pede um Mega Menu no desktop
Lojas de moda geralmente têm uma estrutura profunda: Masculino / Feminino, depois Partes de cima / Partes de baixo / Acessórios, depois linhas de produto individuais, por estação, por coleção. Espremer tudo isso em um único dropdown vertical obriga o cliente a passar o mouse por várias camadas.
No desktop, um Mega Menu resolve isso. Ele distribui as categorias em várias colunas dentro de um único painel grande, de modo que o usuário vê toda a árvore de produtos de uma vez, em vez de clicar nível por nível. Para uma loja de roupas femininas com dezenas de linhas de produto, essa costuma ser a abordagem mais limpa.
No mobile é diferente. Uma tela estreita não consegue distribuir um Mega Menu, então uma abordagem comum é uma Tab Bar para os caminhos mais importantes (Início, Categorias, Carrinho, Conta) fixada na parte de baixo da tela, mais um Slide Menu para a lista completa de categorias. A Tab Bar fica sempre ao alcance do polegar, enquanto o Slide Menu guarda a árvore detalhada de produtos para quando o usuário quiser se aprofundar.
Eletrônicos: categorias técnicas precisam de filtragem dentro do próprio menu
Eletrônicos têm suas particularidades. Os clientes muitas vezes sabem bem o que precisam: capacidade, marca, faixa de preço, ano do modelo. Por isso, para uma loja de eletrônicos, o Mega Menu no desktop deveria incluir alguns filtros ou subgrupos dentro do próprio menu, deixando o usuário pular direto para o ramo certo, em vez de navegar por toda a página de categoria.
Por exemplo, uma loja de acessórios de informática pode dividir seu Mega Menu em colunas por tipo (mouses, teclados, fones de ouvido) e, dentro de cada coluna, listar as faixas de preço ou marcas mais populares.
No mobile, como a árvore de categorias é longa e técnica, um Slide Menu funciona melhor do que tentar enfiar tudo em uma Tab Bar. Um Slide Menu permite que o menu se aninhe em vários níveis de profundidade mantendo-se compacto. Se você usá-lo, dê rótulos de texto claros ao lado dos ícones. O Nielsen Norman Group já mediu isso e descobriu que menus ocultos (no estilo hambúrguer) reduzem em quase metade a chance de o usuário encontrar a navegação, em comparação com menus visíveis, então não deixe o menu escondido demais.
Alimentação e negócios locais: com poucos produtos, não complique
Restaurantes, padarias e lojas de bairro geralmente têm apenas algumas dezenas de itens. Construir um Mega Menu para uma loja assim é exagero, e pode até deixar a página mais bagunçada do que precisa.
No desktop, um Simple Nav, um menu horizontal com poucos itens como Cardápio, Sobre Nós, Contato, já basta. O cliente não precisa se aprofundar; ele precisa pedir rápido.
No mobile, uma Tab Bar funciona bem aqui. Alguns dos botões mais importantes, por exemplo Cardápio, Pedir, Ligar, ficam prontos na parte de baixo da tela, bem na zona de fácil alcance do polegar. Um café que vende online poderia fixar os botões Pedir e Ligar na Tab Bar para que os clientes não precisem rolar a tela para encontrá-los.
Beleza e skincare: apoio em imagens e consultoria
Cosméticos vendem por imagem e confiança. Os clientes muitas vezes ficam em dúvida sobre qual tipo combina com a pele deles, então o menu também deveria refletir isso.
No desktop, um Mega Menu com imagens deixa o cliente ver o produto ou a linha de cuidados com a pele dentro do próprio menu, em vez de apenas ler texto. Uma loja de beleza pode colocar uma imagem representativa de cada linha (limpeza, hidratação, proteção solar) ao lado do nome da categoria.
No mobile, além de uma Tab Bar para a navegação principal, um FAB de chat flutuante no canto se encaixa muito bem nesse setor. Os clientes tendem a ter dúvidas antes de comprar (minha pele pode usar isso, combina com aquele outro produto), e um botão de chat sempre visível permite que perguntem na hora. Reduzir a hesitação nessa etapa vale a pena: segundo o Baymard Institute, a taxa média de abandono de carrinho no e-commerce gira em torno de 70%, ou seja, para cada 10 pessoas que adicionam ao carrinho, apenas cerca de 3 concluem a compra. Responder às dúvidas no momento certo é uma das formas de reter parte disso.
Dropshipping: muitas linhas de produto, priorize um agrupamento claro
Lojas de dropshipping costumam vender muitas categorias ao mesmo tempo: utensílios de cozinha, acessórios para celular, brinquedos, artigos para casa. O desafio é que esses grupos são dispersos e não têm relação entre si.
No desktop, um Mega Menu ajuda a reunir cada categoria em sua própria coluna, para que o cliente perceba na hora o que a loja vende. Uma estrutura clara importa mais do que parecer bonita, porque os clientes muitas vezes chegam por anúncios e ainda não conhecem a loja.
No mobile, um Slide Menu lida bem com um grande número de categorias sem ocupar espaço. O usuário abre, escolhe uma categoria e então se aprofunda.
Por que você deveria configurar mobile e desktop separadamente
O que todos os cinco casos acima têm em comum é que os dois lados são configurados de forma diferente. Isso não é um detalhe menor. Hoje a maioria dos pedidos vem do celular, e um menu de desktop levado direto para o mobile costuma ser ao mesmo tempo difícil de tocar e um peso a mais na página.
A performance também merece atenção. O Google define o limite para um bom Core Web Vitals em LCP abaixo de 2,5 segundos, INP abaixo de 200ms e CLS abaixo de 0,1. Um menu pesado carregando em todos os dispositivos derruba esses números com facilidade. No mobile, cada componente que você adiciona deveria ser leve.
É aqui que uma ferramenta como o Navi+ é útil: ela permite configurar os menus de desktop e mobile separadamente, arrastar e soltar sem código, e manter seu menu quando você troca de tema. Você pode definir um Mega Menu para o desktop e uma Tab Bar mais um Slide Menu para o mobile, sem nunca mexer nos arquivos do tema.
Resumindo, escolha seu menu com base em quão grande é seu catálogo e em como os clientes compram, depois separe a configuração para os dois tipos de tela. A tabela acima é um ponto de partida; o resto é testar e ajustar com base nos números reais da sua loja.
Este artigo faz parte do guia maior sobre Como escolher o tipo de menu certo para sua loja Shopify.