Quick answer: how to create a menu with the Navi+ app on Shopify
Para criar um menu com o app Navi+ na Shopify, instale o Navi+ pela Shopify App Store, clique em Add menu, escolha um tipo de menu, comece com um modelo, um menu em branco ou IA, ative o Store Connector nas incorporações do app e publique.
- Instale o Navi+ pela Shopify App Store e abra o painel do aplicativo.
- Clique em Add menu e escolha o formato de menu de navegação desejado.
- Comece por um modelo pronto, uma tela em branco ou uma estrutura com IA.
- Adicione, organize e estilize links para coleções, produtos ou páginas.
- Ative o Store Connector nas incorporações do app do tema, salve e clique em Publish to website.
- Confira a navegação ativa em dispositivos móveis e navegadores no computador.
Não é preciso código do tema. O Navi+ funciona por meio de um app embed de tema da Shopify, então você cria e visualiza o menu no app em vez de editar arquivos do tema.
Before you start: which Navi+ menu type do you need?
Escolher o formato de navegação certo antes de construir ajuda a evitar retrabalho. Cada loja tem um catálogo de tamanho diferente, então escolha o tipo que combina com a forma como seus clientes navegam.
Figura 1: Ilustração conceitual (Concept illustration) — Before you start: which Navi+ menu type do you need?
| Menu type | What it does | Good first choice when… |
|---|---|---|
| Tab Bar | Adiciona uma barra fixa na parte inferior da tela do celular com ícones e rótulos | O tráfego da loja é predominantemente mobile e você quer acesso rápido aos pontos chave |
| Mobile Menu | Cria um menu lateral gaveta ou hambúrguer para todo o catálogo de produtos | Você precisa de um diretório móvel organizado que estruture categorias amplas |
| Desktop Mega Menu | Constrói painéis suspensos com várias colunas com produtos, coleções e banners | Compradores no computador precisam analisar vários setores e ofertas de uma só vez |
| Mobile Mega Menu | Cria um layout de megamenu pensado para telas de celular | Um catálogo de vários níveis precisa de caminhos de navegação mais profundos sem sobrecarregar uma tela pequena |
| Icon Menu e Floating Button | Adiciona blocos de ícones ou um botão flutuante que levam a produtos, coleções ou páginas | Você quer acesso rápido a suporte, carrinho ou promoções sem ocupar o cabeçalho |
Lojas com visitantes majoritariamente móveis podem começar com uma Tab Bar ou um Mobile Menu. Como observa o Nielsen Norman Group, a navegação oculta é menos fácil de descobrir do que a visível. Uma Tab Bar fixa mantém os destinos principais visíveis em vez de escondê-los atrás de uma gaveta fechada.
Embora seja possível habilitar vários tipos de menu ao mesmo tempo, a recomendação é estruturar e testar um menu primeiro antes de adicionar outros. Para um roteiro detalhado, consulte nosso guia sobre como escolher o tipo de menu ideal.
Step 1: Install Navi+ from the Shopify App Store
Acesse a página do Navi+ Tab Bar & Mega Menu na Shopify App Store. Instalar pela loja oficial leva você pelo fluxo de instalação padrão da Shopify.
Clique em Install para iniciar a configuração. A Shopify mostra sua tela de permissões padrão. O Navi+ exibe seus menus por meio de um app embed de tema, que você ativa no Passo 5.
Confirme as permissões para concluir a instalação. Ao término, o aplicativo abrirá automaticamente no painel administrativo da Shopify. Nos próximos acessos, basta abrir o menu Apps na barra lateral esquerda.
Step 2: Click Add menu and choose a starting point (template, blank, or AI)
No painel do Navi+, clique no botão de destaque Add menu. Isso abrirá a tela Choose kind of menu com seis opções: Tab Bar, Mobile Menu, Desktop Mega Menu, Mobile Mega Menu, Icon Menu e Floating Button. Escolha o cartão correspondente ao seu objetivo.
Start from a template
Selecione Create from a template para explorar layouts prontos. Quando encontrar uma estrutura compatível com seu catálogo, clique em Use this template. O editor preencherá links de demonstração, ícones e estilos que você poderá ajustar imediatamente.
Start blank
Escolha Blank se você já desenhou sua hierarquia no papel. Esse formato oferece total liberdade sem a necessidade de apagar links de modelo. Se ainda não rascunhou suas divisões, veja nosso guia para esboçar a estrutura do menu antes de começar.
Build the structure with AI
Para criar um rascunho rápido sem digitar item por item, utilize o assistente de IA integrado. Descreva o conceito da sua loja e seus produtos em palavras simples. A IA criará uma estrutura de menu diretamente no editor. Você manterá o controle total para conferir links, vincular coleções e regular cores.
Use your existing Shopify menu
O Navi+ também pode se conectar a um menu de navegação da Shopify existente como ponto de partida. Depois que ele estiver no editor, confira as posições aninhadas antes de publicar e confira de novo sempre que alterar o menu original na Shopify.
Step 3: Add and arrange menu items
Adicionar e reordenar itens usa edição de arrastar e soltar. Você pode adicionar novos itens, arrastá-los para mudar a ordem e aninhá-los sob um item pai.
Link to products, collections, and pages
Todo item de menu necessita de um destino funcional. No Navi+, os itens podem apontar para produtos, coleções e páginas. Organize as categorias com lógica, mantenha nomes curtos no primeiro nível, coloque primeiro as coleções mais vendidas e consulte nosso guia para configurar links de menu na Shopify.
Nest items up to three levels
Em catálogos amplos, aninhar itens evita a poluição visual. Com o plano Business do Navi+, você pode organizar sua navegação em até três níveis de profundidade. Para comparação, o menu nativo da Shopify permite um item principal com até dois níveis de menus suspensos aninhados.
Step 4: Customize icons, images, colors, and layout
Com a árvore pronta, ajuste o estilo à sua marca. Para uma Tab Bar, escolha ícones claros e confira a legibilidade dos rótulos no celular. Para Mega Menus, adicione imagens de coleções e escolha um layout que combine com o seu catálogo.
Ajuste as cores de texto e de fundo ao tema ativo da Shopify. Confira sempre o contraste de texto e ícones em uma tela de celular real para confirmar que estão legíveis.
Antes de colocar no ar, abra a aba Publish e use Test this menu para visualizar o menu. Para ir além no estilo, veja nosso artigo sobre como mudar o estilo do menu.
Step 5: Turn on Store Connector in App embeds, then publish
Exibir o Navi+ na sua loja não exige escrever nem editar código do tema. Ele funciona por meio de um app embed de tema da Shopify.
Figura 2: Ilustração conceitual (Concept illustration) — Step 5: Turn on Store Connector in App embeds, then publish
Test on a duplicate theme first
Se a sua loja recebe visitantes diariamente, a boa prática é testar em uma cópia separada. Conforme orientado nas diretrizes de temas da Shopify, duplicar seu tema ativo cria um backup seguro para conferir alterações sem interferir nas compras dos clientes em tempo real.
Turn on Store Connector
No painel da Shopify, acesse Online Store > Themes e clique em Customize no tema escolhido. Na barra lateral, clique no ícone de App embeds, localize o Store Connector, ligue o interruptor conforme as orientações da Shopify e clique em Save. Essa ativação precisa ser feita apenas uma vez por site.
Click Publish to website
Retorne ao painel do Navi+, abra a configuração do menu e clique em Publish to website. O aplicativo mostrará opções de exibição específicas para seu modelo—como Replace your main menu, Add below your header ou Use your existing menu icon. O Navi+ divide os métodos em três grupos e indicará a opção compatível. Confirme sua escolha e ative a publicação.
Step 6: Preview on mobile and desktop and fix common problems
Após publicar, visualize sua loja no computador e em smartphones de verdade. Telas sensíveis ao toque revelam detalhes práticos de alcance do polegar e espaçamento que ferramentas no computador nem sempre mostram.
| Symptom | Likely cause | Fix |
|---|---|---|
| Menu does not appear | Store Connector está ativo em outro tema ou alterações não foram salvas | No editor do tema ativo ative o Store Connector em App embeds e clique em Save |
| Two menus show at once | O menu original do tema continua visível junto com o menu do app | Nas opções do Navi+ marque Replace your main menu ou oculte o menu do tema |
| Menu disappeared after changing theme | As incorporações do app não migram sozinhas para temas novos | Abra o editor do novo tema, reative o Store Connector em App embeds e salve |
Menu does not appear
Se o menu não aparecer após a publicação, confira se o botão Store Connector foi ativado no tema principal publicado e se você clicou no botão Save no editor de temas.
Two menus show at once
Se ambos os menus aparecerem juntos, o bloco de cabeçalho nativo continua ocupando espaço. Ajuste a publicação no Navi+ para Replace your main menu ou desative o bloco de menu padrão na seção Header do tema.
Menu disappeared after changing theme
Ao trocar de tema na Shopify, as incorporações de apps não permanecem ativas por padrão. Basta abrir o editor do novo tema, reativar o Store Connector na aba App embeds e salvar. Para uma análise completa, confira nosso checklist para menus que não estão aparecendo.
How to turn off a Navi+ menu or go back to your theme menu
Voltar à navegação padrão não exige editar o código do tema, porque o Navi+ funciona por meio de um app embed.
Para desativar um menu individual mantendo o app ativo, abra o painel do Navi+. Cada menu criado mostra um status On / Off. Mudar um menu para Off interrompe a exibição na loja ao vivo, e o menu padrão do tema pode voltar a aparecer.
Caso queira desligar todos os menus do Navi+ em um tema, entre em Online Store > Themes > Customize, abra a aba App embeds, desligue o Store Connector e clique em Save. Se testou em um tema duplicado, descarte o rascunho sem publicar.
Trade-offs: when you don’t need Navi+ yet
Embora os construtores de menus ofereçam recursos avançados, instalar um app dedicado não é obrigatório para todas as lojas Shopify:
Em primeiro lugar, se o seu catálogo conta com poucos itens, a navegação padrão da Shopify—que aceita até dois níveis de menus suspensos—junto com o menu mobile do tema costuma ser suficiente. Instalar um app extra para poucos links gera manutenção desnecessária.
Em segundo lugar, usar incorporações exige atenção ao trocar de tema. Toda vez que você lançar um novo tema, precisará lembrar de reativar o Store Connector nesse novo tema.
Em terceiro lugar, a ferramenta de IA oferece um excelente rascunho inicial, mas não entrega um menu pronto para vender. Você precisará dedicar tempo para ligar as coleções certas, subir fotos e calibrar cores.
Por fim, habilitar muitos formatos de menu simultaneamente—como Tab Bar, menu gaveta e botões flutuantes juntos—pode poluir telas móveis e confundir o usuário caso a estrutura não esteja bem delineada.
Where Navi+ fits
Depois que seu menu principal estiver rodando perfeitamente na loja, a evolução natural costuma ser adicionar um segundo tipo de menu para outra função. Por exemplo, muitos lojistas combinam uma Tab Bar inferior para ações imediatas (busca, carrinho e mais vendidos) com um Mobile Menu lateral para todo o catálogo. Um botão Floating Button discreto também facilita o contato com o suporte.
Todos os menus complementares são administrados pelo mesmo botão Add menu no painel. Além disso, os menus do Navi+ podem ser usados em sites fora da Shopify sem programação. Para planejar sua navegação multidispositivo, leia nosso guia sobre como criar um menu para desktop e mobile.
Se o seu primeiro menu já está ativo, o próximo passo costuma ser um segundo menu para outra finalidade — como um Mobile Menu para todo o catálogo ao lado da Tab Bar. Você pode criá-lo a partir do mesmo botão Add menu. Caso ainda não tenha instalado, comece adicionando o Navi+ Tab Bar & Mega Menu na Shopify App Store.
Action checklist
Acompanhe esta lista prática para planejar, publicar e auditar o menu de navegação da sua loja na Shopify:
- Escolha o modelo de menu ideal para a meta comercial prioritária
- Clique em Add menu no painel de administração do Navi+
- Defina como vai começar: modelo pronto, tela vazia ou estrutura IA
- Vincule links de destino para produtos, coleções e páginas
- Mantenha a profundidade das categorias em até três níveis
- Utilize Test this menu na aba Publish para validar o visual
- Duplique o tema ativo para fazer testes sem afetar o público da loja
- Ligue o Store Connector em App embeds e clique em Save
- Clique em Publish to website e defina o local de inserção
- Verifique o comportamento do menu em smartphones reais e no computador
Instale o Navi+ Tab Bar & Mega Menu na Shopify App Store para criar menus sem alterar o código do tema.
FAQ
Do I need to edit theme code to show a Navi+ menu?
Não. Você não precisa alterar nenhum código Liquid ou arquivo de modelo do tema. Basta ativar a incorporação Store Connector no editor de temas da Shopify e publicar o menu pelo app. Conforme informado na documentação, essa ativação só precisa ser feita uma vez por site.
Can I use my existing Shopify menu with Navi+?
Sim. O Navi+ pode se conectar aos seus menus existentes da Shopify. Depois de conectar, revise cada nível aninhado para conferir se categorias e links aparecem como você deseja.
Should I start from a template or with AI?
Começar com um modelo é mais rápido caso você goste de uma disposição pronta. A IA cria um esboço baseado no que você descreve, mas você ainda precisará ligar links, imagens e cores manualmente.
How many levels can a Navi+ menu have?
Com o plano Business, é possível estruturar categorias com até três níveis de profundidade. Para comparar, o menu padrão da Shopify permite um item principal com até dois níveis de menus suspensos.
How do I turn a Navi+ menu off?
Você pode desligar qualquer menu colocando seu status em Off no painel do Navi+. Para desligar todos os menus em um tema, desative o Store Connector nas incorporações do app no editor do tema e salve.
Why is my Navi+ menu not showing?
O motivo mais frequente é que o Store Connector foi ativado em um tema de rascunho em vez do tema publicado, ou as alterações não foram salvas. Se trocou de tema recentemente, ative a incorporação no tema novo.
Sources
- Shopify App Store: Navi+ Tab Bar & Mega Menu
- Navi+ Help: How to install Navi+
- Navi+ Help: Publishing on Shopify
- Navi+ Help: Menu Depth
- Navi+ Help: Create Menu Structure with AI
- Navi+ Help: Publish Overview
- Shopify Help Center: App embeds
- Shopify Help Center: Duplicating themes
- Shopify Help Center: Drop-down menus
- Shopify Help Center: Menus and links
- Nielsen Norman Group: Hamburger Menus and Hidden Navigation
- Product Hunt: Navi+ Menu Builder
Explore os temas
Este guia traz links para artigos específicos — aprofunde-se em cada um.