Como criar um menu na Shopify usando um app de navegação (Passo a passo)

Montar um menu de navegação intuitivo é uma base importante para a usabilidade de uma loja Shopify. Um aplicativo de menu não descarta a navegação original da sua loja: ele se apoia diretamente na estrutura limpa presente na seção Conteúdo > Menus (Content > Menus) do painel administrativo, acrescenta os formatos visuais que o tema não consegue entregar sozinho (como mega menus em colunas ou interfaces móveis sob medida) e só se torna visível na loja virtual após você ativá-lo nas incorporações de app (App embeds) do tema.

Se os menus suspensos padrão se tornaram limitados, se você precisa de blocos de categorias com fotos ou deseja uma barra de guias inferior fixa de fácil alcance com o polegar no celular, este guia explica todo o procedimento passo a passo, sem mexer em nenhuma linha de código.

Resposta rápida: como criar um menu com um app de navegação na Shopify

Para criar um menu com um aplicativo de navegação da Shopify, planeje seus links em Conteúdo > Menus, instale o aplicativo e crie o menu em seu editor, adicione submenus ou um mega menu, configure um layout móvel, ative o app em App embeds no editor de temas e teste no desktop e no celular.

Confira as 5 etapas essenciais:

1. Planeje a estrutura em Conteúdo > Menus: Crie suas coleções, produtos e páginas institucionais no painel da Shopify antes de instalar ferramentas externas.
2. Instale o app de navegação e crie seu primeiro menu: Adicione o aplicativo escolhido pela Shopify App Store e configure o contêiner de desktop ou use um modelo de base.
3. Adicione submenus, painéis de mega menu e imagens: Agrupe links secundários em colunas temáticas e inclua miniaturas de coleções para orientar o olhar dos clientes.
4. Construa o menu mobile e teste em um celular real: Configure uma gaveta deslizante (drawer) ou uma barra de guias fixa no rodapé da tela móvel e verifique os toques num smartphone físico.
5. Publique via App embeds e resolva problemas comuns: Ative o botão do app nas configurações do editor de temas, salve as alterações e confira a exibição em todos os tamanhos de tela.

Quando o menu nativo da Shopify é suficiente (e quando você precisa de um app)

Na plataforma Shopify, os menus nativos são gerenciados de forma centralizada em Conteúdo > Menus no painel de controle, enquanto os ajustes de tema definem o local exato onde esses elementos são renderizados na loja.

Para catálogos menores, a navegação padrão da Shopify atende bem ao uso cotidiano. De acordo com a documentação do Centro de Ajuda da Shopify, um item de menu de nível superior aceita até dois níveis de menus suspensos aninhados (Item principal → Nível 1 → Nível 2). Esse teto de três níveis é adequado para coleções enxutas, páginas de políticas e catálogos simples, sem exigir software adicional.

No entanto, como ressalta o Baymard Institute em seus estudos sobre navegação no e-commerce, para comprar um produto, os clientes precisam antes conseguir encontrá-lo. Quando uma loja cresce e acumula muitas subcategorias, os menus suspensos baseados exclusivamente em texto obrigam os usuários a rolar listas verticais longas. Dependendo do tema, o menu nativo pode não permitir banners de categoria, fotos de produtos ou grades em várias colunas sem personalização adicional.

Para entender os limites estruturais dos temas padrão antes de buscar complementos externos, leia nossa análise sobre Shopify theme menu limitations.

Se o seu catálogo conta com poucos itens e o cliente chega aos produtos em um ou dois toques, o menu nativo não é apenas suficiente: é a alternativa mais simples. Contudo, quando sua loja demanda apoio visual e percursos ergonômicos para ajudar os visitantes a explorar categorias diversificadas, um aplicativo especializado se torna útil.

Passo 1: Planeje a estrutura do menu antes de instalar qualquer app

Um menu organizado começa com um catálogo Shopify organizado. Antes de pesquisar opções na App Store ou adicionar blocos de app, dedique tempo para desenhar sua estrutura.

