Quando lojistas procuram um aplicativo de menu, muitas vezes encontram tutoriais para cardápios de restaurantes em vez de navegação de comércio eletrônico—este guia é estritamente dedicado a planejar e lançar menus de navegação para lojas virtuais na Shopify. Configurar um app de navegação pela primeira vez em uma loja com vendas ativas pode parecer delicado, mas aprender o processo não exige código.
Esboce suas categorias no papel, pratique em um tema duplicado, concentre-se em apenas um tipo de menu por vez e valide os toques em um celular real antes de publicar.
- Pratique em um tema duplicado: Um backup protege as vendas da sua loja ativa enquanto você aprende.
- Domine um formato por vez: Comece com um tipo único—como uma barra inferior ou gaveta lateral—antes de criar múltiplos menus.
- Lembre-se do app embed: É fundamental ligar o botão de app embed no editor de temas para que o menu apareça.
Quick answer: how to get started with a Shopify menu builder app
Para começar com um app de menu para Shopify, esboce seu menu no papel primeiro, escolha um tipo de menu para aprender, ative o app embed no editor de temas, crie alguns itens, visualize no celular e depois publique verificando cada link:
- Step 1: Sketch your menu structure: Mapeie coleções no papel e organize links nativos em Content > Menus.
- Step 2: Pick one menu type to learn first: Escolha uma Tab Bar, um Mobile Drawer ou um Mega Menu de acordo com seus clientes.
- Step 3: Install the app and turn on the app embed: Instale o app, ative o botão app embed no editor de temas e salve.
- Step 4: Build your first menu: Crie 4 ou 5 itens essenciais com rótulos diretos, ícones e links funcionais.
- Step 5: Match your brand: Ajuste cores de fundo, tipografia e alinhamento com seu tema ativo.
- Step 6: Preview on a phone and a desktop: Teste os toques em um tema duplicado usando um smartphone físico.
- Step 7: Publish, check every link, and fix common problems: Publique no app e valide os links na sua loja online real.
Se tiver apenas uma hora disponível, execute as etapas 1 a 3 e a etapa 6 em um tema duplicado.
Four terms to learn before you start
Antes de abrir os painéis de configuração, familiarize-se com estes cinco termos comuns:
| Termo | O que significa | Onde aparece |
|---|---|---|
| Menu | Uma lista estruturada de links para organizar acessos a produtos, coleções, páginas e blog (Shopify Help Center). | No painel da Shopify em Content > Menus, bem como no cabeçalho, rodapé ou gaveta. |
| Item de menu / link | Um componente clicável que leva o visitante a uma página, coleção, URL externa ou âncora (#). |
Botões, textos com link ou abas com ícones. |
| Nível (Level) | A profundidade hierárquica da navegação. Nos menus padrão da Shopify, um item principal pode ter até dois níveis de menus suspensos aninhados (Shopify Help Center). | Menus suspensos, colunas de mega menu e sanfonas no celular. |
| App embed | Um elemento fornecido pelo app que flutua ou se sobrepõe ao tema sem alterar permanentemente o código Liquid (Shopify Help Center). | Na barra lateral do editor de temas da Shopify, na aba App embeds. |
| Publicar (Publish) | A ação que torna o menu visível aos clientes. Ativar o app embed carrega o script, mas alguns apps, incluindo o Navi+, exigem clicar em publicar no seu próprio painel para ativar a exibição. | No painel do app de menu ou nos ajustes de salvamento do tema. |
Step 1: Sketch your menu structure before you open the app
Não abra o app de menu sem um plano traçado. Organizar categorias diretamente no software gera indecisão e layouts confusos. Prepare seu conteúdo no papel primeiro.
Liste os destinos vitais para os seus clientes: coleções em destaque, linhas de produtos essenciais, páginas informativas (Sobre, Envio, Contato) e o blog (Shopify Help Center). Desenhe a estrutura do menu (sketch your menu structure) em formato de árvore de 2 a 3 níveis. Determine 4 a 5 categorias principais e distribua as subcoleções abaixo.
Em seguida, acesse no painel da Shopify a seção Content > Menus (Shopify Help Center). Limpe seus menus padrão, exclua links inativos e valide as URLs. Se um item principal servir apenas para agrupar categorias e não deve levar a uma página, insira # no campo de link (Shopify Help Center).
Respeite os limites técnicos da Shopify: um item superior suporta até dois níveis de menus suspensos aninhados (Shopify Help Center). Essa arrumação prévia no painel da Shopify tornará a integração com o app muito mais rápida.
Shopify’s own video shows how to nest menu items:
Step 2: Pick one menu type to learn first
Os aplicativos modernos trazem diversas opções: barras inferiores, mega menus, gavetas laterais e botões flutuantes. Tentar montar tudo na primeira sessão causa sobrecarga. Escolha um tipo de menu para aprender primeiro (pick one menu type) considerando onde seus compradores mais navegam.
Figura 1: Ilustração conceitual (Concept illustration) — Step 2: Pick one menu type to learn first
Mobile shoppers first
Se a maioria das visitas vem de smartphones, o importante é um menu fácil de encontrar e de tocar no celular (veja a citação do Nielsen Norman Group mais abaixo). Para lojas focadas em mobile, vale aprender primeiro dois formatos:
- Tab Bar: Uma barra fixa na parte inferior da tela do celular. Mantém as páginas prioritárias (Início, Loja, Busca, Carrinho) visíveis em uma única barra permanente.
- Mobile Drawer: Um painel lateral que desliza suavemente ao toque, acomodando árvores de categorias extensas e links de conta.
Desktop shoppers first
Se você comercializa um catálogo vasto com muitos departamentos e a maior parte dos pedidos é feita pelo computador, priorize:
- Mega Menu: Um painel suspenso largo que mostra várias colunas de categorias e imagens promocionais simultaneamente.
| Tipo de menu | Ideal quando | Aprenda primeiro se |
|---|---|---|
| Tab Bar | Alto tráfego móvel e conjunto claro de 4 ou 5 ações rotineiras (Início, Loja, Busca, Carrinho). | Mobile shoppers first: a maioria absoluta dos pedidos vem de smartphones. |
| Mobile Drawer | Catálogo amplo com múltiplos níveis que precisa de navegação lateral organizada. | Mobile shoppers first: você deseja substituir a gaveta nativa restrita do tema. |
| Mega Menu | Grande catálogo no computador onde os usuários precisam de uma visão geral imediata. | Desktop shoppers first: os computadores representam o maior volume das suas vendas. |
A facilidade de encontrar itens depende de pistas visuais claras. Conforme apontado pelo Nielsen Norman Group em suas pesquisas mobile: “visual salience, information scent, context, tappability signifiers, and user expectations also affect navigation discoverability on mobile devices” (Nielsen Norman Group).
Confira nosso comparativo sobre how to choose the right menu type para o tamanho da sua loja, e veja como lojistas combinam tab bars and hybrid mobile navigation para melhorar a ergonomia móvel. Escolha apenas um formato hoje.
Step 3: Install the app and turn on the app embed
Instale o aplicativo de menu desejado na Shopify App Store. Após a instalação, o app constará no Shopify Admin em Apps, mas ainda não mostrará elementos na sua loja virtual.
Os apps atuais operam via app embeds. Conforme documentado pela Shopify, app embeds são elementos fornecidos pelo app que flutuam ou se sobrepõem ao tema (Shopify Help Center), sem modificar arquivos Liquid permanentemente.
Como ativar o app embed (turn on the app embed):
- No Shopify Admin, vá em Online Store > Themes.
- Escolha o tema de testes—preferencialmente uma cópia duplicada (ver Passo 6)—e clique em Customize.
- Na barra lateral esquerda, clique no ícone de App embeds (Shopify Help Center).
- Encontre seu app de menu e coloque o seletor em Ativado (On).
- Clique em Salvar (Save) no canto superior direito.
- Abra a pré-visualização da loja para ver o app funcionando (Shopify Help Center).
A documentação da Shopify destaca que app embeds podem ser usados com qualquer versão de tema (Shopify Help Center). Isso não assegura que qualquer app de terceiros se ajuste de imediato a temas altamente modificados. Guarde esta regra de manutenção: se trocar de tema publicado no futuro, terá de reativar esses apps no novo tema (Shopify Help Center).
Para compreender a arquitetura de temas em detalhes, leia nosso guia sobre how app embeds work with your theme.
Step 4: Build your first menu: items, links, and icons
Abra o painel do app a partir do Shopify Admin. Comece com uma estrutura compacta: monte de 4 a 5 itens principais alinhados ao seu esboço do Passo 1.
Recomendações fundamentais:
- Nomes diretos: Utilize termos intuitivos como “Novidades”, “Coleções”, “Mais Vendidos” e “Suporte”.
- Links para destinos ativos: Direcione cada item a uma página ou coleção publicada. Não crie links para categorias vazias.
- Ícones claros: Ao montar uma Tab Bar móvel, combine cada título com um ícone reconhecível (casa para Início, lupa para Busca, sacola para Carrinho), mantendo o texto visível.
- Adicione subitens aos poucos: Só crie categorias secundárias quando o nível superior estiver validado. Lembre-se da regra da Shopify de até dois níveis de menus suspensos (Shopify Help Center).
- Conecte menus existentes da Shopify: Vários apps permitem conectar a estrutura de Content > Menus. Se o seu app oferece isso, use o recurso em vez de digitar tudo manualmente.
Observação: Este guia aborda os passos fundamentais para o primeiro menu. A construção de mega menus avançados de múltiplas colunas com banners é tratada em tutoriais dedicados.
Step 5: Match your brand: colors, fonts, and position
Um menu sem ajuste visual destoa da loja e diminui a credibilidade perante o cliente. Personalize seu novo menu para que ele se una naturalmente à identidade do seu tema.
Dê atenção a três aspectos:
- Cores: Verifique as configurações do tema ativo e anote os códigos hexadecimais de fundo, cabeçalho e textos. Aplique esses tons ao fundo do menu, bordas, ícones e estados ativos. Garanta contraste elevado para leitura móvel sob luz solar.
- Tipografia e tamanho: Use a mesma fonte do corpo do seu tema. Mantenha os textos no celular legíveis e fáceis de tocar.
- Posicionamento: Fixe a Tab Bar firmemente no rodapé da tela; alinhe o Mobile Drawer para deslizar da borda esquerda; posicione o Mega Menu logo abaixo do cabeçalho.
Certifique-se de que o menu não cubra elementos essenciais da loja, como botões flutuantes de “Comprar agora” ou o widget de atendimento.
Acesse nosso artigo sobre make navigation feel like your store para dicas completas de identidade visual.
Step 6: Preview on a phone and a desktop before you publish
Jamais publique um novo menu de navegação diretamente para os clientes sem validação. Adote estas três etapas de teste:
Figura 2: Ilustração conceitual (Concept illustration) — Step 6: Preview on a phone and a desktop before you publish
- Duplicate theme first: A Shopify orienta que antes de customizar sua loja, você deve “make a backup copy so that you can discard your changes and start again if you need to” (Shopify Help Center). Em Online Store > Themes, clique em Actions > Duplicate. Ative o app embed e crie o menu nessa cópia para que ninguém veja o trabalho em andamento.
- Tap every item: Não confie unicamente na simulação de tela do navegador. Preview on a phone: abra o link de pré-visualização em um smartphone físico. Segure o celular com uma mão e toque em cada link e sanfona para validar a agilidade de resposta.
- Check the theme menu: Avalie como o novo menu convive com o cabeçalho original. Como os menus padrão aparecem em locais diferentes dependendo do tema (Shopify Help Center), você poderá precisar ocultar o menu nativo no editor de temas para evitar barras duplicadas.
Amplie a janela do navegador no computador para conferir também o alinhamento em monitores grandes.
Step 7: Publish, check every link, and fix common problems
Com os testes concluídos com sucesso, você está pronto para publicar. Em alguns apps, incluindo o Navi+, ligar o app embed apenas carrega o código; é necessário clicar em um botão de publicação específico no painel do app para ativar o menu no site (Navi+ Help Center).
Check every link: Após a publicação, abra uma janela anônima e teste cada link na sua loja virtual em tempo real. Se houver falhas de exibição, consulte esta tabela de soluções:
| Sintoma | Causa provável | Como corrigir |
|---|---|---|
| Menu não aparece na loja | O app embed está desligado ou não foi salvo no editor (Shopify Help Center), ou não foi clicado em publicar no app (Navi+ Help Center). | Vá em Theme Editor > App embeds, ligue o seletor, clique em Save e depois publique no painel do app. |
| Menu sumiu após mudar de tema | O app embed não foi reativado no novo tema publicado (Shopify Help Center). | Abra Online Store > Themes > Customize no tema ativo, vá em App embeds, reative o app e salve. |
| Dois menus duplicados aparecendo | O menu padrão do cabeçalho do tema continua ativo ao lado do app (Shopify Help Center). | No editor de temas, oculte o bloco do menu original ou mude a posição do app (como uma Tab Bar no rodapé). |
Se encontrar anomalias persistentes, consulte a documentação oficial do app ou entre em contato com o suporte técnico.
Trade-offs: when you don’t need a menu builder app yet
Um guia equilibrado deve ser honesto: nem toda loja na Shopify precisa de um app de menu de imediato. Reconhecer quando as ferramentas nativas são suficientes economiza tempo e simplifica operações.
Se a sua loja opera com catálogo reduzido—como um produto único ou poucas referências—o gerenciador nativo em Content > Menus da Shopify costuma bastar (Shopify Help Center). Os menus padrão suportam até dois níveis de menus suspensos (Shopify Help Center), fornecendo uma navegação leve sem ferramentas adicionais.
Instalar qualquer aplicativo extra envolve custos práticos: gerenciar mais uma tela de ajustes, curva de aprendizado e a obrigação de religar o app embed a cada alteração de tema (Shopify Help Center).
No entanto, quando seu catálogo se expande e surgem barreiras claras—como a demanda por uma barra inferior fixa no celular, uma gaveta lateral flexível ou um mega menu com imagens indisponível no tema—migrar para um app de menu torna-se um excelente passo.
Analise nosso diagnóstico sobre Shopify theme menu limitations para avaliar se o seu negócio ultrapassou os limites do tema atual.
What to learn next: Icon Menu, Floating Button, and seasonal menus
Depois que seu primeiro menu estiver estável na loja em produção, você poderá adotar recursos de navegação complementares:
- Icon Menu: Insira uma linha de ícones circulares de categorias na página inicial para facilitar a exploração visual das coleções.
- Floating Button (FAB): Posicione um botão flutuante no canto inferior para disponibilizar atalhos para rastreamento de pedidos ou suporte.
- Menus sazonais: Reorganize seus links durante a Black Friday ou datas comemorativas, destacando as seleções promocionais no topo.
Saiba when an icon menu beats a text list na navegação visual, e meça o impacto com as 5 metrics worth tracking após o lançamento.
Where Navi+ fits
Se você procura um aplicativo para praticar todas as etapas deste tutorial em uma interface simples, conheça o Navi+ Tab Bar & Mega Menu.
O Navi+ foi criado para lojistas da Shopify que desejam construir barras inferiores fixas, mega menus, gavetas laterais móveis, menus de ícones e botões flutuantes por meio de um editor de arrastar e soltar (Shopify App Store). Permite conectar diretamente menus já existentes na Shopify, usar modelos prontos e acelerar a criação com assistência de IA (Shopify App Store).
Conta com um plano gratuito para que você possa montar e testar sem investimento inicial (Shopify App Store). O fluxo de publicação é muito claro: ative o app embed “Store Connector” no editor de temas da Shopify, configure seu menu e clique em “Publish to website” no painel do Navi+ (Navi+ Help Center).
A documentação do Navi+ reforça as boas práticas deste artigo: “The best practice is to create a duplicate Theme and test Navi+ on that version first” (Navi+ Help Center). Isso garante que você ajuste cada detalhe no smartphone antes de colocar as mudanças no ar.
Action checklist: your first-session plan
Tenha esta lista à mão durante sua primeira sessão:
- Sketch your menu structure: Desenhe 4–5 categorias e subcoleções no papel.
- Tidy Content > Menus: Elimine links obsoletos no painel da Shopify (Shopify Help Center).
- Duplicate theme first: Faça uma cópia do tema ativo em Themes para trabalhar protegido (Shopify Help Center).
- Pick one menu type: Escolha um único modelo: Tab Bar, Mobile Drawer ou Mega Menu.
- Turn on the app embed: Ative o app embed no editor de temas e salve (Shopify Help Center).
- Build 4–5 core items: Crie títulos claros, ícones coerentes e links funcionais.
- Match colors/fonts: Iguale as cores hexadecimais e fontes com o tema da loja.
- Tap every item on a phone: Abra a pré-visualização no celular e toque em cada botão.
- Publish and check every link: Publique no app e confira os links na loja ativa (Navi+ Help Center).
- Re-check after theme changes: Reative o app embed se atualizar ou mudar de tema (Shopify Help Center).
Se você quer praticar esses passos em um único app, o Navi+ Tab Bar & Mega Menu tem plano gratuito, modelos prontos e pode conectar seus menus existentes da Shopify: comece em um tema duplicado e publique quando estiver satisfeito.
FAQ
Qual tipo de menu devo montar primeiro?
Inicie com o modelo que atende o aparelho mais usado pelos seus clientes: escolha uma Tab Bar ou Mobile Drawer para público de smartphones, ou um Mega Menu para computadores.
Preciso ajustar meus menus da Shopify antes?
Fazer uma revisão prévia em Content > Menus é altamente recomendado para padronizar os links originais (Shopify Help Center); apps como o Navi+ podem se conectar a esses menus para economizar tempo (Shopify App Store).
Como ativar um app embed na Shopify?
No editor de temas da Shopify, clique no ícone App embeds na barra esquerda, ative a chave do app de menu e clique em Salvar (Shopify Help Center).
Por que o app de menu não está aparecendo na loja?
As razões mais habituais são o app embed desligado ou não salvo no editor (Shopify Help Center), o embed desativado após trocar de tema (Shopify Help Center), ou a falta de clique em publicar no painel do app (Navi+ Help Center).
Posso fazer testes sem que os clientes vejam?
Sim. Duplique o tema ativo na Shopify, ative o app embed nessa cópia e avalie a navegação no seu celular antes de publicar no tema oficial (Shopify Help Center; Navi+ Help Center).
Quantos níveis um menu suspenso da Shopify pode ter?
Nos menus nativos da Shopify, um item principal suporta até dois níveis de menus suspensos aninhados abaixo dele (Shopify Help Center).
Sources
- Shopify Help Center: Set up drop-down menus in your online store
- Shopify Help Center: Menus and links
- Shopify Help Center: App embeds and theme extensions
- Shopify Help Center: Duplicating themes
- Nielsen Norman Group: Mobile Navigation Discoverability
- Navi+ Help Center: Publishing on Shopify
- Shopify App Store: Navi+ Tab Bar & Mega Menu
Explore os temas
Este guia traz links para artigos específicos — aprofunde-se em cada um.