How to Add a Menu Built in a Menu App to Your Shopify Store (Theme Embed, Placement & Troubleshooting)

Você criou a navegação em um aplicativo de menu, mas ela não aparece na sua loja virtual. Adicionar um menu de app à Shopify exige uma regra fundamental: o menu reside no app, não no seu tema. Ele só aparece após ativar o app embed do tema, publicar no aplicativo e configurar o posicionamento.

Quick answer: how to add a menu from a menu app to your Shopify store

Um menu de app reside no aplicativo, não no Shopify Content > Menus, aparecendo apenas quando vinculado ao seu tema. Ative o app embed, salve, publique no aplicativo, escolha a posição, oculte o menu do tema e verifique a loja online.

Siga estes cinco passos:

1. No painel da Shopify, acesse Online Store > Themes > Customize, abra Theme settings > App embeds, ative seu aplicativo e clique em Save.
2. No painel do seu aplicativo de menu, clique em publicar para disponibilizar seu menu.
3. Escolha o posicionamento: floating overlay, seletor CSS (insert/replace) ou bloco de aplicativo.
4. Oculte ou desvincule o menu de cabeçalho padrão do tema para evitar duplicações.
5. Visualize os layouts no desktop e no celular, depois verifique a loja real em uma janela anônima.

Se você ainda não estruturou sua navegação, comece pelo nosso passo a passo para iniciantes em aplicativos de menu.

Why a menu built in an app doesn’t appear on its own

Na Shopify, você gerencia os links nativos em Content > Menus, e os temas os exibem automaticamente pelas configurações da seção Header.

Os aplicativos de menu mantêm seus menus dentro do próprio aplicativo. De acordo com a documentação para desenvolvedores da Shopify, os blocos app embed ficam desativados por padrão após a instalação, e os temas não incluem blocos de app automaticamente. Instalar um aplicativo não adiciona seu menu à loja por si só. Seus menus em Content > Menus continuam onde estão.

O editor nativo da Shopify permite que um item de nível superior tenha até dois níveis de menus suspensos aninhados. Para layouts além dos recursos padrão, os lojistas criam o menu diretamente em um aplicativo de navegação.

Este vídeo oficial da Shopify demonstra o editor de menu integrado, que funciona de forma independente do seu aplicativo de menu.

Step 1: Turn on the app embed in the theme editor

O primeiro passo é ativar o app embed do seu tema. Segundo a Shopify, os app embeds são elementos fornecidos por aplicativos que flutuam ou são exibidos como sobreposição no tema.

Para ativar o app embed:

1. No painel da Shopify, acesse Online Store > Themes.
2. Clique em Customize no tema que deseja editar.
3. Na barra lateral, abra Theme settings > App embeds.
4. Localize o aplicativo de menu na lista.
5. Ao lado do app embed, clique no botão para ativá-lo.
6. Clique em Save.

Antes de editar, duplique seu tema. O Centro de Ajuda da Shopify ressalta que duplicar seu tema permite descartar alterações se necessário, e a Helium também recomenda duplicar o tema ativo antes.

Os app embeds funcionam em temas vintage e no Online Store 2.0. Ativar um embed afeta apenas o tema editado; temas de rascunho não atualizam a loja real até serem publicados.

Step 2: Publish the menu inside the app

Salvar o app embed do tema apenas carrega o script; você ainda precisa publicar o menu no painel do aplicativo.

Os aplicativos de menu separam a ativação do embed da publicação. Por exemplo, a documentação da Navi+ destaca que, após ativar o embed Store Connector, “o processo ainda não terminou”. Você deve abrir o app e clicar em Publish to website (ou no botão de publicação do seu app).

Antes de publicar, confira as regras de direcionamento que seu aplicativo oferece (por exemplo, no Navi+):

• Device targeting: Exibir no celular, no desktop ou em ambas as telas.
• Page group rules: Mostrar o menu em todas as páginas ou apenas em grupos de páginas específicos.
• URL keyword filtering: Incluir ou excluir termos específicos na barra de endereços.

Se uma regra excluir uma página, seu menu não aparecerá nela mesmo com o embed ativo.

Step 3: Choose where the menu appears (embed, CSS selector or app block)

Concept illustration: inserting an app menu below the header versus replacing the theme menu with a CSS selector.

Com o embed ativo e o menu publicado, escolha como integrá-lo ao layout do tema.

Floating menus (tab bar, floating button, drawer)

Os app embeds flutuam ou são exibidos como sobreposição no tema. Para barras de guias móveis, botões flutuantes ou menus gaveta laterais, basta ativar o embed e publicar no aplicativo. Como flutuam sobre as páginas, dispensam âncoras no cabeçalho.

