Como criar um menu desktop e um menu mobile na Shopify (Passo a passo)

Ao estruturar uma loja virtual na Shopify, o cabeçalho para computador costuma ser planejado para acomodar todo o sortimento: coleções de produtos, páginas institucionais e menus suspensos com vários níveis. No entanto, quando essa mesma loja é acessada em um smartphone, toda essa estrutura se transforma em uma gaveta lateral abarrotada que exige rolagem constante.

Muitos lojistas procuram uma opção simples no painel da Shopify para designar um menu ao computador e um menu mais enxuto aos celulares. Porém, muitos temas não oferecem essa divisão de forma nativa. Embora seja possível criar mais de um menu em Conteúdo > Menus, o tema é quem define a exibição — e a maioria dos temas utiliza exatamente a mesma lista tanto no desktop quanto no mobile.

Para separá-los, você pode manter um menu único objetivo, editar o código da gaveta do seu tema ou instalar um aplicativo de navegação. Este guia explica detalhadamente como colocar em prática cada uma das três opções.

Resposta rápida: A Shopify pode mostrar um menu diferente no celular?

Não com a maioria dos temas prontos. Você cria os menus em Conteúdo > Menus, mas o tema decide onde eles aparecem, e temas como o Dawn usam o mesmo menu no cabeçalho desktop e na gaveta mobile. Para separá-los, edite o código da gaveta ou use um app de menu.

Você tem três opções principais de implementação:

• Opção 1: Manter um único menu e deixar o tema cuidar do mobile. Tenha uma lista enxuta em Conteúdo > Menus sem precisar mexer em código.
• Opção 2: Atribuir um menu mobile separado editando o código do tema. Duplique o tema e edite o arquivo snippets/header-drawer.liquid (no Dawn) para ler o identificador do seu menu mobile.
• Opção 3: Utilizar um app de navegação. Crie um mega menu no desktop e uma gaveta ou barra inferior no mobile, ativando a exibição por dispositivo sem programar.

Confira nossa tabela comparativa na seção Trade-offs para descobrir qual opção se adapta melhor ao seu catálogo.

Como os menus da Shopify funcionam no desktop e mobile

Concept illustration: um único menu principal da Shopify abastece tanto o cabeçalho no desktop quanto a gaveta no mobile.

Na plataforma Shopify, os links de navegação são configurados em Conteúdo > Menus. No entanto, como esclarece a documentação do Centro de Ajuda da Shopify sobre menus suspensos, o local exato onde cada menu é exibido depende do tema instalado.

No tema padrão Dawn, a seção Header possui apenas uma configuração de menu do tipo link_list (definida como main-menu). No computador, esses itens são exibidos horizontalmente, revelando subcategorias dentro de um Header dropdown.

Em telas de celular, um botão de hambúrguer abre o Mobile drawer. No código do Dawn, o arquivo que processa essa gaveta é snippets/header-drawer.liquid. Nele, o laço de repetição principal Liquid diz:

{%- for link in section.settings.menu.links -%}

Como a gaveta consulta diretamente section.settings.menu.links — o mesmo campo usado no cabeçalho para computador —, alterar o Main menu no painel administrativo atualiza simultaneamente as duas versões de visualização.

Alguns temas podem trazer um seletor nativo para menu mobile na seção Header do editor de temas. Verifique primeiro o seu editor de temas; caso não encontre essa opção, siga um dos métodos abaixo.

Passo 1: Criar os menus desktop e mobile em Conteúdo > Menus

Seja optando por editar o código, seja escolhendo um aplicativo, o primeiro passo é criar ambas as listas de links na Shopify.

Trabalhe sempre pelo caminho Conteúdo > Menus.

Criar o menu para computador (menu principal com dropdowns)

1. No painel da Shopify, acesse Conteúdo > Menus.
2. Clique em Menu principal (Main menu) ou em Adicionar menu.
3. Clique em Adicionar item de menu para incluir as categorias e páginas principais.
4. Arraste os subitens para a direita logo abaixo do item pai para aninhá-los. De acordo com as diretrizes oficiais da Shopify para menus suspensos, um item de nível superior pode ter até dois níveis de menus suspensos aninhados (totalizando três níveis de profundidade).

Criar um menu mobile mais conciso

1. Em Conteúdo > Menus, clique novamente em Adicionar menu.
2. Escolha um nome objetivo, como Mobile menu.
3. Anote o identificador (handle, por exemplo mobile-menu). A opção 2 precisa exatamente desse termo.
4. Inclua apenas links prioritários: coleções mais vendidas, busca, rastreamento de pedidos e suporte. Mantenha poucos níveis de profundidade.
5. Clique em Salvar menu.

