Como configurar links de menu na sua loja Shopify (Passo a passo, incluindo mobile)

Configurar links de menu na Shopify exige apenas alguns cliques em Content > Menus, mas o menu só fica realmente “concluído” quando o tema exibe o menu correto e tudo funciona com perfeição no celular — este guia aborda as duas etapas.

Ao inaugurar sua loja virtual, conectar seus produtos, coleções e termos institucionais à navegação é uma das tarefas mais importantes. Uma navegação clara ajuda os clientes a se orientarem na sua loja. Nas lojas Shopify modernas, todo o gerenciamento de listas ocorre no painel de controle central, enquanto o tema ativo determina a forma como esses links são apresentados aos visitantes no computador e no celular.

Resposta rápida: como configurar links de menu na Shopify

Para configurar links de menu na Shopify, acesse Content > Menus no painel de controle da Shopify, abra o menu desejado (geralmente o menu principal), clique em Add menu item, digite um nome, escolha um link e clique em Save menu. Arraste itens para baixo de outro item para criar um menu suspenso.

Siga estes seis passos para adicionar qualquer link à navegação:

1. No painel de administração da Shopify, vá para Content > Menus.
2. Clique no título do menu que deseja editar (geralmente Main menu).
3. Clique em Add menu item.
4. No campo Name, digite o rótulo visível para os compradores e selecione ou cole o destino em Link.
5. Clique em Add.
6. Clique em Save menu para salvar e publicar suas atualizações.

Arraste um item para baixo de outro item para criar um menu suspenso sempre que desejar organizar subcategorias sob uma seção principal.

O que são menus e links na Shopify (cabeçalho, rodapé, tema)

Entender a navegação na Shopify exige separar a lista de links criada no painel da forma como o tema cuida de sua apresentação. Um menu é uma lista organizada de conexões criada na administração. Um link é um elemento individual clicável contido nessa lista que direciona os clientes para uma coleção, produto, página de conteúdo ou site externo.

Toda nova loja Shopify já vem com dois menus padrão que aparecem em todas as páginas: o menu principal (main menu) e o menu de rodapé (footer menu). O menu principal normalmente se estende na horizontal pelo cabeçalho no computador ou se comporta como uma barra lateral. O menu de rodapé fica na parte inferior do site, onde os visitantes buscam políticas de devolução, informações de contato e termos de serviço.

O seu tema decide onde e de que maneira esses menus são exibidos. Cada tema tem um design diferente, portanto, os menus podem ser exibidos de maneiras distintas em temas variados. Por exemplo, um tema pode mostrar os links em linha reta no topo, enquanto outro condensa tudo em uma gaveta retrátil que desliza lateralmente.

Como o tema controla o visual, é fundamental verificar as configurações do tema nas seções Header e Footer para confirmar que o menu selecionado é o mesmo que você está editando. Se você editar um menu no painel administrativo e a loja não mudar, seu tema provavelmente está vinculado a outra lista de links. Para se aprofundar na organização de lojas virtuais, confira nosso guia completo de menus da Shopify.

Como adicionar um link de menu passo a passo em Content > Menus

A Shopify concentra todos os menus de navegação em uma única tela. Vale lembrar que tutoriais antigos costumam chamar esse local de “Loja virtual > Navegação”, mas nas versões atuais você encontrará tudo sob Content > Menus.

Criar um novo menu

Embora a loja comece com listas padrão de cabeçalho e rodapé, pode ser necessário criar um menu independente para uma coluna secundária no rodapé ou uma lista lateral.

Para iniciar uma nova lista, acesse Content > Menus e clique na opção para criar um menu. Insira um nome descritivo como “Rodapé Atendimento” ou “Links Úteis”. Depois de criado, você poderá inserir links e selecionar esse menu no editor de temas.

Adicionar um item de menu (Add menu item)

Inserir um link em um menu existente leva poucos instantes:

1. Acesse Content > Menus no painel da Shopify.
2. Clique no título do menu que deseja editar (por exemplo, Main menu).
3. Role até o final da lista e clique em Add menu item.
4. No campo Name, digite o texto que os clientes verão. Esse nome aparece no menu e pode conter caracteres especiais ou emojis para enfatizar promoções ou novidades.
5. No campo Link, clique para escolher uma coleção, produto, página ou post de blog, ou cole uma URL externa.
6. Clique em Add para anexar a opção à sua lista.

Salvar o menu e reordenar itens (Save menu)

Após adicionar os links, confira a sequência de exibição:

1. Localize o ícone de alça (⠿) ao lado do item de menu.
2. Clique e segure o ícone de alça (⠿) ao lado do item de menu e arraste o item para outra posição para cima ou para baixo.
3. Solte o mouse assim que o item estiver na posição desejada.
4. Clique em Save menu.

