Passa horas a organizar coleções e a estruturar links no painel de administração da Shopify. No ecrã de um computador, as suas categorias desdobram-se com clareza num mega menu amplo. Mas ao abrir o menu lateral no telemóvel, a navegação muitas vezes parece dividida ou desalinhada.
Muitos lojistas acreditam que ter uma disposição em colunas no computador e uma navegação compacta no telemóvel exige a criação de dois menus distintos. Na prática, não precisa de manter duas árvores de dados separadas. Pode manter uma única hierarquia de categorias como fonte da verdade e deixar que cada dispositivo a apresente no layout mais adequado.
Resposta rápida: um único menu pode alimentar desktop e mobile?
Sim. No tema Dawn, o menu principal do cabeçalho abastece tanto o menu de desktop como a gaveta móvel, pelo que a estrutura já é partilhada. A única diferença está no layout: o desktop apresenta colunas, enquanto o telemóvel navega nível a nível. Escolha o método que preserva uma fonte única de dados.
- Método 1 (Configurações nativas do tema sem código): Mantenha um único menu no painel da Shopify e altere a definição de cabeçalho para Mega menu; o tema adapta automaticamente a apresentação móvel.
- Método 2 (Menus separados no painel): Crie uma linklist móvel autónoma e ligue o código da gaveta a ela, assumindo o dobro das tarefas de manutenção.
- Método 3 (Modificação do template da gaveta): Altere o código Liquid da gaveta para que as subcategorias surjam abertas de início, sem exigir múltiplos toques de ecrã.
Como os temas Shopify reutilizam um menu no desktop e mobile
Na Shopify, os dados de navegação são totalmente independentes da apresentação gráfica. Quando cria um menu em Conteúdo > Menus, a Shopify guarda essa estrutura como um objeto linklist. De acordo com a Documentação para Programadores da Shopify, “Pode aninhar links até três níveis de profundidade”: um item principal e dois níveis secundários. Para orientações aprofundadas sobre arquitetura, consulte o nosso Shopify menu guide.
Como cada linklist é apenas informação estruturada, o tema ativo determina como e onde ela é apresentada (Shopify Dev Docs). No ficheiro sections/header.liquid do Dawn, a opção menu_type_desktop permite alternar entre menu pendente, mega menu ou gaveta no desktop (GitHub Shopify Dawn).
Qualquer que seja a escolha no desktop, a gaveta móvel do Dawn consome exatamente essa mesma linklist. Em snippets/header-drawer.liquid, o template percorre o menu através de for link in section.settings.menu.links e vai até aos links de terceiro nível com for grandchildlink in childlink.links (GitHub Shopify Dawn). O Liquid também regista a profundidade através da propriedade levels do objeto link (Shopify Liquid API).
A arquitetura base já está partilhada. Gere One menu tree que apenas ganha formatos visuais distintos consoante o ecrã.
Por que razão os dois layouts ainda transmitem sensações diferentes
Apesar de partilharem a mesma lista de links, a experiência de utilização no computador e no telemóvel é bastante distinta devido aos diferentes paradigmas de interação.
Figura 1: Ilustração conceitual (Concept illustration) — Por que razão os dois layouts ainda transmitem sensações diferentes
No desktop, passar o rato sobre uma categoria abre um amplo Hover panel. Os clientes conseguem visualizar colunas com categorias e produtos de uma só vez, sem sair da página.
Nos telemóveis, a largura reduzida impede a disposição de colunas lado a lado. Os temas adotam uma gaveta retrátil com navegação escalonada. Para alcançar uma subcategoria, o cliente toca na linha principal, aguarda a transição de painel e toca novamente. Este requisito de Two taps é uma queixa que alguns utilizadores do Dawn levantaram na comunidade da Shopify (Shopify Community). Para entender melhor esta mecânica, leia a nossa análise sobre mobile drawer menu architecture.
Além disso, os ecrãs táteis impõem desafios próprios:
- Parent link not clickable: Em muitas gavetas móveis, tocar no nome da categoria superior serve apenas para abrir o submenu, impedindo a visita à coleção principal.
- Toques involuntários: Pesquisas do Nielsen Norman Group apontam que “opções minúsculas em mega menus originam erros de seleção frequentes em ecrãs táteis” (NN/g).
- Templates móveis separados: Aplicações como a Meteor separam deliberadamente os modelos de desktop e telemóvel (Helium Meteor Docs), enquanto criadores da Clean Canvas sugerem um menu móvel de nível único com links diretos para o Symmetry (Clean Canvas).
Método 1: Manter um menu Shopify e mudar o tipo de desktop para Mega menu
A abordagem sem código mais limpa consiste em tirar partido do mega menu nativo do seu tema. Mantém uma única lista no painel de administração e o tema adapta a disposição para cada ecrã.
Siga estes quatro passos:
- Construir a hierarquia de três níveis: Em Conteúdo > Menus, organize o Menu principal em itens superiores, subtítulos e destinos finais.
- Associar o menu ao cabeçalho: Em Loja online > Temas > Personalizar > Cabeçalho, certifique-se de que a sua linklist está escolhida no campo Menu.
- Mudar o tipo de menu para Mega menu: Nas opções do cabeçalho, altere Menu type de Menu pendente para Mega menu (GitHub Shopify Dawn). Para configurar o Dawn, consulte o nosso artigo para add a mega menu to Dawn.
- Validar a gaveta móvel: Mude a pré-visualização para Mobile e abra a gaveta. O sistema carrega automaticamente a mesma estrutura de categorias (GitHub Shopify Dawn).
Em temas de terceiros, a designação pode diferir ligeiramente; verifique a documentação do tema (Shopify Dev Docs).
Método 2: Usar dois menus separados no painel da Shopify
Se o seu menu de desktop tiver muitos links ou banners que sobrecarregam os telemóveis, pode criar dois menus independentes no painel.
Cria uma lista principal para desktop e uma lista reduzida designada “Mobile Menu” em Conteúdo > Menus. Para ligá-la, os programadores ajustam snippets/header-drawer.liquid para chamar a variável móvel em vez de section.settings.menu (Shopify Community). Consulte a documentação do seu tema para saber se oferece uma definição própria para o menu da gaveta, o que evitaria mexer no código.
Apesar de permitir flexibilidade total no telemóvel, esta escolha acarreta um custo de gestão pesado:
- Qualquer nova coleção ou ação promocional exige atualizações manuais em duplicado.
- Com o tempo os dois menus podem divergir, deixando os utilizadores móveis sem links que existem no desktop. Os comerciantes que querem «replicar o menu de desktop no telemóvel» procuram precisamente evitar isto (Shopify Community).
Reserve o Método 2 apenas para os casos em que a loja móvel precise de uma navegação inteiramente diferenciada.
Método 3: Editar a gaveta para exibir níveis aninhados de imediato
Muitos comerciantes preferem que a gaveta móvel exiba as subcategorias logo abertas, sem obrigar os clientes a avançar por vários ecrãs sucessivos (Shopify Community).
O template de gaveta do Dawn já processa itens de segundo e terceiro nível (GitHub Shopify Dawn). Ajustando o código Liquid e CSS, os programadores podem remover os painéis ocultos para que as subcategorias surjam expandidas por predefinição.
Tenha em mente estas salvaguardas essenciais:
- Versões diferentes de temas: Códigos partilhados em fóruns em 2022 visavam versões antigas do Dawn. A organização de ficheiros e classes sofreu alterações.
- Duplicar sempre o tema: Crie sempre uma cópia de segurança do tema antes de editar ficheiros Liquid. Nunca teste código novo na loja ativa.
- Deslocamento vertical excessivo: Se o seu mega menu tiver muitos itens, apresentá-los todos abertos no telemóvel cria uma lista longa.
O que transita de um mega menu desktop para o mobile
Ao transpor um mega menu de computador para um ecrã móvel, os elementos visuais têm de ser adaptados. O Nielsen Norman Group recomenda agrupar as opções em blocos com sentido (NN/g). Para conhecer padrões visuais recomendados, leia o nosso artigo sobre mega menu layout and grouping best practices.
Figura 2: Ilustração conceitual (Concept illustration) — O que transita de um mega menu desktop para o mobile
| Elemento de desktop | Comportamento no telemóvel | Ação recomendada |
|---|---|---|
| Grelha em várias colunas | O ecrã estreito não comporta várias colunas lado a lado (Navi+ Docs) | As Columns become one column empilhadas verticalmente numa lista única |
| Títulos de coluna | Títulos que apenas identificam uma coluna de desktop ocupam espaço numa lista estreita | Normalmente omita-os quando as colunas se empilham; um Divider between columns fino mantém visível o agrupamento anterior |
| Imagens e banners comerciais | Blocos volumosos de Promo banner empurram os links para fora do ecrã visível | Oculte imagens pesadas no mobile; use opções como Exclude when embedded para manter o menu leve (Navi+ Docs) |
| Profundidade do menu | A Shopify limita os menus a um máximo de três níveis (Shopify Dev Docs) | Mantenha a estrutura em ≤ 3 níveis para evitar links omitidos pelos loops Liquid |
| Links de texto compactos | Textos muito juntos provocam erros de seleção no toque (NN/g) | Aumente o espaçamento para cumprir a norma WCAG 2.2 de pelo menos 24 por 24 píxeis CSS (W3C WCAG 2.2) |
Testar em dispositivos reais antes de publicar
Os emuladores de browser simulam resoluções, mas não substituem o alcance real do polegar nem a sensibilidade tátil de um smartphone. Faça testes em equipamentos reais:
- Testar em telemóveis iOS e Android reais: Abra a pré-visualização em aparelhos de várias dimensões, no sentido vertical e horizontal.
- Tocar em cada nível: Clique em itens superiores, subcategorias e links finais para confirmar os URLs.
- Avaliar o comportamento das linhas principais: Assegure-se de que tocar numa categoria abre a coleção pretendida ou expande o submenu sem falhas.
- Verificar a área tátil: Confirme que botões e links respeitam a dimensão mínima de 24x24 pixels da WCAG 2.2 (W3C WCAG 2.2).
- Avaliar o deslize do menu: Percorra a gaveta do topo até aos links de rodapé para garantir que nenhum conteúdo é cortado.
- Utilizar temas duplicados: Realize sempre as verificações num rascunho de tema antes de aplicar alterações ao público.
Problemas comuns e soluções
Durante o alinhamento da navegação de desktop e mobile, surgem habitualmente quatro entraves:
O menu móvel exige dois toques
- Causa: O sistema de painéis requer tocar numa categoria, esperar pela transição e tocar novamente (Shopify Community).
- Solução: Ajuste o código para expandir subitens de imediato (Método 3), ou adote um layout que elimine o nível intermédio das colunas.
Os níveis mais profundos não aparecem
- Causa: A Shopify suporta no máximo três níveis de menu (Shopify Dev Docs). O Dawn não itera além do terceiro escalão (GitHub Shopify Dawn).
- Solução: Simplifique a categorização para que todas as páginas relevantes fiquem contidas nos três níveis suportados.
O link principal não responde ao toque
- Causa: Nos ecrãs táteis, o toque na linha principal serve muitas vezes unicamente para alternar a exibição do submenu.
- Solução: Insira um link “Ver tudo em [Categoria]” como primeira entrada dentro do submenu.
O menu móvel apresenta links diferentes do desktop
- Causa: A loja está a utilizar o Método 2 através de código em
snippets/header-drawer.liquidou de uma aplicação com linklist própria (Shopify Community). - Solução: Inspecione os parâmetros de cabeçalho e o código da gaveta para apurar qual o identificador de menu que está a ser chamado.
Compromissos: quando uma estrutura única é a escolha errada
Manter uma navegação unificada poupa tempo, mas cada caminho traz contrapartidas específicas:
| Método | Esforço inicial | Código necessário | Onde se gere | Principais limites e riscos |
|---|---|---|---|---|
| Método 1: Mega menu nativo | Baixo (minutos) | Nenhum (definições de tema) | Um menu no painel Shopify | Depende dos recursos do tema; a gaveta móvel mantém a navegação por etapas |
| Método 2: Dois menus distintos | Médio | Ajuste ligeiro em Liquid ou no tema | Dois menus no painel | Forte risco de divergência no catálogo; esforço duplo a cada alteração de inventário |
| Método 3: Gaveta personalizada | Alto | Modificações em Liquid e CSS | Um menu no painel Shopify | Risco de incompatibilidade em atualizações; listas compridas cansam a leitura móvel |
Quando deve separar deliberadamente os menus
Ainda que manter uma fonte de dados unificada evite falhas, separar os menus justifica-se em cenários concretos:
- Catálogos extremamente vastos: Lojas com milhares de artigos distribuídos por muitas subdivisões podem sobrecarregar os telemóveis. Um menu móvel simplificado de nível único com links diretos oferece uma experiência tátil mais prática (Clean Canvas).
- Atalhos específicos para telemóvel: Os visitantes em smartphone podem beneficiar de atalhos rápidos como Localizar encomenda ou Onde estamos em primeiro plano.
- Indexação e SEO: Se ocultar categorias no telemóvel, assegure-se de que todas as coleções continuam acessíveis através de páginas de catálogo, migalhas de pão e sitemaps. Consulte os nossos conselhos para keep your menu crawlable.
Onde o Navi+ se posiciona
Caso o seu tema não disponha de mega menus avançados ou prefira não alterar ficheiros Liquid, o Navi+ oferece uma forma estruturada de partilhar a navegação entre dispositivos.
Segundo a documentação do Navi+, é assim que o menu de desktop e o menu móvel funcionam em conjunto:
- Desktop Mega Menu: Em ecrãs largos, o Navi+ Desktop Mega Menu apresenta painéis com várias colunas, imagens e banners. Não surge em telemóveis porque as colunas largas não cabem em ecrãs estreitos (Navi+ Docs).
- Incorporação no Mobile Menu: Em vez de transcrever categorias, o Navi+ Mobile Menu permite incorporar o seu mega menu de desktop através de um item específico no nível 1 da gaveta (Navi+ Docs).
- Disposição em coluna única: Ao incorporar, as Columns become one column empilhadas com precisão (Navi+ Docs). O patamar intermédio das colunas é ignorado para permitir chegar aos produtos num só toque.
- Gestão de visibilidade: Ative a funcionalidade Exclude when embedded para ocultar gráficos grandes na versão de telemóvel (Navi+ Docs).
- Editar num só lugar: A gaveta reutiliza os itens do mega menu: edita apenas uma vez (Edit once) no mega menu desktop e a cópia incorporada na gaveta acompanha. Para remover um mega menu, basta desvincular o item incorporado no Mobile Menu previamente (Navi+ Docs).
- Três níveis de navegação: O Navi+ Mobile Menu suporta até três patamares (categorias, subcategorias e links diretos) (Navi+ Docs).
Para configurá-lo:
- No Navi+, copie o item de incorporação do seu Desktop Mega Menu.
- Cole o elemento no nível 1 do seu Mobile Menu.
- Ative Exclude when embedded para os banners ou elementos que se destinem apenas a computadores.
Para consultar o passo a passo, veja como reuse a Desktop Mega Menu on phones e aprenda a gerir itens com Exclude when embedded.
Se já usa o Navi+ para um Desktop Mega Menu, experimente copiar o respetivo item de incorporação para um Mobile Menu e veja a pré-visualização no seu telemóvel — se o resultado não for o que pretende, elimine o item de incorporação e mais nada muda.
Checklist de ação
Consulte esta lista para sincronizar o seu mega menu de desktop e o menu móvel:
- Definir uma árvore de menu única: Elabore a sua organização em Conteúdo > Menus, respeitando o limite de três níveis da Shopify.
- Escolher a abordagem: Opte por opções nativas do tema (Método 1), menus autónomos (Método 2) ou adaptação de código da gaveta (Método 3).
- Duplicar o tema: Guarde uma cópia de segurança do tema antes de fazer alterações em Liquid.
- Colapsar colunas numa lista única: Verifique se as colunas de desktop se organizam de forma legível numa única coluna no telemóvel.
- Remover elementos pesados: Oculte banners e elementos decorativos de grandes dimensões no menu móvel.
- Validar os links principais: Assegure-se de que os títulos principais abrem coleções ou disponibilizam uma opção “Ver tudo”.
- Testar em equipamentos reais: Confirme a agilidade ao toque, o deslize vertical e o tamanho mínimo de 24x24 px em telemóveis reais.
Perguntas frequentes (FAQ)
Posso usar um único menu para desktop e telemóvel?
Sim. Em temas como o Dawn, a gaveta móvel é alimentada pela mesma linklist associada ao cabeçalho. Isto permite gerir um só menu enquanto o tema aplica o layout correspondente a cada dispositivo.
Quantos níveis pode ter um menu da Shopify?
Um item de nível superior na Shopify pode conter até dois níveis secundários aninhados, perfazendo um total de três níveis de navegação. O template do Dawn lê links até ao patamar de netos.
Porque é que o meu menu móvel precisa de dois toques?
As gavetas móveis comuns utilizam uma estrutura por níveis: tocar numa categoria abre um submenu e um segundo toque seleciona o destino. Isto resolve-se apresentando as subcategorias abertas ou suprimindo o nível das colunas.
As colunas e as imagens do mega menu funcionam no telemóvel?
As colunas horizontais não cabem em ecrãs de telemóvel e passam a surgir empilhadas verticalmente. Imagens e banners ocupam espaço em excesso e são normalmente ocultados em smartphones através de definições de visibilidade.
Preciso de editar o código do tema?
Não. Se o seu tema oferecer suporte nativo para mega menus, pode configurá-lo no editor de temas sem mexer no código. A edição em código só é necessária para modificar o comportamento habitual da gaveta ou ligá-la a uma lista distinta.
Fontes
- Shopify Developer Documentation: Navigation and Search — Especificações de objetos linklist e regras de aninhamento até três níveis.
- Shopify Dawn Repository: header.liquid — Implementação dos estilos de menu no desktop: pendente, mega menu e gaveta.
- Shopify Dawn Repository: header-drawer.liquid — Ciclo de iteração da gaveta móvel descendo até ao patamar de netos.
- Shopify Liquid API Reference: Link Object — Descrição dos atributos de links, incluindo o número de níveis aninhados.
- Nielsen Norman Group: Mega Menus Work Well Anywhere — Estudos de usabilidade sobre falhas de seleção tátil, agrupamento de opções e hierarquia visual.
- W3C Web Accessibility Initiative: Target Size Minimum (WCAG 2.2) — Requisito de acessibilidade que estipula áreas táteis de pelo menos 24 por 24 píxeis CSS.
- Shopify Community: Main menu nesting mobile vs desktop — Discussão sobre a necessidade do duplo clique na navegação móvel do Dawn.
- Shopify Community: Desktop Mega Menu and Mobile Hamburger Menu — Sugestões da comunidade para apontar a gaveta para um menu móvel autónomo.
- Shopify Community: DAWN how to show nested menu/submenu on mobile — Pedidos para apresentar os níveis 2 e 3 em simultâneo na navegação móvel do Dawn.
- Shopify Community: How can I make my desktop menu identical on mobile — Questões sobre como replicar a navegação de desktop no formato móvel.
- Helium Meteor Documentation: Welcome to Meteor — Apresentação de modelos independentes para computadores e telemóveis.
- Clean Canvas Blog: Mega Menu Your Shopify Store — Linhas orientadoras para navegação móvel simplificada no tema Symmetry.
- Navi+ Documentation: Create a Desktop Mega Menu — Orientações técnicas sobre empilhamento, inclusão de itens e visibilidade.
- Navi+ Documentation: Create a Mobile Menu — Estrutura de menus móveis com 3 patamares e integração na gaveta.
- Navi+ Documentation: Item Visibility — Métodos para ocultar elementos consoante o aparelho com Exclude when embedded.
Explore os temas
Este guia traz links para artigos específicos — aprofunde-se em cada um.