Add a mega menu to Shopify's Flow theme — Navi+ setup
Na loja de demonstração ao vivo: o Slide Menu se integra ao hamburger existente (.hamburger-nav-button) e oculta o drawer nativo (#NavDrawer) — sem alterações visíveis para compradores; Mega Menu monta em modo replace direcionado para ul.site-nav. A tabela de seletores e guias de configuração abaixo são específicos deste tema.
1 Análise de tema
archetype incompatível2 Anatomia de navegação — mapa de seletores
Seletores confirmados como únicos (matchCount = 1) na loja de demonstração ao vivo. Função presente apenas se encontrada.
| Função | Seletor CSS | Plataforma | Usado para |
|---|---|---|---|
| Destinos de montagem do Navi+ | |||
| Gatilho de hamburger | .hamburger-nav-button |
Mobile | Navi+ se conecta aqui para ativar o Slide Menu |
| Cabeçalho | .mobile-nav__logo-title |
Mobile + Desktop | Inserir Mega Menu abaixo do header de Flow |
| Menu principal | ul.site-nav |
Desktop | Navi+ Mega Menu substitui o conteúdo da nav de desktop |
| Logotipo | .site-header__logo-overlay-image |
Mobile + Desktop | Fallback — inserir ícone de acionador antes do logo quando não houver hamburger |
| Acionadores de painel | |||
| Gatilho de hamburger | .hamburger-nav-button |
Mobile | Toque para abrir o drawer móvel nativo |
| Ícone de pesquisa | button[aria-label*='search' i] |
Mobile + Desktop | Toque para abrir o painel / overlay de busca |
| Ícone de carrinho | a.js-drawer-open-right-link |
Mobile + Desktop | Toque para abrir o drawer / painel do carrinho |
Adicione uma barra de abas Navi+ ao tema Shopify Flow
Uma Tab Bar fixa uma faixa de navegação no rodapé da tela no celular — exatamente onde o polegar descansa. Clientes de Flow acessam seu menu, pesquisa e carrinho de qualquer página sem rolar de volta ao cabeçalho.
- Navegação no estilo de app — uma sensação nativa para a web mobile
- Acesso ao carrinho com um único toque para aumentar a taxa de checkout mobile
- Fica abaixo do cabeçalho Flow — nunca compete com a navegação própria do tema
Cada campo Link da aba aceita uma URL normal, open:NaviMenu(EMBED_ID) para abrir outro menu Navi+, ou uma ação de abertura integrada que aciona os próprios painéis de Flow. Navi+ mantém a gaveta, pesquisa e carrinho do tema — a aba simplesmente os abre.
.hamburger-nav-buttonbutton[aria-label*='search' i]a.js-drawer-open-right-link- No Navi+, crie um novo menu e escolha Tab Bar.
- Adicione suas abas — nome, ícone, badge de contagem de carrinho e vincule cada uma (por exemplo, Início, Loja, Pesquisa, Carrinho, Menu).
- Para abrir o gaveta nativa, busca ou carrinho de Flow, defina o link da aba para a ação de abertura correspondente. Para abrir um menu Slide ou Mega do Navi+ em vez disso, use
open:NaviMenu(EMBED_ID). - Abra Publish, ative o modo fixo e defina o filtro de dispositivo para Mobile.
Substitua a gaveta móvel de Flow por um menu Slide Navi+
Um Slide Menu substitui a gaveta móvel padrão de Flow por um painel multi-nível mais rico — ícones, imagens e agrupamento personalizado — aberto pelo mesmo hamburger que seus clientes já usam.
- Navegação multi-nível ilimitada com ícones e imagens
- Mesmo botão, mesma posição — os clientes nunca notam a troca
- Ideal para catálogos com muitas coleções para organizar no celular
O gatilho de hamburger .hamburger-nav-button foi confirmado como único na demonstração ao vivo de Flow, então Navi+ abre o Slide Menu exatamente do botão que os clientes já tocam.
- No Navi+, crie um novo menu e escolha Slide Menu.
- Adicione suas categorias com ícones, cores, imagens e quantos níveis precisar.
- Abra Publish, ative o menu e defina o gatilho para
.hamburger-nav-button— o seletor de hamburger de Flow. - Salve. O Slide Menu agora abre a partir desse botão. Anexe
(M)para manter apenas no celular.
Adicione um menu Grid Navi+ ao tema Flow
Um Grid Menu mostra suas coleções como uma grade de imagens — um lançador no estilo de app que permite aos clientes pular diretamente para qualquer coleção em um único toque.
- Visual, focado em imagens — os clientes veem a coleção antes de ler seu nome
- Nenhum seletor de Flow necessário para montar
- Ótimo para lojas com muitas coleções para navegar rapidamente
Um Grid Menu pode ser inserido em um local fixo em qualquer página Flow (aponte para um seletor CSS), ou aberto sob demanda a partir de um FAB ou uma aba de Tab Bar — você escolhe.
- No Navi+, crie um novo menu e escolha Grid Menu.
- Adicione coleções: imagem em miniatura, nome de exibição e link, ordenados como você quer que apareçam na grade.
- Em Publish, ative o método Insert/Replace, insira o seletor CSS de destino e escolha Insert After ou Replace.
- Prefere um pop-up? Pule o seletor e abra a partir de um FAB ou aba com
open:NaviMenu(EMBED_ID).
Adicione um botão flutuante Navi+ (FAB) ao tema Flow
Um FAB (Floating Action Button) é um botão flutuante que permanece visível durante a rolagem — um atalho rápido para qualquer página ou ação. Sem seletor de tema, implementado em minutos.
- Nunca entra em conflito com nenhuma parte de Flow
- Flexível: link para o carrinho, página de contato, promoção, qualquer URL
- Funciona tanto no desktop quanto no celular
Um FAB monta completamente sozinho — nenhum seletor CSS do tema Flow é necessário. Configure-o e publique sem testar nenhum seletor.
- No Navi+, crie um novo menu e escolha FAB.
- Escolha o ícone, cor de fundo e tamanho — use um ícone integrado ou envie o seu próprio.
- Escolha uma posição: canto inferior direito (mais comum), canto inferior esquerdo ou qualquer canto fixo.
- Defina a ação: link para uma coleção, carrinho, página de contato ou promoção, ou abra outro menu (Grid, Slide…) com
open:NaviMenu(EMBED_ID). - Abra Publish e ative o modo fixo. O FAB funciona em todos os dispositivos.
Adicione um menu Mega mobile Navi+ ao tema Flow
No celular, um Mega Menu é exibido como um painel multi-nível — permitindo que os clientes naveguem por seu catálogo inteiro em um telefone com hierarquia clara, imagens e banners.
- Menu multi-nível com ícones e imagens em telas pequenas
- Abra-o sob o cabeçalho ou a partir de uma aba de Tab Bar
- Ótimo quando uma loja tem muitas categorias para exibir no celular
Um Mega Menu mobile é um menu de Seção. Insira-o diretamente sob o cabeçalho de Flow ou abra-o a partir de uma aba de Tab Bar — ambos funcionam sem se vincular ao próprio menu do tema.
- No Navi+, crie um novo menu, escolha Mega Menu e projete as colunas multi-nível (categorias, imagens em destaque, banners).
- Em Publish, ative o método Insert/Replace, insira
header(M)e escolha Insert After — aparece sob o header mobile. - Prefere abri-lo a partir de uma aba? Deixe-o não publicado aqui e aponte uma aba "Menu" de Tab Bar para ele com
open:NaviMenu(EMBED_ID). - Mantenha o filtro de dispositivo em Celular.
Insira um menu Mega Navi+ abaixo do cabeçalho de Flow
Insira um Mega Menu abaixo do cabeçalho — uma barra dropdown multi-coluna que aparece exatamente sob o cabeçalho de Flow ao passar o mouse, sem mudanças no Liquid do tema.
- Dropdown multi-coluna com imagens e links em destaque
- Deixa o menu próprio do tema intacto — ambos os menus coexistem
- A forma mais limpa de montar quando o tema suporta inserção
Flow não é headerInsertSafe — inserir abaixo do cabeçalho pode causar transbordamento horizontal. Use modo de substituição em vez disso (veja abaixo).
- No Navi+, crie um novo menu, escolha Mega Menu e projete as colunas dropdown (categorias, imagens em destaque, produtos, banners).
- Em Publish, ative o método Insert/Replace.
- Digite o seletor
.mobile-nav__logo-title(D)e escolha Inserir Após — a barra mega aparece diretamente abaixo do cabeçalho de Flow. - O sufixo de dispositivo
(D)mantém apenas desktop.
Substitua o menu desktop de Flow por um menu Mega Navi+
O modo de substituição troca o menu nativo dentro do cabeçalho inteiramente — Navi+ renderiza diretamente nesse contêiner, mantendo o layout do cabeçalho de Flow intacto.
- Mantém o lugar do menu no cabeçalho — nenhuma barra extra adicionada
- Melhor quando você não quer duas linhas de navegação
- Funciona em qualquer tema, mesmo sem
headerInsertSafe
O seletor de menu principal ul.site-nav foi confirmado — Navi+ renderiza o Mega Menu exatamente onde o menu nativo fica no cabeçalho de Flow.
- No Navi+, crie um novo menu, escolha Mega Menu e projete as colunas dropdown.
- Em Publish, ative o método Insert/Replace.
- Digite o seletor de nav desktop
ul.site-nav(D)e escolha Substituir — Navi+ renderiza no lugar do menu nativo de Flow. - Depois de escolher Substituir, otimize para carregamento sem flash — veja o guia de publicação.
Insira um ícone de gatilho antes do logotipo de Flow
Adicione um ícone de gatilho antes do logotipo — um hamburger personalizado bem ao lado do logotipo de Flow para temas sem hamburger móvel padrão, ou como um segundo ponto de entrada para seu menu Slide / Mega.
- Cria um novo ponto de gatilho sem editar Liquid
- Colocação natural — bem ao lado do logotipo, familiar aos clientes
- Ótimo para temas focados em desktop sem hamburger móvel
O seletor de logotipo .site-header__logo-overlay-image foi confirmado em Flow, então Navi+ pode inserir um ícone de gatilho bem antes dele.
- Um padrão avançado — para temas sem hamburger móvel ou para adicionar um segundo ponto de entrada.
- Construa um pequeno menu de um único item (um Mega/Slide de um item) cujo item abre seu menu Slide principal com
open:NaviMenu(EMBED_ID). - Em Publish, ative o método Insert/Replace, insira
.site-header__logo-overlay-image(M)e escolha Insert Before — o ícone aparece antes do logo de Flow. - Um pequeno CSS personalizado o alinha; procure o suporte se precisar de uma mão.
11 Como adicionar um menu Navi+ a Flow
Cada tipo de menu nesta página segue os mesmos três passos. Ative o aplicativo uma vez — depois cada novo menu é apenas design e publish. Nenhuma edição de Liquid necessária.
- Ativar Navi+ uma vez. No painel do Shopify, vá para Online Store → Themes → Customize → App embeds e ative Navi+. Isso carrega o aplicativo na vitrine Flow e cobre todos os menus que você criar. Guia de instalação →
- Projete o menu no editor Navi+ — itens, ícones, imagens, colunas e cores.
- Publique-o. Abra o painel Publicar do menu. Menus flutuantes (Tab Bar, FAB) precisam apenas do toggle de publicação; menus de slide e seção apontam para um seletor CSS da tabela acima.
Adicione (M) ou (D) a qualquer seletor para atingir apenas celular ou apenas desktop — por exemplo, header(D). Não tem certeza de um seletor? Abra suasloja.com/#navidebug-on, passe o mouse sobre um elemento e pressione Ctrl/Cmd + C para copiá-lo.
Testes de interação ao vivo
O Playwright clica automaticamente pela loja de demonstração ao vivo de Flow e captura o resultado.
Perguntas frequentes — Navi+ no tema Shopify Flow
Como adiciono um menu Navi+ ao tema Shopify Flow?
Como adiciono uma barra de abas ao tema Shopify Flow?
a.js-drawer-open-right-link).Como adiciono um mega menu ao tema Shopify Flow?
ul.site-nav(D) com Replace — nenhuma edição de código de tema necessária.Como substituço o menu móvel de Flow por um menu deslizável?
.hamburger-nav-button. O menu deslizável então abre do mesmo botão que os clientes já tocam, substituindo a gaveta nativa.Preciso editar o código do tema de Flow para adicionar um menu?
O Navi+ funciona com o tema Shopify Flow?
Outros temas da família archetype
Adicionar menus Navi+ a outros temas Shopify
Referência de seletores
Contêineres de painel e seletores complementares — usados para detecção de estado ou ocultação de elementos nativos.
| Função | Seletor CSS | Plataforma | Usado para |
|---|---|---|---|
| Gaveta deslizante | #NavDrawer |
Mobile | Drawer nativo — oculto quando Navi+ Slide Menu está ativo |
| Modal de pesquisa | predictive-search |
Mobile + Desktop | Contêiner do painel de busca — detectar estado aberto/fechado |
| Gaveta de carrinho | cart-drawer |
Mobile + Desktop | Contêiner do drawer do carrinho — detectar estado aberto/fechado |
| Menu mega | — | Desktop | Sem mega menu nativo — Navi+ insere um em seu lugar |