Add a mega menu to Shopify's Galleria theme — Navi+ setup
Na loja de demonstração ao vivo: Mega Menu monta em modo replace direcionado para .\#main-nav-menu. A tabela de seletores e guias de configuração abaixo são específicos deste tema.
1 Análise de tema
generic corresponde ao esperado2 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+ | |||
| Cabeçalho | .\#main-header-inner |
Mobile + Desktop | Inserir Mega Menu abaixo do header de Galleria |
| Menu principal | .\#main-nav-menu |
Desktop | Navi+ Mega Menu substitui o conteúdo da nav de desktop |
| Logotipo | .\#main-header-logo |
Mobile + Desktop | Fallback — inserir ícone de acionador antes do logo quando não houver hamburger |
| Acionadores de painel | |||
| Ícone de pesquisa | a.\#main-header-toolbar-link |
Mobile + Desktop | Toque para abrir o painel / overlay de busca |
| Ícone de carrinho | a.\#main-header-toolbar-link |
Mobile + Desktop | Toque para abrir o drawer / painel do carrinho |
Adicione uma barra de abas Navi+ ao tema Shopify Galleria
Uma Tab Bar fixa uma faixa de navegação no rodapé da tela no celular — exatamente onde o polegar descansa. Clientes de Galleria 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 Galleria — 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 Galleria. Navi+ mantém a gaveta, pesquisa e carrinho do tema — a aba simplesmente os abre.
a.\#main-header-toolbar-linka.\#main-header-toolbar-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 Galleria, 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 Galleria por um menu Slide Navi+
Um Slide Menu substitui a gaveta móvel padrão de Galleria 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
Nenhum gatilho de hamburger padrão foi detectado na demonstração de Galleria — o tema pode usar um seletor não padrão. Pegue o certo com o Modo Debug do Navi+ em sua própria loja.
- No Navi+, crie um novo menu e escolha Slide Menu.
- Adicione suas categorias com ícones, imagens e múltiplos níveis.
- Abra Publish, ative o menu e depois insira o seletor CSS do hamburger do seu tema como gatilho.
- Salve — o Slide Menu abre a partir desse botão.
Adicione um menu Grid Navi+ ao tema Galleria
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 Galleria 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 Galleria (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 Galleria
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 Galleria
- 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 Galleria é 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 Galleria
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 Galleria 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 Galleria
Insira um Mega Menu abaixo do cabeçalho — uma barra dropdown multi-coluna que aparece exatamente sob o cabeçalho de Galleria 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
Galleria 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
.\#main-header-inner(D)e escolha Inserir Após — a barra mega aparece diretamente abaixo do cabeçalho de Galleria. - O sufixo de dispositivo
(D)mantém apenas desktop.
Substitua o menu desktop de Galleria 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 Galleria 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 .\#main-nav-menu foi confirmado — Navi+ renderiza o Mega Menu exatamente onde o menu nativo fica no cabeçalho de Galleria.
- 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
.\#main-nav-menu(D)e escolha Substituir — Navi+ renderiza no lugar do menu nativo de Galleria. - Depois de escolher Substituir, otimize para carregamento sem flash — veja o guia de publicação.
Insira um ícone de gatilho antes do logotipo de Galleria
Adicione um ícone de gatilho antes do logotipo — um hamburger personalizado bem ao lado do logotipo de Galleria 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 .\#main-header-logo foi confirmado em Galleria, 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
.\#main-header-logo(M)e escolha Insert Before — o ícone aparece antes do logo de Galleria. - Um pequeno CSS personalizado o alinha; procure o suporte se precisar de uma mão.
11 Como adicionar um menu Navi+ a Galleria
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 Galleria 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 Galleria e captura o resultado.
Perguntas frequentes — Navi+ no tema Shopify Galleria
Como adiciono um menu Navi+ ao tema Shopify Galleria?
Como adiciono uma barra de abas ao tema Shopify Galleria?
a.\#main-header-toolbar-link).Como adiciono um mega menu ao tema Shopify Galleria?
.\#main-nav-menu(D) com Replace — nenhuma edição de código de tema necessária.Preciso editar o código do tema de Galleria para adicionar um menu?
O Navi+ funciona com o tema Shopify Galleria?
Outros temas da família generic
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 | [class*='mobile-nav'] |
Mobile | Drawer nativo — oculto quando Navi+ Slide Menu está ativo |
| Modal de pesquisa | — | Mobile + Desktop | Contêiner do painel de busca — detectar estado aberto/fechado |
| Gaveta de carrinho | — | 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 |