Primeiro, certifique-se de que todas as páginas de destino estejam publicadas no painel. Crie as coleções necessárias, confirme que elas possuem produtos ativos associados e verifique se as páginas institucionais essenciais (Quem somos, Contato, Envios, Perguntas frequentes) estão ativas. Um menu não consegue apontar para itens que ainda não existem.

Em seguida, rascunhe sua árvore de categorias em um papel ou planilha, mantendo a profundidade em até três níveis lógicos. Rótulos curtos e claros são mais fáceis de escanear do que nomes conceituais ou ambíguos. Use expressões claras como “Casacos masculinos” em vez de frases publicitárias como “Estilo para o inverno”.

Depois, monte ou revise seus links principais em Conteúdo > Menus na Shopify. Muitos aplicativos de navegação conseguem se conectar diretamente a essa lista existente ou importá-la, poupando o trabalho de redigitar cada endereço. Para avaliar o modelo mais adequado ao volume do seu catálogo, confira nosso artigo sobre como choose the right menu type.

O tutorial da própria Shopify sobre menus suspensos:

Com suas categorias e links em ordem no painel administrativo, você estará pronto para iniciar a montagem no aplicativo.

Passo 2: Instale o app e construa seu primeiro menu

Após escolher o aplicativo de navegação na Shopify App Store, clique em Instalar para adicioná-lo à sua loja. Aplicativos criados com as Theme App Extensions da Shopify não exigem que você edite manualmente o código do tema; confirme que o aplicativo escolhido funciona dessa forma.

No painel de controle do app, a primeira ação consiste em definir o formato de menu que você pretende construir:

• Desktop Mega Menu: Um painel amplo para computadores que apresenta múltiplas colunas de links ladeadas por banners ou fotos promocionais.
• Mobile Drawer Menu: Uma gaveta lateral que surge com suavidade na tela quando o usuário toca no ícone de hambúrguer no celular.
• Bottom Tab Bar: Uma barra fixa fixada na borda inferior das telas móveis para facilitar o acesso aos destinos vitais da loja.

Dependendo do aplicativo, você poderá partir de modelos prontos ou estruturar o contêiner do zero. Determinadas soluções oferecem integração direta com os menus existentes da Shopify, importando seus links sem a necessidade de reconstruir manualmente as relações de dependência entre categorias.

No editor visual, adicione seus itens principais (como “Loja”, “Lançamentos” ou “Coleções”) e aponte cada link usando o seletor interno do app, em vez de colar URLs estáticas manualmente. Aproveite a visualização em tempo real do editor para checar tipografia, espaçamentos e alinhamentos antes de inserir imagens.

Passo 3: Adicione submenus, mega menu, imagens e links de coleções

Com as seções principais organizadas, transforme as categorias mais complexas em mega menus divididos em várias colunas. Como observa o Nielsen Norman Group sobre mega menus, esse formato é uma excelente escolha de design para acomodar um grande número de opções, porque mantém tudo visível ao mesmo tempo.

Para estruturar um mega menu harmonioso no aplicativo:

1. Reúna links por temas lógicos: Distribua as subcategorias em colunas verticais com cabeçalhos bem identificados (por exemplo: “Partes de cima”, “Calças”, “Acessórios”).
2. Limite a profundidade no painel: Mantenha os links de cada coluna em apenas um nível para que o olhar do consumidor consiga escanear as opções instantaneamente.
3. Incorpore apoio visual: A pesquisa do Nielsen Norman Group aponta que imagens no mega menu ajudam os usuários a escolher a opção certa. Adicione miniaturas de coleções ou cartões de produtos ao lado das colunas de texto.
4. Vincule coleções e produtos: Selecione coleções ou produtos pela ferramenta de seleção do app em vez de digitar URLs manualmente. Isso reduz erros de digitação, mas revise seus links sempre que renomear ou excluir uma coleção ou página.

Para obter orientações adicionais sobre espaçamento de colunas, peso visual e posicionamento de cartões de destaque, leia nosso material sobre mega menu best practices.

Um app de menu substitui o menu de navegação da Shopify?

Uma dúvida recorrente entre lojistas é se a instalação de um aplicativo remove ou descarta permanentemente o menu original da Shopify.

