Add a mega menu to Shopify's Zest theme — Navi+ setup
Na loja de demonstração ao vivo: o Slide Menu se integra ao hamburger existente (.icon) e oculta o drawer nativo (#Drawer-MobileNav) — sem alterações visíveis para compradores; Mega Menu se insere logo abaixo do header — este tema não tem problemas de overflow horizontal (headerInsertSafe = true). 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+ | |||
| Gatilho de hamburger | .icon |
Mobile | Navi+ se conecta aqui para ativar o Slide Menu |
| Cabeçalho | .header |
Mobile + Desktop | Inserir Mega Menu abaixo do header de Zest |
| Menu principal | ul.f-site-nav__list |
Desktop | Navi+ Mega Menu substitui o conteúdo da nav de desktop |
| Logotipo | .f-site-nav__item--current > a:nth-child(1) |
Mobile + Desktop | Fallback — inserir ícone de acionador antes do logo quando não houver hamburger |
| Acionadores de painel | |||
| Gatilho de hamburger | .icon |
Mobile | Toque para abrir o drawer móvel nativo |
| Ícone de pesquisa | .site-header__search-toggle |
Mobile + Desktop | Toque para abrir o painel / overlay de busca |
| Ícone de carrinho | a[aria-label*='cart' i] |
Mobile + Desktop | Toque para abrir o drawer / painel do carrinho |
Adicione uma barra de abas Navi+ ao tema Shopify Zest
Uma Tab Bar fixa uma faixa de navegação no rodapé da tela no celular — exatamente onde o polegar descansa. Clientes de Zest 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 Zest — 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 Zest. Navi+ mantém a gaveta, pesquisa e carrinho do tema — a aba simplesmente os abre.
.icon.site-header__search-togglea[aria-label*='cart' i]- 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 Zest, 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 Zest por um menu Slide Navi+
Um Slide Menu substitui a gaveta móvel padrão de Zest 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 .icon foi confirmado como único na demonstração ao vivo de Zest, 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
.icon— o seletor de hamburger de Zest. - 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 Zest
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 Zest 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 Zest (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 Zest
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 Zest
- 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 Zest é 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 Zest
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 Zest 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 Zest
Insira um Mega Menu abaixo do cabeçalho — uma barra dropdown multi-coluna que aparece exatamente sob o cabeçalho de Zest 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
Zest é headerInsertSafe = true — um Mega Menu insere abaixo do cabeçalho sem transbordamento horizontal, e o menu nativo permanece no lugar.
- 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
.header(D)e escolha Inserir Após — a barra mega aparece diretamente abaixo do cabeçalho de Zest. - O sufixo de dispositivo
(D)mantém apenas desktop.
Substitua o menu desktop de Zest 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 Zest 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.f-site-nav__list foi confirmado — Navi+ renderiza o Mega Menu exatamente onde o menu nativo fica no cabeçalho de Zest.
- 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.f-site-nav__list(D)e escolha Substituir — Navi+ renderiza no lugar do menu nativo de Zest. - Depois de escolher Substituir, otimize para carregamento sem flash — veja o guia de publicação.
Insira um ícone de gatilho antes do logotipo de Zest
Adicione um ícone de gatilho antes do logotipo — um hamburger personalizado bem ao lado do logotipo de Zest 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 .f-site-nav__item--current > a:nth-child(1) foi confirmado em Zest, 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
.f-site-nav__item--current > a:nth-child(1)(M)e escolha Insert Before — o ícone aparece antes do logo de Zest. - Um pequeno CSS personalizado o alinha; procure o suporte se precisar de uma mão.
11 Como adicionar um menu Navi+ a Zest
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 Zest 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 Zest e captura o resultado.
Perguntas frequentes — Navi+ no tema Shopify Zest
Como adiciono um menu Navi+ ao tema Shopify Zest?
Como adiciono uma barra de abas ao tema Shopify Zest?
a[aria-label*='cart' i]).Como adiciono um mega menu ao tema Shopify Zest?
.header(D) com Insert After — nenhuma edição de código de tema necessária.Como substituço o menu móvel de Zest por um menu deslizável?
.icon. 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 Zest para adicionar um menu?
O Navi+ funciona com o tema Shopify Zest?
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 | #Drawer-MobileNav |
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 |