Lembre-se sempre de clicar em Save menu antes de sair da página para garantir que suas atualizações fiquem gravadas.

Escolha o tipo de link ideal: coleção, produto, página, blog, URL externa

O sistema de navegação da Shopify proporciona ampla versatilidade. Você pode adicionar menus à sua loja virtual para exibir e organizar links para produtos, coleções, páginas da web, posts de blog e muito mais. Selecionar o tipo de destino correto poupa cliques e facilita as compras.

Crie sempre a coleção, página ou post de blog na Shopify antes de tentar conectá-lo ao menu. Se o recurso ainda não existir, você terá que sair do menu, criá-lo no painel e recomeçar o processo.

Se você deseja um título de nível superior que apenas abra uma lista suspensa sem levar a nenhuma página, use, como sugere a orientação da Shopify sobre menus suspensos, um rótulo descritivo como “Comprar por Categoria” para itens de menu de nível superior com links #. Teste o item no seu tema para confirmar que ele abre a lista suspensa sem carregar uma página.

Crie um menu suspenso aninhando itens

Com o crescimento do catálogo, exibir todas as coleções na barra principal sobrecarrega o topo da página. Você pode criar um menu suspenso aninhando subitens diretamente sob uma categoria superior.

Ilustração conceitual (Concept illustration): uma lista de menu plana comparada a um menu suspenso aninhado.

Para aninhar um item, inclua o item principal e o item secundário no menu. Clique e segure o ícone de alça (⠿) ao lado do item secundário, mova-o para baixo do item principal e arraste-o ligeiramente para a direita (Drag to nest) até a linha recuar. Solte a alça. A linha recuada se transforma em um Nested item subordinado ao seu Top-level item.

No editor do painel, você pode comparar uma Flat menu list, em que todas as linhas ficam alinhadas à margem esquerda, com um Nested drop-down menu, em que os sublinks aparecem recuados sob o título correspondente.

Até que nível você pode aninhar?

A Shopify estabelece uma regra hierárquica bem definida: o item de nível superior pode ter até dois níveis de menus suspensos aninhados abaixo dele. Isso permite um total de três níveis:

• Item de nível superior (Top-level item, ex.: “Vestuário”)
  • Primeiro item aninhado (Nested item nível 1, ex.: “Feminino”)
    • Segundo item aninhado (Nested item nível 2, ex.: “Vestidos”)

Embora o painel da Shopify suporte dois níveis aninhados, a visualização na loja depende do design do tema. Cada tema tem um design diferente, portanto, os menus podem ser exibidos de maneiras distintas em temas variados, e alguns temas podem não mostrar todos os níveis. Teste seu menu no seu próprio tema. Para explorar taxonomias profundas, leia nosso guia sobre como funcionam menus multinível.

Menus suspensos no rodapé

Muitos lojistas questionam se é possível ter menus suspensos no rodapé. A documentação da Shopify destaca que os menus de rodapé só podem exibir itens de nível superior em configurações convencionais.

A própria página de ajuda da Shopify sobre menus suspensos não é totalmente consistente sobre o rodapé, então não conte com menus suspensos no rodapé: planeje apenas com links de nível superior, depois verifique as opções do seu tema e teste sua loja para ver como ele gerencia a navegação do rodapé.

O vídeo oficial da Shopify abaixo demonstra a mecânica de arrastar alças para construir menus suspensos aninhados:

Ordene e nomeie itens do menu para facilitar a busca dos clientes

Organizar o menu é ajudar os compradores a encontrar o que procuram. Rótulos compreensíveis e uma sequência lógica deixam o menu mais fácil de percorrer.

A Shopify recomenda adicionar sete ou menos itens de menu de nível superior para evitar sobrecarregar a barra de navegação. Um nível superior mais curto também é mais fácil de percorrer para os clientes.

Para os nomes dos links, siga princípios consagrados de usabilidade. As diretrizes do Nielsen Norman Group apontam que os menus não são o lugar para inventar palavras, usar jargões internos ou categorizações abstratas de alto nível. Prefira termos claros como “Loja”, “Masculino”, “Feminino”, “Promoções” e “Contato” em vez de expressões vagas como “O Universo” ou “Nossa Curadoria”. Se os clientes não conseguem adivinhar o que há em um link, é menos provável que cliquem nele.

Coloque suas coleções mais procuradas no início do menu. Mantenha os nomes curtos para que caibam confortavelmente mesmo nas telas mais estreitas de smartphones sem quebras de linha incômodas.

Verifique o menu no celular e corrija problemas comuns

Avaliar o menu apenas em monitores desktop não basta. A Shopify recomenda verificar se ele é exibido corretamente em computadores e dispositivos móveis antes de publicar sua loja.

Abra sua loja em um celular de verdade. Teste o menu no celular tocando no botão de hambúrguer, abrindo cada pasta aninhada e certificando-se de que os botões são fáceis de tocar com o polegar.