A resposta é que seu menu nativo continua na seção Conteúdo > Menus do painel da Shopify, onde você segue gerenciando seus links. O aplicativo cuida apenas de como o seu próprio menu é exibido na vitrine do tema.

Dependendo do mecanismo adotado pela aplicação e das opções configuradas, existem diferentes modelos de integração:

• Inserir antes ou depois (Insert Before / Insert After): O aplicativo posiciona o contêiner do menu imediatamente acima ou abaixo de um elemento já existente no tema por meio de um seletor CSS (como o cabeçalho ou a barra de avisos).
• Substituir o menu do tema (Replace Theme Menu): O app localiza o bloco de menu nativo do tema pelo seletor CSS e o substitui por completo pelo código do novo menu criado no aplicativo.
• Inserção por seções ou blocos: Algumas soluções viabilizam a inserção de menus como seções ou blocos convencionais no editor de temas. Na Navi+, por exemplo, esse método se aplica especificamente ao Mega Menu e ao Grid Menu.

Ilustração conceitual: Comparativo entre inserir o menu abaixo do cabeçalho e substituir o menu do tema por seletor CSS.

Figura 1: Ilustração conceitual — Inserção de menu abaixo do cabeçalho versus substituição completa do menu do tema via seletor CSS.

Usando seu menu existente da Shopify dentro do aplicativo

Alguns aplicativos contam com a função de conectar-se aos menus vigentes da Shopify para aproveitar sua estrutura inicial de links. No entanto, é recomendável consultar a documentação do aplicativo para entender se alterações futuras em Conteúdo > Menus são refletidas automaticamente ou se exigem clicar em um botão de sincronização (Sync) no painel do app.

O que acontece quando você troca de tema?

Ao instalar ou publicar um novo tema, o menu gerado no aplicativo não surgirá de forma automática na nova loja. Como esclarece o Centro de Ajuda da Shopify sobre extensões de temas, é necessário reativar esses aplicativos no novo tema, visto que as incorporações não vêm ativadas por padrão.

Além disso, como cada tema possui sua própria estrutura HTML e classes CSS para o cabeçalho, uma substituição vinculada a um seletor CSS específico pode exigir pequenos ajustes no novo tema. Para comércios com fluxo diário de clientes, é recomendável validar o aplicativo em uma cópia duplicada do tema antes de colocá-lo no ar.

Passo 4: Construa o menu mobile e teste em um celular real

Um mega menu projetado para telas grandes não pode ser apenas encolhido para caber em um smartphone. Forçar layouts em várias colunas em um display compacto resulta em uma navegação congestionada e desconfortável.

Em avaliações de usabilidade conduzidas pelo Baymard Institute, alguns participantes abriram o menu principal no celular apenas para fechá-lo logo em seguida, sobrecarregados e confusos com as opções. Paralelamente, a documentação da Shopify sobre menus suspensos salienta que alguns temas podem necessitar de ajustes no CSS para melhorar a usabilidade móvel.

Ao estruturar a navegação móvel com o app, vale a pena considerar dois formatos centrais aliados à alternância responsiva:

• Menu lateral móvel (Mobile Drawer): Uma gaveta deslizante suave que organiza as subcategorias em linhas sanfonadas (accordion), garantindo que o usuário explore sem perder o contexto.
• Barra de navegação inferior (Bottom Tab Bar): Uma barra horizontal posicionada no rodapé da tela que coloca os acessos mais críticos (Início, Busca, Coleções, Carrinho) diretamente sob a zona de conforto do polegar.
• Transição responsiva inteligente: Alguns aplicativos possuem adaptação automatizada. Na Navi+, por exemplo, o mega menu de desktop muda automaticamente para o modo mobile em telas menores que 768 pixels, e o recurso Smart responsive integra uma referência ao vivo do menu desktop em uma gaveta móvel deslizante.

Ilustração conceitual: Comparação entre gaveta móvel deslizante e barra de guias fixa no rodapé.

Figura 2: Ilustração conceitual — Gaveta deslizante móvel ao lado de uma barra de guias fixa inferior.