[!NOTE] Criar um Separate mobile menu em Conteúdo > Menus apenas salva as informações no banco de dados. Ele permanecerá invisível na loja até ser vinculado pelo tema, por código Liquid ou por um Menu app.

Opção 1: Usar um único menu e deixar o drawer do tema gerenciar o mobile

Para lojas com catálogo compacto, o caminho mais direto é manter um único Main menu e permitir que o Mobile drawer padrão do tema faça a adaptação automática para telas menores.

Você organiza os links principais sem exagerar em ramificações. Ao carregar em celulares, o tema recolhe essas opções para dentro da gaveta lateral.

• Vantagens: Sem linhas de código, sem mensalidades de aplicativos e manutenção simples. Uma única alteração atualiza todos os dispositivos.
• Desvantagens: Computador e celular exibem sempre as mesmas coisas. Um mega menu volumoso no desktop vira uma gaveta mobile extensa que exige rolagem cansativa.

Confira no editor do seu tema se existem opções de ajuste para a gaveta. Para boas práticas de diagramação, leia nosso artigo sobre mobile drawer menu best practices.

Opção 2: Atribuir um menu mobile separado editando o código do tema

Se você deseja exibir um menu exclusivo para celulares sem contratar aplicativos, pode ajustar os arquivos Liquid do tema para que a gaveta busque o segundo menu.

Duplique seu tema antes de mexer no código

Como recomenda o Centro de Ajuda da Shopify sobre duplicação de temas, crie sempre uma cópia de segurança para descartar alterações e recomeçar caso ocorra algum problema.

1. Vá para Loja virtual > Temas.
2. Clique nos três pontinhos (...) ao lado do seu tema ativo e escolha Duplicar.
3. Realize qualquer alteração apenas na cópia duplicada não publicada.

Aponte a gaveta para o seu menu mobile

1. Na cópia do tema, clique nos três pontinhos (...) e selecione Editar código.
2. No tema Dawn, localize o arquivo snippets/header-drawer.liquid.
3. Encontre o laço principal:

{%- for link in section.settings.menu.links -%}

1. Segundo a documentação do objeto linklists no Shopify Liquid, é possível carregar qualquer menu pelo handle no objeto linklists. Substitua a linha por:

{%- for link in linklists['mobile-menu'].links -%}

(Troque 'mobile-menu' pelo handle exato registrado no Passo 1).

Uma solução semelhante foi compartilhada na comunidade Shopify para o tema Ride.

[!WARNING] O nome de arquivo acima é um exemplo para o Dawn; outros temas usam outro arquivo, procure um laço semelhante que leia section.settings.menu. Altere somente o laço externo; os laços internos devem ser mantidos para que os subitens abram corretamente. O código Liquid manual pode precisar ser reaplicado após uma atualização do tema.

Pré-visualize a cópia do tema em telas de computador e celular antes de colocá-la no ar.

Opção 3: Usar um app de menu para separar desktop e mobile

Para quem busca uma configuração visual e prefere não lidar com código Liquid, recorrer a um Menu app dedicado é uma escolha muito conveniente.

Esses aplicativos permitem criar layouts sob medida para cada tipo de tela: mega menus amplos com colunas no computador e gavetas laterais compactas ou barras inferiores no celular.

Ao escolher um app na Shopify App Store, observe os seguintes pontos:

• Controles de visibilidade por dispositivo: Opção clara para exibir o menu em Celular, Computador ou em ambos.
• Visualizador mobile embutido: Ferramenta de prévia responsiva dentro do próprio app.
• Forma de instalação: Verifique se o aplicativo se adiciona por meio de um Theme App Embed ou se pede que você edite os arquivos do tema.
• Compatibilidade com o tema: Integração harmônica com o cabeçalho existente.

Para entender qual estrutura se adequa melhor ao seu sortimento, consulte nosso guia sobre como choose the right menu type for each screen.

Regras de design para um menu mobile

Concept illustration: menus com excesso de níveis aninhados em comparação com uma navegação enxuta com alvos de toque confortáveis.

Ao estruturar links para celulares, respeite estas orientações de ergonomia:

