Depois de tocar uma loja por tempo suficiente, percebi que a maioria dos compradores vai embora não porque os produtos são ruins, mas porque não conseguem encontrar o que querem rápido o bastante. Boa parte desse atrito mora na navegação. Este artigo reúne os cinco erros de navegação na Shopify mais comuns, como identificar cada um e a forma mais limpa de corrigi-lo.
Vale guardar um número antes de entrarmos nos detalhes: segundo o Baymard Institute, a taxa média de abandono de carrinho no e-commerce gira em torno de 70%. Nem tudo isso vem da navegação, mas uma parcela dos compradores desiste bem cedo, antes mesmo de adicionar algo ao carrinho, simplesmente porque se perdeu.
Erro 1: Itens demais no menu principal
Esse é o erro mais fácil de cometer, porque parte de boas intenções. O lojista quer que os compradores vejam tudo, então amontoa tudo na barra de menu principal: uma dúzia ou mais de itens no nível superior, às vezes perto de vinte.
O problema é que, quando tudo é importante, nada é. O comprador olha para uma fileira longa, não sabe por onde começar e, na maioria das vezes, simplesmente não começa.
Identificar isso é bem simples. Abra a página inicial no desktop e conte os itens do nível superior. Se o menu precisa quebrar para uma segunda linha, você está sobrecarregado. No mobile, se a lista de itens do nível superior passa de uma tela inteira e ainda não acabou, isso também é um sinal.
A correção: agrupe itens relacionados. Uma loja de moda não precisa de “Camisetas”, “Camisas sociais” e “Jaquetas” como itens separados no nível superior — junte tudo em “Partes de cima” e coloque os tipos lá dentro. Mantenha o menu principal em torno de 5 a 7 itens, para que os compradores consigam percorrê-lo em um ou dois segundos.
Erro 2: Sem mega menu em uma loja com muitas categorias
Depois de agrupar tudo de forma organizada, surge o problema oposto: as subcategorias ficam enterradas fundo demais. O comprador precisa clicar em “Partes de cima”, esperar a página carregar para ver quais tipos existem e clicar de novo. Cada clique a mais é mais uma chance de ele desistir.
É aqui que o mega menu mostra seu valor. Um mega menu é um painel suspenso grande, com várias colunas, que mostra toda a estrutura de categorias no momento em que o comprador passa o mouse, permitindo que ele salte de uma categoria do nível superior direto para uma subcategoria em um único movimento. Para um catálogo amplo, isso é praticamente o padrão de fato em grandes sites de varejo.
Como saber se sua loja precisa de um mega menu: se os compradores têm de clicar três ou mais vezes para chegar a uma página de listagem de produtos, ou se você tem muitas subcategorias sem nenhuma forma de vê-las todas de uma vez, esse é um sinal.
Uma observação ao montar um mega menu: se o painel não tiver atraso ao passar o mouse, ele vai piscar toda vez que o cursor cruzar por ele sem querer. Se você usa um construtor de menus, escolha um que cuide disso para você. O Navi+ (https://naviplus.io) cria mega menus para desktop com arrastar e soltar, sem precisar de código, então você não precisa se preocupar com esse detalhe técnico por conta própria.
Erro 3: Depender só do menu hambúrguer no mobile
A maior parte dos compradores faz compras pelo celular, então esse é o erro mais caro. Muitas lojas empurram toda a navegação para um ícone de três linhas no canto — um menu Shopify no estilo hambúrguer — e consideram o trabalho feito. Mas esconder tudo significa que os compradores precisam abrir o menu ativamente para ver qualquer coisa, e a maioria não se dá ao trabalho.
O Nielsen Norman Group certa vez testou isso em celulares e desktops. O resultado: quando a navegação está escondida, os compradores têm mais dificuldade para encontrar o item que precisam, se movem mais devagar e avaliam a busca como mais difícil do que quando o menu é mostrado de forma clara. Em outras palavras, o que os compradores não veem, na prática, não existe para eles.
Como identificar: abra sua loja no seu próprio celular. Se chegar à sua categoria mais vendida exige tocar no hambúrguer, rolar a tela e tocar de novo, imagine um comprador com pressa, em pé, esperando uma corrida de aplicativo.
A correção não é abandonar o hambúrguer, mas trazer os caminhos importantes para a superfície, onde o polegar alcança sem precisar abrir nada. Uma Tab Bar fixa na parte de baixo da tela — como nos aplicativos que os compradores usam todo dia — deixa Início, Categorias, Busca e Carrinho bem na zona do polegar. Esse é o tipo de menu que o Navi+ cria especificamente para o mobile, configurado separadamente do desktop, então você mantém o hambúrguer para o que é secundário e deixa a Tab Bar cuidar do essencial.
Erro 4: Sem breadcrumbs ou indicação de localização
Os compradores navegam fundo no catálogo e esquecem onde estão. Eles caem em uma página de produto por um anúncio ou por uma busca, gostam do item, mas querem ver mais produtos parecidos — e não há um jeito natural de voltar para a categoria de origem.
Um breadcrumb é uma pequena trilha como “Início > Partes de cima > Camisetas > Camisetas masculinas”, colocada acima do nome do produto. Ele responde a duas perguntas de uma vez: onde estou e como volto um nível. Parece simples, mas muitos temas da Shopify não o habilitam por padrão, ou os lojistas o removem porque acham que deixa a tela “poluída”.
Como identificar: abra qualquer página de produto e se pergunte: “onde eu clico para ver produtos do mesmo tipo?”. Se a resposta for o botão Voltar do navegador, falta uma indicação de localização.
A correção: habilite os breadcrumbs nas páginas de categoria e de produto. Além disso, deixe claro o item atual no menu principal — por exemplo, deixando em negrito ou sublinhando a categoria ativa — para que os compradores sempre saibam em qual ramo estão.
Erro 5: Categorizar pela lógica do lojista, não pelo jeito que o comprador pensa
Esse é o erro mais sutil, porque o menu continua parecendo organizado. O problema está em como os grupos são montados. Os lojistas tendem a categorizar do jeito que o estoque ou o fornecedor organiza as coisas, enquanto os compradores pensam em termos das próprias necessidades.
Um exemplo conhecido: uma loja de cosméticos divide o menu por marca, porque é assim que ela compra os produtos. Mas os compradores normalmente não lembram nomes de marca — eles chegam para encontrar “protetor solar” ou “batom matte”. Quando o menu não tem um caminho por finalidade, os compradores precisam adivinhar qual marca tem o que eles querem, e a maioria desiste.
O Baymard inclui a navegação mal categorizada entre os problemas de navegação de maior impacto, porque ela deixa a impressão de que a loja é difícil de usar.
Identificar esse erro é mais difícil que os quatro anteriores, porque exige ouvir os compradores. Releia as mensagens e perguntas que os compradores costumam fazer: se muita gente manda mensagem perguntando “vocês vendem X”, quando X está claramente disponível no site, é quase certo que eles não conseguiram encontrar pelo menu. Isso é um menu falando a sua língua, não a deles.
A correção: nomeie os itens com as palavras que os compradores usam, não com o jargão interno. Você pode manter os dois eixos — navegar por tipo de produto e navegar por finalidade ou ocasião — se os seus compradores pensam de jeitos diferentes. A forma mais rápida de verificar é pedir a algumas pessoas de fora, que nunca entraram na sua loja, que encontrem um item específico, e observar onde elas clicam primeiro.
Uma observação geral: não troque velocidade por nada
Ao corrigir a navegação, existe uma armadilha: você instala um app, adiciona efeitos e a página fica mais lenta. Cada app pode puxar scripts que pesam na página.
O Google define o limite “bom” para a experiência de carregamento da página em LCP abaixo de 2,5 segundos, INP abaixo de 200ms e CLS abaixo de 0,1. Um menu bonito que faz a página travar, mudar de layout ou responder devagar causa mais dano do que benefício. Ao escolher um construtor de menus, dê prioridade a um que se importe com os Core Web Vitals — é justamente o que o Navi+ otimiza, e o menu continua no lugar quando você troca de tema, então você não precisa refazê-lo do zero toda vez que muda o design.
Todos os cinco erros acima podem ser corrigidos sem saber nada de código. Comece por aquele que afeta o maior número de compradores na sua loja — normalmente o lado mobile — e vá descendo a partir daí.
Este artigo faz parte do guia mais amplo sobre Por que os compradores visitam sua loja mas não compram — e qual o papel da navegação nisso.