Cada loja já tem um menu de topo.
A questão é
o que vai na parte inferior.
Navegação inferior se tornou o padrão mobile. Seus clientes esperam isso. Mas o sucesso não é sobre adicioná-la em todos os lugares — é sobre decidir o que pertence lá e colocá-la onde realmente funciona. Este guia ajuda você a acertar essa decisão.
Zonas seguras variam entre dispositivos
Entalhes iOS, barras de gesto Android e modo paisagem todas reivindicam espaço na tela. Um menu na parte inferior deve coexistir com essas realidades de hardware, não lutar contra elas.
Navegação inferior compete com seu conteúdo
Colocar uma barra na parte inferior reserva espaço que poderia mostrar imagens de produtos ou o botão adicionar ao carrinho. O posicionamento errado dificulta a rolagem ou esconde ações-chave.
Funciona apenas com um número específico de itens
Uma barra de navegação com 5 itens é utilizável. 7 itens fica apertado. Mais de 8 é inutilizável. Você precisa decidir o que realmente vai lá — nem tudo se encaixa.
Coexiste com outra navegação
A maioria das lojas mantém um header de topo e um menu de gaveta. Navegação inferior não substitui — se sobrepõe. Fazer esses três funcionarem juntos requer planejamento.
Navegação mobile eficaz coloca seus destinos mais importantes nos três a cinco slots na parte inferior, e funciona junto com seu menu superior e menu mobile em vez de substituí-los.
Início, Loja, Busca, Carrinho, Conta — o conjunto padrão
A maioria das lojas móveis se estabelece nesses cinco. Início leva você de volta rapidamente. Loja é seu catálogo. Busca ajuda visitantes a encontrar itens específicos. Carrinho e Conta são transacionais. Qualquer coisa além desses cinco geralmente significa que algo não pertence.
Defina a altura e o espaçamento você mesmo
Indicadores de home iOS e zonas de gesto Android exigem preenchimento. A barra se move ligeiramente para cima para permanecer utilizável e tocável, não escondida atrás de gestos ou controles do SO.
Funciona em modo retrato e paisagem
Modo paisagem tem menos espaço vertical. Uma barra inferior bem projetada encolhe graciosamente ou empilha itens sem quebrar o layout ou ficar ilegível.
Se sobrepõe com seu header e gaveta
O header de topo permanece para marca e busca rápida. A gaveta contém categorias profundas. A barra inferior liga — acesso rápido às páginas mais usadas sem abrir um menu.
Pula certos tipos de loja
Nem toda loja se beneficia de navegação inferior. Lojas de um único produto, marcas de luxo com catálogos mínimos e lojas focadas em desktop podem não precisar. Conheça seus padrões de tráfego primeiro.
Audite o tráfego e objetivos de sua loja
Verifique analíticas. Quais páginas os usuários móveis visitam mais? Quais ações são mais importantes para seu negócio? Coloque cinco destinos em sua barra inferior — nada mais.
Decida o que merece um slot
Decida quais telefones seus clientes usam mais. Planeje preenchimento para entalhes e barras de gesto. Teste modo paisagem. Alguns minutos de planejamento economizam fricção móvel mais tarde.
Configure sua navegação inferior com Navi+
Escolha seus destinos, ícones e cores, depois defina o ponto de interrupção que decide quando a barra aparece no mobile e quando não. Publique e entre ao vivo em minutos.
Altura e preenchimento que você controla
Defina a altura da barra, tamanho do ícone e preenchimento você mesmo, para que fique confortavelmente acima da borda inferior nos dispositivos que seus clientes realmente usam.
Se adapta ao modo paisagem
A barra inferior encolhe e refluem quando os usuários giram seus telefones. O layout permanece utilizável, nunca apertado ou escondido.
Se sobrepõe corretamente com outra UI
Funciona ao lado de headers fixos, menus de gaveta e popovers sem conflitos de z-index ou sobreposições.
Gerenciamento de slots
Slots visuais claros ajudam você a colocar exatamente o que importa. Slots não utilizados permanecem vazios — sem itens de preenchimento forçado.
Pronto para múltiplos mercados
Menus multi-idioma estão disponíveis no plano Business e acima, portanto os rótulos em sua barra podem acompanhar o idioma em que seu visitante está navegando.
Sem impacto de desempenho
CSS e HTML leves. Sem sobrecarga de JavaScript, sem inchaço de biblioteca. Sua loja carrega tão rápido quanto antes.
Quando páginas de nível superior vivem em uma barra visível na parte inferior de cada tela, mais visitantes as usam. Categorias são navegadas. Contas são verificadas. Listas de desejos são usadas. Os padrões que os clientes já conhecem de Instagram e Amazon funcionam tão bem em sua loja.
Tab Bar
Adicione uma barra de navegação fixa na parte inferior da sua loja Shopify. Como um app nativo — mais intui...
Mobile Menu
Substitua a gaveta de menu do tema por um menu multinível. Busca integrada, acesso à conta e categorias com...
Floating Button
Adicione um botão de contato fixo à sua loja Shopify. Sempre visível — WhatsApp, telefone, email, chat ao v...
Gratuito para instalar. Ao vivo em menos de 5 minutos. Nenhuma edição de tema necessária.