Faça questão de inspecionar a navegação em um smartphone de verdade, evitando confiar unicamente nos emuladores de navegador no computador. Apenas com o aparelho na mão é possível sentir se as áreas de toque oferecem espaço confortável e se as respostas aos gestos acontecem com agilidade.

Para aprofundar suas decisões no mobile, veja nossos guias sobre o mobile drawer menu, a montagem de uma prática bottom tab bar, e os princípios fundamentais de ergonomia no artigo mobile navigation beyond the hamburger menu.

Passo 5: Publique na loja e resolva problemas comuns

Concluir a configuração visual no editor do aplicativo não publica o menu instantaneamente para os visitantes da loja. Os aplicativos desenvolvidos com Theme App Extensions utilizam App embeds, que permitem ativar o app pelo editor de temas sem editar manualmente o código do tema.

Segundo as diretrizes de desenvolvimento da Shopify, os blocos de App embed permanecem desativados por padrão após a instalação de um aplicativo. Os lojistas precisam entrar no editor de temas em Configurações do tema > Incorporações de app (App embeds), ligar a opção correspondente e salvar.

Conforme a documentação técnica da Shopify, as incorporações de app são elementos fornecidos pelos aplicativos que flutuam ou se sobrepõem ao tema, sendo compatíveis com qualquer versão de tema. Graças a essa arquitetura, os lojistas não precisam fazer edições manuais nos arquivos do tema.

Roteiro para publicar o menu:

1. Abra o painel da Shopify e acesse Loja virtual > Temas.
2. Clique em Personalizar ao lado do seu tema ativo (ou da cópia de testes).
3. Na barra de ferramentas à esquerda, clique no ícone de Incorporações de app.
4. Localize o nome do seu aplicativo de menu e coloque o botão na posição Ativado (On).
5. Clique em Salvar no canto superior direito.

Trade-offs: quando você não precisa de um app de menu

Mesmo que os aplicativos de navegação tragam enorme liberdade criativa, a instalação de um app não é obrigatória para todo negócio na Shopify. Acrescentar ferramentas de terceiros exige ponderações práticas:

• Catálogos compactos dispensam menus complexos: Se a sua loja tem apenas poucos produtos reunidos em duas ou três coleções, o menu suspenso nativo da Shopify (com até dois níveis aninhados) pode oferecer uma navegação ágil e limpa.
• Necessidade de checagem ao mudar de tema: Toda vez que você altera o tema publicado, as incorporações de app não ligam sozinhas e os seletores CSS podem precisar de revisão.
• Alguns temas já trazem mega menu integrado: Certos temas oferecem uma configuração nativa de cabeçalho em várias colunas. Se essa opção atender aos seus requisitos de design, teste-a primeiro antes de instalar apps extras.

Adote um aplicativo de menu quando a expansão do catálogo, a exigência de apoio visual ou a usabilidade móvel superarem o que seu tema atual consegue entregar nativamente.

Checklist: perguntas antes de instalar um app de menu

Antes de bater o martelo sobre qual aplicativo utilizar, reflita sobre as seguintes questões práticas:

• Integração com menus nativos: O app consegue importar suas listas de Conteúdo > Menus e deixa claro como as atualizações de links são sincronizadas?
• Formatos móveis sob medida: Ele traz recursos ergonômicos específicos para celulares (como gaveta suave ou barra inferior) em vez de apenas compactar o menu de desktop?
• Funcionamento sem código: A publicação ocorre de modo limpo por App embeds e blocos de tema, sem demandar alterações manuais em arquivos Liquid?
• Rotina na troca de tema: O procedimento para reativar o aplicativo ao publicar um novo tema é simples e compreensível?
• Ambiente seguro de testes: É possível desenhar e testar o menu em um tema duplicado não publicado antes de expô-lo aos compradores?
• Profundidade das categorias: A ferramenta suporta os níveis de divisão de que você precisa preservando uma leitura fluida (recomendado: até 3 níveis)?
• Assistência técnica para temas específicos: A empresa desenvolvedora disponibiliza documentação ou suporte caso seu tema utilize seletores CSS fora do padrão?

O papel do Navi+