Insert before, insert after or replace

Para cabeçalhos de desktop ou mega menus, o aplicativo se acopla por meio de um seletor CSS que identifica um elemento do tema.

Alguns aplicativos, como o Navi+, oferecem três modos:

• Insert Before: Posiciona o menu logo acima do elemento selecionado.
• Insert After: Exibe o menu logo abaixo do elemento selecionado.
• Replace: Substitui o elemento selecionado inteiramente pelo menu do aplicativo.

O Navi+ permite incluir um sufixo para direcionar o seletor exclusivamente a celulares, desktops ou ambos.

App block inside a theme section

O terceiro método insere um bloco de aplicativo em uma seção do tema. Blocos de app exigem temas compatíveis, e a Shopify descreve o suporte para seções integrantes de modelos JSON. Na Navi+, o bloco “Menu in Section” aplica-se apenas a Mega Menus e Grid Menus, não a barras de guias ou botões flutuantes.

Step 4: Hide the theme’s default menu so you don’t see two

Adicionar um menu de aplicativo pode gerar navegação duplicada se os links nativos do cabeçalho permanecerem visíveis. Como instalar um app não oculta o código do tema, você deve ocultar ou substituir o menu nativo.

Elimine menus duplicados de duas formas:

1. Use Replace mode: Onde houver suporte, o Replace troca automaticamente o elemento do tema selecionado.
2. Change theme settings: No editor de temas, abra Header. A Shopify indica que você pode alterar o menu principal padrão na maioria dos temas pelas configurações da seção Header, desvinculando o menu ali.

Nunca exclua listas de links em Content > Menus; mantê-las preserva os links do rodapé e serve como plano de retorno.

Ao utilizar o modo Replace, pode ocorrer uma rápida oscilação do menu original durante a inicialização do script. No celular, oculte o botão hambúrguer do tema se o aplicativo disponibilizar sua própria gaveta.

Step 5: Preview on desktop and mobile, then check the live store

A pré-visualização no personalizador de temas da Shopify não é suficiente. A documentação da Helium alerta que os menus nem sempre carregam fielmente no personalizador, exigindo validação direta na loja virtual.

Para verificar sua navegação:

1. Abra a URL da loja em uma janela anônima para observar as páginas exatamente como um cliente.
2. Faça testes no desktop conferindo menus suspensos, painéis de mega menu e efeitos ao passar o cursor.
3. Faça testes no smartphone checando áreas de toque, gavetas móveis e o recuo da barra inferior.
4. Clique nos links de navegação para conferir se categorias e produtos abrem adequadamente.

Se você configurou menus separados para desktop e celular, garanta que cada tela acione apenas o menu correspondente. Se realizou testes em um tema duplicado, publique-o após a validação.

App menu not showing? A diagnostic checklist

Concept illustration: a menu that is not showing (app embed off, wrong theme, two menus) versus one correct app menu live on the store.

Quando um menu de aplicativo não carregar, consulte este checklist de diagnóstico:

Se o menu continuar sem abrir, entre em contato com o suporte do seu aplicativo de menu para investigar particularidades da aplicação.

When you change or update your theme

Ao trocar de tema ou atualizar para uma nova versão, os menus do aplicativo não são transferidos automaticamente. Como informa o guia do Centro de Ajuda da Shopify sobre aplicativos de tema, os apps não vêm ativos por padrão em novos temas, devendo ser reativados.

Siga este fluxo ao alterar ou atualizar temas:

1. Re-enable app embed: No editor do novo tema, abra App embeds, ative seu aplicativo e clique em Save.
2. Re-add app blocks: Reinsira os blocos de seção, pois temas novos não incorporam blocos de app automaticamente.
3. Audit CSS selectors: As classes de cabeçalho mudam entre temas; atualize seu seletor ou consulte os menus Navi+ em temas populares da Shopify.
4. Hide default menu: Nas opções do Header, remova a associação do menu padrão para evitar navegação duplicada.
5. Test on duplicate theme: Faça os ajustes em um tema duplicado antes de publicar na loja real.

Trade-offs: when the theme’s own menu is enough

Aplicativos de menu externos oferecem flexibilidade visual, mas não são indispensáveis para todas as lojas. Para catálogos objetivos, o editor nativo da Shopify em Content > Menus costuma ser a opção mais prática. Menus padrão suportam até dois níveis de menus suspensos aninhados, o que pode bastar para um catálogo enxuto. Eles não dependem de app embeds, poupando reativações em atualizações de temas.

Adotar um app de menu externo traz pontos de atenção:

