Como adicionar um submenu ao menu de navegação da Shopify (Suspenso, níveis e mobile)

Adicionar um submenu na Shopify requer apenas um arrastar e soltar em Content > Menus — mas ele só funcionará perfeitamente para os clientes se o item pai, o menu Header do tema e o painel móvel estiverem configurados com precisão.

Ao inaugurar uma loja virtual, uma barra horizontal simples com quatro ou cinco links atende bem. Mas à medida que o catálogo de produtos cresce, listar todas as coleções na mesma linha sobrecarrega o cabeçalho. No design para e-commerce, submenu, menu suspenso (dropdown) e itens de menu aninhados descrevem o mesmo conceito: links secundários organizados sob um cabeçalho principal. Você pode estruturá-los diretamente no painel da Shopify sem alterar o código.

Resposta rápida: Como adicionar um submenu na Shopify

Para adicionar um submenu na Shopify, vá para Content > Menus, abra o menu principal, adicione o item desejado sob um item pai, arraste-o para baixo e ligeiramente à direita desse item pai e clique em Salvar menu. Um item de nível superior pode conter até dois níveis de menus suspensos aninhados.

Siga estas cinco etapas:

1. No painel de administração da Shopify, acesse Content > Menus.
2. Clique no título do menu que deseja editar (geralmente Main menu).
3. Clique em Adicionar item de menu, insira o Nome e o link de destino e clique em Adicionar.
4. Mantenha pressionado o ícone de alça (⠿) ao lado do item e arraste-o para baixo e ligeiramente à direita do item pai para aninhá-lo.
5. Clique em Salvar menu.

Um item de nível superior pode conter até dois níveis de menus suspensos subordinados.

O que é um submenu e quando sua loja precisa de um

Um submenu é uma lista de links secundários agrupados sob um cabeçalho principal. No computador, passar o mouse ou clicar sobre ele abre uma lista suspensa. No celular, os mesmos links se expandem no menu lateral.

Navegações aninhadas são uma solução popular para organizar coleções, produtos e páginas com eficiência. Em vez de amontoar opções, uma hierarquia nítida traça um caminho visual claro. Os compradores avaliam primeiro grandes categorias como «Roupas» antes de escolherem ramificações específicas como «Jaquetas».

Adicione um submenu quando a sua loja ultrapassar uma estrutura plana. A Shopify recomenda incluir sete ou menos itens de menu de nível superior para evitar sobrecarga visual. Agrupar as coleções em itens principais deixa um cabeçalho longo mais fácil de percorrer.

Você não precisa de um submenu se a loja comercializa poucos produtos ou possui duas a três coleções. Obrigar os visitantes a navegar por menus suspensos em um catálogo reduzido gera cliques dispensáveis.

Uma organização ordenada também ajuda os robôs de busca. Conheça como o Google rastreia o seu menu para ver como os links do menu ajudam os mecanismos de busca a encontrar suas páginas de coleção.

Como adicionar um submenu na Shopify passo a passo

A Shopify oferece um organizador de menus visual baseado em arrastar e soltar. Você pode montar a sua hierarquia pelo computador ou no aplicativo para smartphone.

No computador

1. Entre em Content > Menus no painel da Shopify. (Observação: tutoriais antigos chamam esta área de Loja virtual > Navegação; a Central de Ajuda atual da Shopify usa Content > Menus.)
2. Clique no menu que pretende alterar, normalmente Main menu.
3. Caso ainda não tenha o item pai, clique em Adicionar item de menu, insira um nome (como «Loja»), defina um link e clique em Adicionar.
4. Clique de novo em Adicionar item de menu para criar o item filho. Digite o nome, escolha a coleção ou página no campo de link e clique em Adicionar.
5. Localize o ícone de seis pontos (⠿) à esquerda. Clique e segure o ícone de alça (⠿) ao lado do item de menu e arraste o item para outra posição. Leve-o para baixo do item pai e mova o cursor ligeiramente para a direita até a linha recuar, soltando o mouse em seguida.
6. Repita para as demais subcategorias e ajuste a ordem arrastando as linhas.
7. Clique em Salvar menu. Salve as alterações com frequência para não atingir o limite de alterações da Shopify.

No aplicativo móvel da Shopify

Também é viável configurar os links pelo smartphone:

1. Abra o app da Shopify, toque no ícone Menu e abra Menus na seção Contents.
2. Toque no nome do seu menu principal e depois em Adicionar item de menu.
3. Digite o nome e o link e toque em Adicionar.
4. Pressione e segure o ícone de alça (⠿), arraste o item sob o elemento principal e deslize para a direita até recuar.
5. Toque em Salvar.