Estudos do Nielsen Norman Group ressaltam que a navegação oculta é menos detectável do que a navegação visível ou parcialmente visível. Em celulares, os temas abrigam os links dentro de um Theme mobile drawer acessível por um ícone de hambúrguer. Como esses links permanecem escondidos até que alguém toque no botão, os clientes precisam fazer um esforço ativo para descobrir seu catálogo. Se essa gaveta for desorganizada, produtos importantes passarão despercebidos. Além disso, alguns temas podem exigir ajustes de CSS para melhorar a usabilidade móvel, especialmente se o espaçamento de toque for muito apertado.

Se o menu apresentar falhas, consulte esta tabela de diagnóstico rápido:

Por que as alterações no menu não aparecem na loja?

Essa é a dificuldade mais comum de quem está montando a primeira loja na Shopify. Você adiciona várias coleções em Content > Menus, clica em Save menu, atualiza a loja virtual e continua vendo os links antigos.

Isso ocorre porque a Shopify separa as listas de menus das configurações de exibição do tema. Sua loja pode ter mais de um menu, mas o tema apenas apresenta o selecionado no editor do tema. Abra o editor do tema, vá até a seção Header e verifique qual menu ela usa. Se estiver apontando para uma lista antiga, troque pelo menu atualizado e salve.

Sublinks ausentes ou não abrem

Se você aninhou itens no painel, mas eles não se desdobram na loja, examine o recuo visual. Em Content > Menus, um subitem precisa estar nitidamente recuado para a direita sob a linha do item pai. Se ele estiver alinhado com a borda esquerda, a Shopify o interpretará como um link comum de nível superior. Se o recuo estiver correto no painel mas o menu não expandir no site, é provável que o seu tema ofereça suporte apenas a menus de um nível.

Um item do menu desapareceu

A Shopify mantém seus links consistentes: a exclusão do recurso vinculado também remove o item de menu correspondente. Se você excluir uma coleção sazonal ou uma página em rascunho no painel, o item de menu que apontava para ela também é removido. Caso um item suma, consulte sua lista de coleções ou páginas para checar se o recurso foi excluído.

Se você perceber que esconder todas as coleções dentro de uma gaveta mobile prejudica a descoberta dos seus produtos, avalie a instalação de uma barra de abas inferior no celular para manter os atalhos indispensáveis sempre à mão.

Trade-offs: quando o menu padrão da Shopify é suficiente

Nem toda loja Shopify necessita de aplicativos externos de navegação ou personalizações de código avançadas. Para muitos lojistas, o sistema nativo da Shopify é suficiente.

O menu nativo da Shopify funciona muito bem quando:

• Sua loja possui um catálogo enxuto, com poucas coleções principais.
• Sua barra principal contém sete ou menos itens de nível superior.
• Seu tema já traz uma gaveta móvel limpa, responsiva e agradável de usar.
• Você não precisa de banners de destaque, imagens de produtos ou painéis em colunas múltiplas nos menus suspensos.

Usar os menus padrão não exige nenhum app extra.

Por outro lado, os menus convencionais impõem barreiras claras:

• Limites de profundidade: O item de nível superior suporta no máximo dois níveis de menus suspensos aninhados, ou seja, três níveis no total.
• Dependência do código do tema: Cada tema tem um design diferente, de modo que os menus podem ser exibidos de maneiras distintas em temas variados, deixando você atrelado às escolhas do desenvolvedor do tema para layout, animações e espaçamento de toque.
• Navegação mobile escondida: A navegação móvel tradicional esconde todas as categorias sob um botão de hambúrguer. Como a navegação oculta é menos visível, os clientes que usam smartphones precisam navegar mais vezes para encontrar o que desejam.

Para saber em que momento o catálogo supera os limites dos temas padrão, confira nossa análise sobre os limites dos menus de temas.

Quando você precisa de mais: Mobile Menu, Mega Menu, Tab Bar com Navi+

Quando seu sortimento de produtos se multiplica ou suas visitas móveis exigem trajetos de compra mais rápidos, uma lista simples de texto em uma gaveta comum pode limitar seus resultados. Nesses casos, layouts especializados de navegação oferecem uma grande evolução.

Ilustração conceitual (Concept illustration): uma gaveta móvel padrão de tema comparada a um menu móvel com barra de abas inferior.

Com o Navi+ Tab Bar & Mega Menu, você pode criar barras de abas fixas no rodapé, mega menus, gavetas móveis enriquecidas, menus de ícones e botões flutuantes por arrastar e soltar, sem mexer no código do tema.