• Fewer items (Menos itens): O espaço vertical no smartphone é curto. Destaque coleções mais procuradas, lançamentos, campo de busca e suporte. Links institucionais secundários (como imprensa ou carreiras) devem ficar no rodapé.
• Larger tap targets (Áreas de toque maiores): O toque com os dedos não possui a precisão do mouse. Conforme o critério WCAG 2.2 2.5.8 (Tamanho Mínimo de Alvo), os alvos interativos devem medir pelo menos 24×24 pixels CSS (com algumas exceções). Espaçamento generoso entre as linhas evita toques acidentais.
• Shallow nesting (Navegação rasa): Sanfonas muito aninhadas são mais difíceis de usar em telas pequenas. Prefira um Shallow nesting: listas planas ou no máximo um nível de subcategorias.
• Além do ícone de hambúrguer: Pesquisas do Nielsen Norman Group apontam que o ícone de hambúrguer não é percebido de imediato por todos os usuários. Combinar a gaveta lateral com recursos visíveis, como uma barra de abas inferior, garante acesso rápido às categorias principais.

Veja mais detalhes sobre navegação mista em nosso artigo sobre mobile navigation beyond the hamburger menu.

Testar antes de publicar

Como orienta o Centro de Ajuda da Shopify, faça testes em dispositivos móveis reais para assegurar que os menus suspensos funcionem conforme o planejado.

Roteiro de checagem recomendado:

1. Prévia no editor de temas: Alterne entre as opções Computador e Celular para conferir o visual geral.
2. Teste em aparelho celular real: Abra o link de prévia nos navegadores Safari e Chrome em um smartphone físico.
3. Mecanismo da gaveta: Verifique se a abertura e o fechamento acontecem de forma fluida.
4. Expansão de submenus: Toque em cada menu suspenso para confirmar que os textos não fiquem cortados.
5. Verificação de links: Toque em todos os botões para confirmar que levam a coleções ativas e sem erro 404.
6. Orientação em paisagem: Vire o celular na horizontal para garantir que o botão de fechar continue acessível.
7. Navegação em páginas variadas: Teste o menu a partir da página inicial, de uma coleção e de uma página de produto.

Problemas comuns e soluções

• O celular ainda exibe o menu anterior: Você pode estar visualizando o tema publicado em vez da cópia que foi alterada. Além disso, confira se o identificador em linklists['mobile-menu'].links coincide letra por letra com o de Conteúdo > Menus.
• O novo menu não aparece na loja: Apenas criar um menu em Conteúdo > Menus não o torna visível. Ele precisa ser selecionado no cabeçalho do tema, invocado no código Liquid ou ativado em um app.
• Excluir um item pai apagou todos os subitens: Conforme as regras de edição de menu da Shopify, ao remover um item que contém links aninhados, os itens filhos também são apagados. Arraste os subitens para fora antes de deletar o item pai.
• Os menus suspensos não abrem no celular: Cheque a profundidade de aninhamento. A Shopify permite até dois níveis aninhados sob um item principal; mantenha o menu mobile dentro desse limite e teste-o na gaveta do seu tema.
• Os submenus sumiram da gaveta após editar o código: Certifique-se de ter substituído somente o laço externo for link in section.settings.menu.links. Alterar os laços internos (for childlink in link.links) impede a renderização das subcategorias.

Trade-offs: quando não separar seus menus

Quando não separar seus menus

Ter duas estruturas de menu distintas nem sempre é vantajoso:

• Catálogos reduzidos: Lojas com um catálogo pequeno e simples funcionam muito bem com um único menu bem elaborado.
• Pouco tempo para manutenção: Administrar dois menus significa atualizar duas listas em Conteúdo > Menus a cada lançamento. Esquecimentos deixam a versão mobile desatualizada.
• Atualizações constantes de tema sem desenvolvedor: Ao mexer no código, talvez seja preciso reinserir os trechos manuais após uma atualização do tema.

Quando um único menu objetivo atende com excelência a ambas as telas, mantê-lo unificado é a opção que exige menos manutenção.

Onde a Navi+ se encaixa

Se você prefere não editar o código do tema, o Navi+ permite criar um mega menu desktop e um menu mobile ou tab bar separados, escolhendo em qual dispositivo cada um aparece. Você pode testá-lo no plano gratuito e manter o tema intacto.

Com a Navi+, você pode montar barras inferiores fixas, mega menus para desktop em várias colunas, gavetas mobile e botões flutuantes em um editor de arrastar e soltar, sem escrever código.

Na aba Publish de cada menu, a Navi+ disponibiliza chaves de controle específicas:

• Chave Mobile: Ativa o menu na tela de celulares.
• Chave Desktop: Ativa o menu em monitores de computador.

Por padrão, apenas a opção Mobile fica ativada ao criar um menu mobile. Você pode deixar essa configuração para a gaveta no celular e criar outro menu ativando somente a opção Desktop para computadores. Ambos operam de forma independente na mesma loja e aceitam até três níveis de aninhamento.