A Shopify aconselha testar os menus em dispositivos móveis para confirmar que os menus suspensos se expandem conforme o esperado e verificar se os botões são confortáveis ao toque.

Criar um item principal que apenas abra o menu suspenso

Muitos lojistas perguntam: «Como faço para um item de menu não ser clicável na Shopify?»

Muitas vezes, a meta é fazer com que um termo como «Comprar por categoria» funcione apenas como botão para abrir a lista. Se o item pai direcionar para uma coleção vazia, o clique afastará o cliente da página que estava explorando.

Para criar um item principal sem link de destino:

1. Em Content > Menus, clique em Editar ao lado do item pai (ou em Adicionar item de menu).
2. Insira o título no campo Nome. Use rótulos descritivos, como «Comprar por categoria», para itens de nível superior com links #, preparando os clientes para o conteúdo que surgirá.
3. Se não quiser que o cabeçalho leve a lugar nenhum, insira # no campo Pesquisar ou colar um link do item de menu principal.
4. Clique em Aplicar alterações e depois em Salvar menu.

A maioria dos temas implementa os cabeçalhos de menu suspenso como botões e não como links comuns. Com um link #, o item principal não tem página para carregar, então tocar nele pode abrir o menu suspenso.

Se ainda assim quiser permitir que os clientes acessem a página da coleção mãe, insira um link chamado «Ver tudo em [Categoria]» como primeiro subitem na lista aninhada.

Atenção especial: ao remover um item de menu que tem itens aninhados sob ele, os itens aninhados também serão removidos. Se precisar excluir um item pai, arraste primeiro todos os itens secundários de volta ao nível inicial.

