Add a mega menu to Shopify's Ride theme — Navi+ setup
Na loja de demonstração ao vivo: o Slide Menu se integra ao hamburger existente (#Details-menu-drawer-container) e oculta o drawer nativo (.menu-drawer) — 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
dawn 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 | #Details-menu-drawer-container |
Mobile | Navi+ se conecta aqui para ativar o Slide Menu |
| Cabeçalho | .section-header |
Mobile + Desktop | Inserir Mega Menu abaixo do header de Ride |
| Menu principal | .header__inline-menu |
Desktop | Navi+ Mega Menu substitui o conteúdo da nav de desktop |
| Logotipo | .header__heading-logo |
Mobile + Desktop | Fallback — inserir ícone de acionador antes do logo quando não houver hamburger |
| Acionadores de painel | |||
| Gatilho de hamburger | #Details-menu-drawer-container |
Mobile | Toque para abrir o drawer móvel nativo |
| Ícone de pesquisa | .header__icon--search |
Mobile + Desktop | Toque para abrir o painel / overlay de busca |
| Ícone de carrinho | #cart-icon-bubble |
Mobile + Desktop | Toque para abrir o drawer / painel do carrinho |
Adicione uma barra de abas Navi+ ao tema Shopify Ride
Uma Tab Bar fixa uma faixa de navegação no rodapé da tela no celular — exatamente onde o polegar descansa. Clientes de Ride 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 Ride — 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 Ride. Navi+ mantém a gaveta, pesquisa e carrinho do tema — a aba simplesmente os abre.
#Details-menu-drawer-container.header__icon--search#cart-icon-bubble- 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 Ride, 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 Ride por um menu Slide Navi+
Um Slide Menu substitui a gaveta móvel padrão de Ride 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 #Details-menu-drawer-container foi confirmado como único na demonstração ao vivo de Ride, 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
#Details-menu-drawer-container— o seletor de hamburger de Ride. - 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 Ride
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 Ride 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 Ride (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 Ride
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 Ride
- 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 Ride é 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 Ride
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 Ride 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 Ride
Insira um Mega Menu abaixo do cabeçalho — uma barra dropdown multi-coluna que aparece exatamente sob o cabeçalho de Ride 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
Ride é 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
.section-header(D)e escolha Inserir Após — a barra mega aparece diretamente abaixo do cabeçalho de Ride. - O sufixo de dispositivo
(D)mantém apenas desktop.
Substitua o menu desktop de Ride 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 Ride 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 .header__inline-menu foi confirmado — Navi+ renderiza o Mega Menu exatamente onde o menu nativo fica no cabeçalho de Ride.
- 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
.header__inline-menu(D)e escolha Substituir — Navi+ renderiza no lugar do menu nativo de Ride. - Depois de escolher Substituir, otimize para carregamento sem flash — veja o guia de publicação.
Insira um ícone de gatilho antes do logotipo de Ride
Adicione um ícone de gatilho antes do logotipo — um hamburger personalizado bem ao lado do logotipo de Ride 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 .header__heading-logo foi confirmado em Ride, 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
.header__heading-logo(M)e escolha Insert Before — o ícone aparece antes do logo de Ride. - Um pequeno CSS personalizado o alinha; procure o suporte se precisar de uma mão.
11 Como adicionar um menu Navi+ a Ride
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 Ride 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 Ride e captura o resultado.
Perguntas frequentes — Navi+ no tema Shopify Ride
Como adiciono um menu Navi+ ao tema Shopify Ride?
Como adiciono uma barra de abas ao tema Shopify Ride?
#cart-icon-bubble).Como adiciono um mega menu ao tema Shopify Ride?
.section-header(D) com Insert After — nenhuma edição de código de tema necessária.Como substituço o menu móvel de Ride por um menu deslizável?
#Details-menu-drawer-container. 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 Ride para adicionar um menu?
O Navi+ funciona com o tema Shopify Ride?
Outros temas da família dawn
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 | .menu-drawer |
Mobile | Drawer nativo — oculto quando Navi+ Slide Menu está ativo |
| Modal de pesquisa | .search-modal |
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 |