Para tornar a navegação no celular ainda mais agradável, você pode associar o menu lateral a uma bottom tab bar for Shopify, mantendo ferramentas como busca, carrinho e categorias principais ao alcance imediato do polegar.

Checklist de ação

• Avaliar o catálogo: Analisar se dois menus são realmente necessários ou se um menu enxuto resolve.
• Criar menu de computador: Em Conteúdo > Menus, monte o menu principal com categorias e dropdowns.
• Criar menu mobile: Em Conteúdo > Menus, adicione uma lista reduzida e anote o handle.
• Verificar o tema: Cheque se a seção Header do editor de temas já possui um campo nativo para menu mobile.
• Escolher a estratégia: Optar entre a Opção 1 (menu único), Opção 2 (código) ou Opção 3 (aplicativo).
• Duplicar tema antes de programar: Para a Opção 2, duplique o tema e ajuste snippets/header-drawer.liquid na cópia.
• Ajustar visibilidade no app: Se usar aplicativo, configure o mega menu para Desktop e o drawer para Mobile.
• Testar no celular real: Valide a abertura da gaveta, submenus, áreas de toque e formato paisagem.
• Manter alinhamento: Atualize os dois menus em Conteúdo > Menus sempre que alterar produtos e coleções.

Perguntas frequentes (FAQ)

Posso mostrar um menu diferente no celular e no computador?

Sim, mas a grande maioria dos temas Shopify adota o mesmo menu por padrão. Para mostrar links diferentes, você precisa alterar o código da gaveta ou usar um app de navegação.

Por que meu menu mobile mostra os mesmos links do menu desktop?

Em temas como o Dawn, o arquivo da gaveta mobile faz a leitura do mesmo menu escolhido na seção Header (section.settings.menu.links). Assim, modificar o menu principal afeta ambos os formatos.

Preciso editar o código do tema para usar dois menus?

Não é obrigatório. Você pode utilizar um app de menu para distribuir menus separados por aparelho sem programar. Se optar por editar o código, duplique sempre o tema com antecedência.

Onde crio menus na Shopify?

Você cria e administra todos os menus da sua loja virtual na aba Conteúdo > Menus dentro do painel da Shopify.

Quantos níveis um menu suspenso da Shopify pode ter?

Um item de nível superior pode receber até dois níveis de menus suspensos aninhados abaixo dele, permitindo até três níveis de navegação no total.

O que acontece se eu excluir um item de menu pai?

Ao apagar um item pai que possui itens aninhados abaixo, todos os itens filhos também são removidos. Arraste os subitens para fora antes de excluir o item pai.

Fontes

• Shopify Help Center: Editing Menus — Como gerenciar menus em Conteúdo > Menus e regras de exclusão de itens aninhados.
• Shopify Help Center: Drop-down Menus — Limite de dois níveis de aninhamento e testes em aparelhos celulares.
• Shopify Help Center: Duplicating Themes — Orientações para duplicar temas como cópia de segurança antes de alterar código.
• Shopify Developer Documentation: Liquid linklists Object — Documentação técnica da API Liquid para acessar menus pelo handle.
• Shopify Dawn Repository: sections/header.liquid — Código-fonte do Dawn com o campo padrão link_list no cabeçalho.
• Shopify Dawn Repository: snippets/header-drawer.liquid — Código do Dawn mostrando o laço da gaveta móvel sobre section.settings.menu.links.
• Shopify Community: Customizing Main Menu and Sidebar Menu for Desktop and Mobile — Discussão com solução para alterar o header-drawer.liquid no tema Ride.
• Shopify Community: Use Different Menu for Mobile and Desktop — Tópico na comunidade sobre a necessidade de desvincular menus por dispositivo.
• Fudge: How to Change Mobile Menu Behavior in Shopify — Análise do comportamento unificado de menus e adaptação mobile.
• W3C Web Accessibility Initiative: WCAG 2.2 Target Size (Minimum) — Critério 2.5.8 estipulando áreas de toque mínimas de 24×24 pixels CSS.
• Nielsen Norman Group: Mobile Navigation Beyond the Hamburger — Pesquisa de usabilidade sobre a visibilidade do botão hambúrguer e formatos híbridos.
• Navi+ Help Center: Display Rules Settings — Manual de regras de exibição para dispositivos Mobile e Desktop.
• Shopify App Store: Navi+ Navigation & Menu Bar — Detalhes do app para criar mega menus, gavetas e barras inferiores.