Figura 1: Ilustração conceitual — Configuração de item principal com link cerquilha (#) como gatilho em comparação com um link direto para página.

Quantos níveis um submenu da Shopify pode ter?

Lojistas que organizam inventários extensos frequentemente questionam: «Quantos níveis de menu a Shopify suporta?»

No gerenciador de menus padrão da Shopify, o item de nível superior pode ter até dois níveis de menus suspensos aninhados abaixo dele. Somando o cabeçalho inicial, você obtém três níveis no total:

• Nível 1 (Principal): O link visível na barra horizontal do cabeçalho (ex.: «Masculino»).
• Nível 2 (Primeiro submenu): A lista suspensa que se abre do nível 1 (ex.: «Calçados»).
• Nível 3 (Segundo submenu / flyout): Uma ramificação conectada ao nível 2 (ex.: «Tênis»).

Embora a Shopify suporte três níveis no painel, a exibição na loja depende do seu tema ativo. Certifique-se de atualizar seu tema para que ele exiba todos os três níveis de menu na sua loja virtual.

A localização também influencia: quase todos os temas mostram itens aninhados como menus suspensos no menu principal, mas apenas alguns temas exibem itens aninhados em outros locais, como rodapés ou barras laterais.

Para testar o seu tema, aninhe um item de nível 3 de teste sob o nível 2, salve e verifique a pré-visualização no computador e no celular. Se o terceiro nível não abrir, o seu tema pode não oferecer suporte a ele.

Sempre que viável, mantenha a navegação em dois níveis. Menus com três níveis são mais difíceis de usar, principalmente com o mouse. Para catálogos maiores, veja o nosso guia sobre planejamento de menu multinível na Shopify para estruturar sua taxonomia com equilíbrio.

Como os submenus funcionam em dispositivos móveis

Celulares não têm mouse, então o seu submenu precisa funcionar ao toque.

O que os clientes visualizam no menu lateral

Em telas menores, a barra horizontal se recolhe sob o ícone de três linhas (hambúrguer). Ao tocá-lo, o painel lateral desliza:

• Os itens com submenu costumam trazer um marcador de expansão, como um sinal de mais (+) ou uma seta.
• O toque geralmente expande os subitens em uma lista ou abre um painel secundário; o comportamento exato depende do seu tema.
• Quando um item principal usa um link #, a maioria dos temas abre a lista em vez de carregar uma página.

A Shopify recomenda testar os menus em aparelhos celulares reais para confirmar se os menus suspensos abrem como planejado e se os botões são cômodos para o polegar.

Adicionar o link Ver tudo

No computador, o consumidor pode passar o mouse para espiar as opções e clicar no título para ir à coleção inteira. Em telas sensíveis ao toque, o foco por proximidade não existe: um toque abre o submenu ou acessa uma URL, mas não ambos.

Oferecer a opção «Ver tudo» na navegação principal móvel é uma forma de baixo custo para os sites atenderem a essa necessidade do usuário mobile, segundo o Baymard Institute.

Contudo, levantamentos do Baymard apontam que apenas 24% dos sites realizam isso adequadamente.

Como aplicar na sua loja:

1. Sob cada categoria pai, adicione um item filho intitulado «Ver tudo em [Categoria]» vinculado à coleção completa.
2. Posicione este link no topo da lista aninhada.
3. Mantenha os agrupamentos enxutos para evitar rolagem contínua.

Para saber mais sobre ergonomia e menus móveis, consulte nosso manual de boas práticas para menus de gaveta móveis.

Submenu não aparece? Solução para problemas comuns

Se o submenu não surgir após salvar, a falha costuma decorrer de um destes quatro desacertos de configuração:

O tema utiliza outro menu

O deslize mais recorrente é atualizar o Main menu enquanto a cabine do tema está associada a outra lista. Certifique-se de que o menu selecionado para ser o menu principal superior é o mesmo que você acabou de criar ou editar. É possível alterar o menu padrão na maioria dos temas ajustando as preferências na seção Header do tema. Vá até Loja virtual > Temas > Personalizar > Header, confira a opção Menu, aponte para o menu correto e salve.

O item não está recuado

Se os itens filhos estiverem alinhados junto à margem esquerda, a Shopify os processa como itens independentes de nível 1. Em Content > Menus, arraste o item para baixo do pai e desloque ligeiramente o cursor para a direita até o recuo se confirmar. Salve em seguida.

O tema esconde o terceiro nível

Se as opções de nível 3 não se manifestam, o tema pode carecer de suporte a submenus terciários. Certifique-se de atualizar seu tema para que ele exiba todos os três níveis de menu na sua loja virtual. Lembre-se também de que certos temas só mostram menus aninhados no cabeçalho e não em barras laterais.

Conflito com códigos personalizados ou aplicativos

Caso o menu trave ou apresente falhas visuais, scripts de terceiros ou personalizações em theme.liquid podem estar interferindo nos gatilhos. Duplique o tema e verifique se a falha ocorre no tema limpo.

Acessibilidade por teclado e leitores de tela

A navegação deve estar aberta também a compradores que usam teclados ou leitores de tela.

As diretrizes da W3C Web Accessibility Initiative (WAI) destacam que os itens de menu com submenu devem ser indicados visualmente e por meio de marcação. Uma seta para baixo sinaliza visualmente a existência de mais opções, enquanto propriedades ARIA informam aos leitores de tela o estado da lista.

Ademais, as normas do W3C estipulam que os submenus não devem abrir ao usar a tecla Tab para navegar pelo menu. O motivo: caso contrário, quem usa o teclado teria de passar por todos os itens do submenu para chegar ao próximo item de nível superior.

Veja nosso guia sobre menus de navegação acessíveis para adotar as diretrizes completas.

Figura 2: Ilustração conceitual — Verificação do menu conectado no cabeçalho do tema e conferência do recuo das linhas secundárias.

Compensações: Quando não adicionar outro submenu

Os submenus proporcionam ordem, mas empilhar muitos níveis nem sempre beneficia a experiência de compra. Cada camada impõe atrito adicional.

Quando as listas se tornam longas demais, a usabilidade cai. Como alerta o Nielsen Norman Group: «Menus suspensos muito longos que exigem rolagem impossibilitam que os usuários vejam todas as suas escolhas de uma só vez». Se o cliente for forçado a rolar dentro de um menu, as alternativas do final costumam ser ignoradas.

Antes de abrir outro submenu, avalie estas saídas:

1. Unir coleções diminutas: Se possuir coleções com apenas dois ou três produtos, junte-as em uma página de coleção mais ampla.
2. Adotar termos mais claros: Rótulos específicos poupam o cliente de ter que desvendar ramificações profundas.
3. Explorar filtros de coleção: Deixe que o público filtre por tamanho, cor ou preço na própria página da coleção em vez de incluir cada variante no menu.
4. Migrar para um mega menu: Quando o catálogo envolve dezenas de subdivisões, um mega menu multicolunas organiza os links em blocos claros com títulos, viabilizando visualizar todas as ofertas sem rolagem. Exige compatibilidade do tema ou aplicativo específico.

Para aprofundar as restrições dos temas de fábrica, examine o nosso estudo sobre limitações de menu em temas Shopify.

Onde o Navi+ se encaixa

Os menus padrão da Shopify atendem bem às necessidades básicas de menus suspensos. No entanto, com o aumento do volume de produtos, os comerciantes logo deparam com as limitações das listas de coluna única. Listas longas de coluna única podem ficar difíceis de percorrer, e o menu móvel padrão de um tema pode ser mais simples do que o seu catálogo exige.

Quando o seu catálogo supera essas restrições, o Navi+ traz alternativas para otimizar sua navegação:

• Desktop Mega Menus: Construa mega menus com produtos, coleções, imagens, ícones e layouts flexíveis. Organize suas subcategorias em layouts flexíveis para que os consumidores vejam as opções sem rolar.
• Mobile Menus: Crie menus móveis, menus de gaveta e menus hambúrguer para navegar pela loja com mais facilidade no celular.

Os menus do Navi+ são criados no app do Navi+ com edição de arrastar e soltar, sem programar. Eles são separados do menu do seu painel da Shopify, que não é substituído automaticamente.

Se o seu submenu se transformou em uma lista longa ou se você busca exibir imagens e colunas no computador e um painel mais intuitivo no celular, pode experimentar o Navi+ Tab Bar & Mega Menu junto ao seu tema, enquanto o seu menu da Shopify permanece no lugar.

Lista de verificação pré-publicação do seu submenu

Antes de disponibilizar o novo menu aos seus clientes, valide estes 8 tópicos:

• Menu do Header conferido: Confirmado em Loja virtual > Temas > Personalizar > Header que o menu ativo é o mesmo modificado em Content > Menus.
• Recuo assegurado: Verificado se cada item secundário está perceptivelmente recuado sob o item pai.
• Item sem link com título claro: Se aplicou #, garantido que o rótulo seja transparente como «Comprar por categoria».
• Link «Ver tudo» presente: Inserido um link «Ver tudo em [Categoria]» no início de cada agrupamento para usuários mobile.
• Testado em smartphone real: Verificado se o submenu abre e se os links são fáceis de tocar em um celular real.
• Máximo de sete itens no topo: Mantida a barra principal com sete ou menos tópicos para evitar excessos.
• Sinalização visual aparente: Confirmado se o cabeçalho exibe uma seta indicando a presença do submenu.
• Alterações gravadas: Clicado em Salvar menu para garantir que nenhuma edição seja perdida.

Perguntas frequentes (FAQ)

Como adiciono um submenu a um menu de navegação na Shopify?

Abra Content > Menus no painel da Shopify, acesse o menu principal, clique em Adicionar item de menu para criar um link secundário e arraste-o pelo ícone (⠿) para baixo e ligeiramente à direita do item pai. Clique em Salvar menu.

Quantos níveis um menu da Shopify pode ter?

Um item de nível superior pode comportar até dois níveis de menus suspensos aninhados abaixo dele, totalizando até três níveis. O tema precisa estar atualizado para exibir todos os três níveis na loja virtual.

Como faço para um item pai do menu não ser clicável?

Insira # no campo «Pesquisar ou colar um link» do item pai e atribua um nome esclarecedor como «Comprar por categoria». A maior parte dos temas o tratará como um botão de abertura em vez de um link comum.

Por que meu submenu não aparece na minha loja?

O motivo mais habitual é a seção Header do tema estar configurada com um menu diferente daquele que você acabou de editar. Isso também pode ocorrer se o item não estiver recuado ou se o tema não for compatível com aquele nível.

Os submenus funcionam em celulares?

Sim. No celular, a maioria dos temas mostra o menu atrás de um ícone de hambúrguer e abre os itens secundários dentro dele. Teste sempre em um smartphone real e avalie incluir um link «Ver tudo» em cada nível para facilitar a navegação por toda a coleção.

Fontes

• Shopify Help Center: Drop-down menus — Orientações oficiais para estruturar menus suspensos e conferências no mobile.
• Shopify Help Center: Editing menus — Regras de uso de alças de arrasto, limites de alterações e exclusão de itens superiores.
• Shopify Partners Blog: Building Nested Navigations with Shopify Link List — Visão geral de listas de links e estruturas de navegação aninhadas.
• Shopify Community: Nesting menu not showing — Solução da comunidade para verificar a atribuição de menu no cabeçalho do tema.
• W3C Web Accessibility Initiative (WAI): Flyout Menus Tutorial — Requisitos de acessibilidade para pistas visuais e comportamento da tecla Tab.
• Baymard Institute: Have a “View All” Option in the Main Navigation at Each Level of the Mobile Product Catalog (Only 24% Get It Right) (2022) — Pesquisa que demonstra que apenas 24% dos sites aplicam bem a opção «Ver tudo» no celular.
• Nielsen Norman Group: Dropdowns: Design Guidelines — Descobertas sobre problemas de usabilidade em menus suspensos muito extensos com barra de rolagem.
• Shopify App Store: Navi+ Tab Bar & Mega Menu — Página do aplicativo para mega menus e menus móveis.
• YouTube (Shopify Academy): How to create drop-down menus Shopify Help Center — Vídeo tutorial oficial ensinando a criar menus suspensos.
• YouTube (Learn With Shopify): How to reorganize your Shopify Menu like a pro — Tutorial em vídeo sobre reestruturação de menus e hierarquias visuais.