Se você procura um caminho para implementar essa metodologia na sua loja, a Navi+ Tab Bar & Mega Menu oferece um editor de arrastar e soltar para a Shopify.

Com a Navi+, lojistas constroem barras de guias inferiores fixas, mega menus multicolunas para computador, gavetas móveis, menus de ícones e botões flutuantes usando recursos de arrastar e soltar. O aplicativo permite conectar-se aos seus menus existentes da Shopify para aproveitar sua estrutura de links.

Para publicar a navegação na sua loja, basta ativar a incorporação “Store Connector” na seção App embeds do tema. A partir daí, você escolhe se deseja inserir o menu antes ou depois dos elementos existentes, ou usar o modo Replace para substituir a barra original do tema com seletores CSS. No caso do Mega Menu e do Grid Menu, a inclusão através de seções e blocos também é suportada.

Para proteger a experiência dos seus visitantes, o Navi+ recomenda que lojas com tráfego testem o menu primeiro em uma cópia do tema. Se quiser experimentar este fluxo, o Navi+ Tab Bar & Mega Menu tem um plano gratuito: crie o menu, teste em um tema duplicado e ative somente quando estiver satisfeito.

Perguntas frequentes (FAQ)

Um app de menu substitui o meu menu de navegação da Shopify?

Isso depende da configuração selecionada no app. O aplicativo pode inserir um menu acima ou abaixo do cabeçalho, ou substituir totalmente o menu do tema por seletores CSS, enquanto sua lista de links original continua intacta em Conteúdo > Menus.

O que acontece com o meu app de menu se eu trocar de tema?

Os App embeds não são ativados automaticamente em temas recém-publicados. Você precisará reativar a incorporação do app no editor do novo tema e conferir se os seletores CSS de substituição coincidem com a estrutura do novo tema.

Quantos níveis um menu suspenso da Shopify pode ter?

De acordo com as diretrizes oficiais da Shopify, um item principal na navegação nativa aceita até dois níveis de menus suspensos aninhados, resultando em uma profundidade máxima de três níveis.

Preciso editar o código do tema para usar um app de menu?

Não, se o aplicativo for criado com as Theme App Extensions da Shopify: você pode publicar e configurar os menus pelo editor de temas sem editar manualmente o código do tema. Confirme se o app escolhido funciona assim.

Quando preciso de um mega menu em vez de um menu suspenso simples?

O mega menu é indicado quando a loja dispõe de um catálogo amplo com muitas categorias que precisam ser visualizadas simultaneamente, ou quando a inclusão de imagens ajuda o cliente a encontrar o setor certo.

Como garantir que meu menu funcione perfeitamente no celular?

Desenvolva uma disposição pensada para telas menores — como uma gaveta lateral deslizante ou uma barra de guias fixa no rodapé — ou escolha um aplicativo com adaptação responsiva automática, e lembre-se de conferir a experiência em um smartphone real.

Fontes e referências

• Shopify Help Center — Menus and links. help.shopify.com/en/manual/online-store/menus-and-links
• Shopify Help Center — Drop-down menus. help.shopify.com/en/manual/online-store/menus-and-links/drop-down-menus
• Shopify Help Center — Apps and theme structure. help.shopify.com/en/manual/online-store/themes/theme-structure/extend/apps
• Shopify Developer Documentation — Theme app extension configuration. shopify.dev/docs/apps/build/online-store/theme-app-extensions/configuration
• Shopify Developer Documentation — Theme app extensions overview. shopify.dev/docs/apps/build/online-store/theme-app-extensions
• Nielsen Norman Group — Mega Menus Work Well for Site Navigation. nngroup.com/articles/mega-menus-work-well
• Baymard Institute — Homepage & Navigation UX Best Practices. baymard.com/blog/ecommerce-navigation-best-practice
• Navi+ Help Center — Publishing Mega Menu on Shopify. help.naviplus.io/docs/usage/mega-menu-desktop/publishing-on-shopify
• Navi+ Help Center — Mega Menu Desktop FAQ. help.naviplus.io/docs/usage/mega-menu-desktop/faq
• Shopify App Store — Navi+ Tab Bar & Mega Menu. apps.shopify.com/pronavi-navigation-design