• Maintenance: Atualizações de tema exigem reativar embeds e checar seletores CSS.
• Initial page load: A substituição via seletor CSS pode ocasionar uma breve oscilação do menu original no carregamento do script.
• Platform limits: Ambientes como o Shopify Canvas ainda não oferecem suporte a extensões de app de temas.

Confira nosso artigo sobre como escolher o tipo certo de menu para decidir se sua loja precisa de um app ou se a navegação padrão é ideal.

Example: putting a Navi+ menu live

Para visualizar essas etapas na prática, acompanhe a publicação de menus na Navi+. A Navi+ suporta Tab Bars móveis, menus gaveta móveis, Floating Buttons e Desktop Mega Menus utilizando extensões de app de tema padrão da Shopify.

Para Tab Bar, Mobile Menu ou Floating Button no celular:

1. No painel da Shopify, abra Online Store > Themes > Customize.
2. Na barra lateral, abra App embeds, ative o Store Connector e clique em Save.
3. Na Navi+, abra seu menu e clique em Publish to website.
4. Configure as regras de exibição por dispositivo, grupo de páginas ou palavras-chave de URL.

Para um Desktop Mega Menu:

1. Na Navi+, selecione Insert Before, Insert After ou Replace.
2. Informe o seletor CSS do cabeçalho, incluindo sufixo mobile ou desktop se preciso.
3. Em temas Online Store 2.0 com modelos JSON, você também pode usar o bloco de app Menu in Section (para Mega Menus e Grid Menus).

Se a sua loja já recebe tráfego, faça os testes preliminares em um tema duplicado para checar o visual com segurança.

O guia de publicação da Navi+ para cada modalidade de menu traz esses passos acompanhados de capturas de tela. Conheça a documentação de publicação da Tab Bar na Navi+ ou o guia de publicação de Mega Menu da Navi+ para colocar seu layout no ar com confiança.

Action checklist

Acompanhe esta lista de verificação para garantir uma estreia impecável do menu do seu app:

• Duplicate your active theme for safe testing.
• In Theme settings > App embeds, toggle your app on and click Save.
• Return to your menu app dashboard and click publish.
• Verify device targeting and page group rules.
• Select placement: floating overlay, CSS selector (insert/replace), or app block.
• Hide or unassign the default menu in Header settings.
• Preview navigation across desktop and mobile screens.
• Test your live storefront in an incognito window.
• Click category and product links to verify destinations.
• Document CSS selectors to re-apply after theme updates.

FAQ

Do I need to enable an app embed?

Sim, na maioria das vezes. A Shopify determina que os blocos app embed ficam desativados por padrão ao instalar um app, sendo necessário ativá-los no editor do tema em Theme Settings > App embeds e clicar em Save.

Why is my app menu not showing after I created it?

O motivo mais recorrente é o app embed não ter sido ativado e salvo no tema ativo atual, ou o menu ainda não ter sido publicado no painel do app; consulte nossa tabela de diagnóstico para checar regras e seletores.

Does a menu app delete my Shopify navigation menu?

Não. Seus links de navegação nativos permanecem inalterados em Content > Menus no painel da Shopify, e a seção Header do seu tema apenas define qual lista de menus apresentar.

Will my app menu still work if I change themes?

Você terá que reativar o app embed no novo tema, já que os apps não vêm ativos por padrão em temas recém-publicados, e poderá precisar atualizar seletores CSS caso o novo tema tenha outra estrutura de cabeçalho.

Can I use a menu app on a vintage theme?

Sim, os app embeds são aceitos tanto em temas vintage quanto no Online Store 2.0, embora blocos de app só possam ser empregados em temas compatíveis dotados de modelos JSON.

Why can’t I find the app embed in my theme?

Se o seu tema foi criado ou duplicado no Shopify Canvas, as extensões de aplicativo de tema — incluindo app embeds e blocos de app — ainda não possuem suporte.

Sources

• Shopify Help Center: Apps and theme architecture
• Shopify Developer Documentation: Theme app extension configuration
• Shopify Help Center: Menus and links
• Shopify Help Center: Drop-down menus
• Shopify Help Center: Duplicating themes
• Shopify Developer Documentation: App blocks
• Shopify Developer Community: Meet Canvas and theme app extensions
• Shopify Community: Qikify Mega Menu for Prestige theme thread
• Helium Dev Help Center: Installing Meteor on your storefront
• Navi+ Help Center: Tab Bar publishing on Shopify
• Navi+ Help Center: Mega Menu desktop publishing on Shopify
• Navi+ Help Center: Why does Navi+ not display FAQ