Para quem busca uma gaveta móvel visualmente superior sem mudar a rotina no painel administrativo, o Navi+ pode reutilizar os menus existentes da Shopify. O recurso Mobile Menu pode incorporar um menu existente da Shopify e atualizar sua cópia em um clique pelo botão “Sync now”. Dessa forma, você continua organizando seus links em Content > Menus na Shopify e simplesmente clica em “Sync now” no Navi+ sempre que quiser refletir os novos itens na sua gaveta mobile. A sincronização é manual: o Navi+ não se atualiza sozinho e também não altera os menus em Content > Menus.

Os menus do Navi+ também suportam até três níveis de aninhamento, a mesma profundidade do menu da Shopify; a vantagem está em como o menu aparece e onde fica (gaveta, barra de abas, painel mega), não em mais profundidade. Para identificar o formato ideal para sua loja, consulte nosso guia sobre como escolher o tipo de menu adequado para sua loja.

Quer você precise de uma Tab Bar inferior para manter suas coleções campeãs ao alcance dos dedos no smartphone, de um Mega Menu em colunas no computador ou de um Mobile Menu moderno, existem opções sob medida. Se o menu do seu tema cobre tudo o que você precisa, continue com ele. Se você deseja uma gaveta mobile mais rica, uma barra de abas inferior ou um mega menu sem editar código de tema, pode experimentar o Navi+ Tab Bar & Mega Menu na Shopify App Store.

Checklist de ação antes de publicar

Antes de divulgar sua loja ou lançar anúncios pagos, verifique estes pontos essenciais:

• Testar todos os links: Clique em cada link para confirmar que ele leva a uma coleção, produto ou página ativa e publicada.
• Respeitar o limite de 7 itens: Mantenha sete ou menos itens de nível superior para não sobrecarregar a barra do cabeçalho.
• Utilizar termos familiares: Substitua termos internos por palavras simples que os clientes compreendam de imediato.
• Conferir a seleção no tema: Verifique as configurações do tema em Header e Footer para garantir que o menu selecionado seja exatamente o que você editou em Content > Menus.
• Testar em um celular físico: Verifique se o menu é exibido corretamente no computador e no celular navegando em um smartphone real.
• Criar redirecionamentos de URL: Se você alterou o endereço de uma página ou coleção antiga, lembre-se de que redirecionamentos de URL podem ser usados para direcionar o tráfego de uma página para outra, prevenindo erros 404.
• Salvar no painel administrativo: Certifique-se de que clicou em Save menu em Content > Menus antes de fechar a aba do navegador.

FAQ

Onde ficam os menus no painel da Shopify?

Você pode adicionar, remover, alterar e visualizar seus links e menus em Content > Menus no painel de administração da Shopify. Guias mais antigos indicam Loja virtual > Navegação, mas nas lojas virtuais atuais os menus ficam reunidos sob Content.

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

O item de nível superior pode ter até dois níveis de menus suspensos aninhados abaixo dele. Isso totaliza até três níveis hierárquicos, embora o formato visual dependa do design do seu tema.

Por que as alterações no menu não aparecem na minha loja?

Seu tema pode estar vinculado a outra lista de menu nas seções Header ou Footer. Verifique as configurações do tema nas seções Header e Footer para confirmar que o menu selecionado é o mesmo que você está editando.

Quantos itens de nível superior meu menu deve ter?

A Shopify recomenda usar sete ou menos itens de menu de nível superior para evitar poluição visual na barra de navegação.

É possível adicionar menus suspensos no rodapé?

A Shopify observa que os menus de rodapé só podem exibir itens de nível superior nas configurações habituais. Verifique as opções do seu tema para confirmar como ele lida com links no rodapé.

Por que um item de menu desapareceu?

A exclusão do recurso vinculado também remove o item de menu correspondente. Se você apagar um produto, página ou coleção na Shopify, o sistema removerá automaticamente qualquer link de menu direcionado a esse recurso.

Fontes

• Shopify Help Center: Menus and links — Gerenciamento de menus e links em Content > Menus na Shopify.
• Shopify Help Center: Editing menus — Inserção de itens de menu, reordenação com alças e suporte a emojis.
• Shopify Help Center: Understanding navigation — Menus padrão e vinculação de menus nas configurações do tema.
• Shopify Help Center: Drop-down menus — Limites de aninhamento, comportamento do rodapé, exclusão de links e testes no celular.
• Shopify Help Center: URL redirects — Criação de redirecionamentos de URL quando links são modificados.
• Nielsen Norman Group: Hamburger Menus and Hidden Navigation — Pesquisa sobre a capacidade de descoberta de menus ocultos em dispositivos móveis.
• Nielsen Norman Group: Menu Design — Diretrizes para criação de rótulos claros e objetivos sem jargões internos.
• Shopify App Store: Navi+ Tab Bar & Mega Menu — Aplicativo de navegação para criar barras de abas, mega menus e gavetas móveis.
• Navi+ Blog: Shopify Menu Guide — Arquitetura de navegação e documentação de sincronização para Mobile Menu.