Criar uma barra de menu na Shopify com links Início, Catálogo e Sobre nós para desktop e dispositivos móveis

O primeiro menu de navegação de uma loja virtual precisa de apenas três links estratégicos — Início, Catálogo e Sobre nós. Configurado uma única vez em Conteúdo > Menus, ele aparece com clareza no cabeçalho para computador, no menu lateral para celular e pode ser fixado em uma barra de guias inferior no smartphone para que os compradores sempre o vejam.

Resposta rápida: como criar uma barra de menu com Início, Catálogo e Sobre nós

Crie uma página Sobre nós em Loja virtual > Páginas, acesse Conteúdo > Menus, abra o menu principal e adicione três itens: Início (tipo de link Página inicial), Catálogo (/collections/all ou uma coleção) e Sobre nós (sua página). Salve o menu e o tema passará a exibi-lo no cabeçalho de desktop e na gaveta móvel. Adicione uma barra de guias para celulares.

O processo compreende 5 etapas:

1. Criar a página Sobre nós em Loja virtual > Páginas e marcar como Visível.
2. Abrir Conteúdo > Menus no painel da Shopify e selecionar o menu principal.
3. Adicionar os três links: Início (tipo Página inicial), Catálogo (/collections/all ou coleção) e Sobre nós (sua página).
4. Salvar o menu e confirmar no personalizador de tema que o cabeçalho aponta para esse menu.
5. Testar em smartphones: conferir a gaveta móvel e acrescentar uma barra inferior para acesso contínuo.

O que incluir em uma barra de menu com Início, Catálogo e Sobre nós

Ao inaugurar um e-commerce, não convém complicar a árvore de navegação. Um menu condensado com três links propicia orientação nítida sem dispersar a atenção dos compradores:

• Início: Constitui o ponto de apoio permanente, possibilitando o retorno à vitrine principal de qualquer ponto da loja.
• Catálogo: Concentra todo o mostruário comercial, local em que os clientes conhecem os itens, exploram coleções e realizam compras.
• Sobre nós: Relata a trajetória e a seriedade da sua empresa, entregando um motivo legítimo para que novos clientes depositem confiança em sua loja.

Manter a configuração inaugural em três links assegura perfeita legibilidade em telas de qualquer dimensão. Pesquisas de usabilidade do Nielsen Norman Group comprovam que itens de navegação visíveis entregam máxima eficiência quando reúnem de 4 a 5 alternativas de topo. Preservar três links prioritários permite que as palavras fiquem legíveis em celulares compactos, reservando espaço para adições futuras como Contato ou FAQ.

Etapa 1: Criar a página Sobre nós e definir o destino do Catálogo

Antes de criar a estrutura no menu, conclua as páginas de destino para que cada entrada seja conectada a um endereço funcional já publicado.

Criar a página Sobre nós

No painel de controle da Shopify, vá em Loja virtual > Páginas e clique em Adicionar página. Defina o título como Sobre nós ou Nossa história. Elabore um resumo conciso destacando as origens do negócio, o padrão de qualidade dos produtos e o comprometimento com o cliente. A documentação oficial da Shopify sobre páginas indica que páginas servem para informações estáveis, ao passo que o guia de páginas Sobre nós da Shopify reforça seu papel na conquista da confiança do cliente. Marque o status como Visível e salve. Note que criar uma About page não a vincula espontaneamente ao menu; o vínculo deve ser feito manualmente no editor de menus.

Definir o destino do link Catálogo

Escolha o direcionamento que o Catalog link deve ter em sua loja:

De acordo com a documentação do Centro de Ajuda Shopify sobre a página de catálogo, todas as lojas possuem a URL padrão /collections/all organizada de A a Z por padrão. Para alterar a ordem, crie uma coleção com o identificador (handle) all, ou direcione o link para uma coleção personalizada.

Etapa 2: Construir o menu em Conteúdo > Menus

Com os conteúdos devidamente publicados, configure as opções do menu no painel de controle.

Figura 1: Ilustração conceitual (Concept illustration) — Etapa 2: Construir o menu em Conteúdo > Menus

Adicionar o Início

Em Conteúdo > Menus, abra o menu principal e clique em Adicionar item de menu. Digite o nome Início. No campo Link, escolha Página inicial. Ao selecionar esse tipo de link específico, a Shopify vincula automaticamente a página inicial de sua loja virtual.

Adicionar o Catálogo

Clique em Adicionar item de menu e informe Catálogo (ou Loja). No campo Link, escolha uma coleção na lista ou use a página com todos os produtos em /collections/all. A documentação da Shopify sobre edição de menus adverte que colar URLs brutas manualmente em vez de selecionar na lista pode desconectar os itens, originando páginas de erro 404. Escolha na lista sempre que o destino estiver disponível.

Adicionar o Sobre nós

Clique em Adicionar item de menu e nomeie como Sobre nós. Na seleção de Link, clique na seção Páginas e selecione a página elaborada na Etapa 1.

Organizar e salvar a ordem

Analise a estrutura dos três links na tabela de revisão:

Utilize as alças à esquerda de cada linha para arrastar e posicionar na sequência correta: Início, Catálogo, Sobre nós. O layout público da sua loja obedecerá fielmente a essa organização. Como a Shopify suporta até 200 modificações não salvas, clique com frequência em Salvar menu. Você também pode inserir emojis diretamente nos nomes dos itens para conferir destaque estético.

Etapa 3: Exibir o menu no cabeçalho de desktop

Criar o menu no painel não assegura sua exibição automática na interface do tema; a localização física é definida nas preferências do tema ativo.

Para posicionar o menu no topo do computador, entre em Loja virtual > Temas e clique em Personalizar no tema ativo. No menu lateral à esquerda, selecione a seção Cabeçalho. Escolha ali o menu que acabou de estruturar. Os nomes das configurações variam conforme o tema, então procure a opção de menu nessa seção.

Em telas amplas de computador, assegure-se de que o tema organize os links em uma fileira horizontal aberta, sem recolhê-los sob um ícone. Conclusões de usabilidade do Nielsen Norman Group sobre navegação para computadores atestam que opções expostas estimulam a descoberta de produtos em comparação a menus escondidos. Garanta que o seu Desktop header menu mostre os três itens com boa separação visual.

Como o mesmo menu aparece em dispositivos móveis

Ao passo que monitores de computador dispõem de espaço generoso para exibir links lado a lado, os smartphones possuem dimensões estritas.

Figura 2: Ilustração conceitual (Concept illustration) — Como o mesmo menu aparece em dispositivos móveis

A grande maioria dos temas da Shopify retrai o cabeçalho no celular para dentro de uma gaveta lateral (Menu drawer), cujo acionamento se dá pelo ícone de três traços (hambúrguer). As análises do NN/g comprovam que esconder links reduz a exploração espontânea. Como um menu de apenas três opções ocupa espaço mínimo, viabilizar que os clientes as visualizem e acessem sem a necessidade de abrir um painel prévio melhora substancialmente a fluidez da navegação.

Caso necessite de uma arquitetura diferente em cada tela, confira nosso guia sobre como exibir menus distintos no computador e no celular.

Etapa 4: Adicionar uma barra de guias inferior para celular

Se muitos dos seus compradores navegam pelo celular, o botão hambúrguer mantém seus links escondidos até que toquem nele.

Uma Bottom tab bar ancora as páginas prioritárias no rodapé da tela. A pesquisa do NN/g sobre navegação móvel observa que as barras de guias são persistentes: permanecem visíveis, quer o usuário role a página ou não.

Temas convencionais da Shopify geralmente não vêm com barra de guias inferior embutida, então normalmente é preciso um aplicativo ou código personalizado. Ao estruturar sua barra móvel, replique exatamente os mesmos três links (Início, Catálogo, Sobre nós) com os mesmos destinos configurados no computador. Essa homogeneidade evita que o comprador se sinta desorientado ao alternar de dispositivo.

Adicionar ícones e testar em todos os formatos de tela

Incorporar elementos visuais facilita o reconhecimento das categorias na tela touch, mas sua diagramação requer cuidados técnicos.

Embora emojis possam ser digitados diretamente nos campos do painel, ícones gráficos nítidos em SVG exigem suporte do tema ou aplicativo específico. Recomendações do Nielsen Norman Group apontam para a necessidade de adotar um Icon with label (ícone associado a uma legenda legível), visto que símbolos isolados geram dúvidas. Se fizer uso de um app especializado, veja nosso passo a passo sobre como adicionar um ícone para cada item de menu.

Assegure também que os botões cumpram as normas internacionais de acessibilidade. O critério 2.5.8 das diretrizes W3C WCAG 2.2 determina dimensões mínimas para alvos de toque de 24×24 pixels CSS (com algumas exceções).

Realize estes testes antes de estrear a loja:

1. Monitor de computador: Checar se os três links permanecem alinhados na horizontal sem quebras impróprias.
2. Tela de tablet: Avaliar o comportamento do ponto de transição entre os links abertos e o ícone de hambúrguer.
3. Celular em pé (retrato): Certificar que a gaveta desliza perfeitamente e exibe os três links.
4. Celular deitado (paisagem): Confirmar que a barra não ocupa espaço excessivo do mostruário.
5. Checagem de links: Tocar em cada botão para comprovar o carregamento da página correta.

Problemas comuns e correções

Caso sua barra de navegação manifeste alguma instabilidade, analise estas situações frequentes e consulte nossas orientações para corrigir links quebrados no menu da Shopify:

O link cai em uma página de erro 404

Se Catálogo ou Sobre nós retornar erro 404, o endereço provavelmente foi inserido à mão com grafia incorreta. Abra Conteúdo > Menus e reatribua a página ou coleção diretamente pelos menus suspensos da Shopify.

A página Sobre nós não surge no cabeçalho

Você publicou o texto mas o botão não aparece na loja. Páginas elaboradas em Loja virtual > Páginas não são inseridas por conta própria no menu. É necessário vincular o link em Conteúdo > Menus e constatar se o status está marcado como Visível.

O link do Catálogo exibe produtos fora da ordem pretendida

A página abre normalmente, mas a sequência de produtos diverge da esperada. A página /collections/all da Shopify organiza nativamente por ordem alfabética. Crie uma coleção com identificador all.

O cabeçalho não carrega as alterações recentes

Você salvou o menu no admin mas o site em produção continua com o formato anterior. Em Loja virtual > Temas > Personalizar, entre em Cabeçalho e verifique se o tema está vinculado ao menu correto.

Clicar no elemento principal não redireciona

Se você aninha itens sob Catálogo e clicar em Catálogo não abre página alguma, issodecorre do padrão do tema. Vários temas tratam os itens superiores com menu suspenso como botões para abrir as opções, e não como links funcionais.

Compromissos: quando um menu de três links não é suficiente

Uma estrutura centrada em três links é uma excelente porta de entrada, mas a maturação da loja suscitará adaptações gradativas.

Expandir para além de três links

À medida que o inventário incorpora diversas famílias de produtos, um único acesso de Catálogo pode sobrecarregar a busca. Em tal conjuntura, vale a pena adicionar um submenu sob Catálogo. A navegação da Shopify aceita até 2 níveis de ramificação para menus suspensos. Para catálogos volumosos em telas de desktop, você pode ainda transformar o Catálogo em um mega menu disposto em várias colunas com recursos visuais e banners.

Assista a esta aula oficial da Shopify Academy demonstrando a estruturação de menus suspensos em camadas:

Limites das barras inferiores no celular

Apesar da agilidade proporcionada pela barra de guias, as pesquisas do NN/g ressalvam que ela serve apenas para estruturas com reduzido número de opções. Caso tente colocar mais de 4 ou 5 guias, a barra ficará congestionada. Outro ponto é que a barra fixa consome um trecho vertical constante do display. Se o seu público compra quase que unicamente pelo computador, adotar uma barra móvel pode ser dispensável.

Onde o Navi+ se encaixa

Implantar links para Início, Catálogo e Sobre nós no admin da Shopify é rápido, porém as alternativas padrão dos temas restringem os recursos de apresentação no celular.

Caso queira fixar Início, Catálogo e Sobre nós no pé de cada tela móvel com ícone e legenda em cada aba, o Navi+ Tab Bar viabiliza essa configuração sem mexer no código do tema. O seu menu principal da Shopify segue operando normalmente no cabeçalho do computador, enquanto os mesmos três links permanecem acessíveis na barra inferior do smartphone.

Conforme as operações da sua loja se expandirem, as soluções do Navi+ atendem às suas necessidades:

• Navi+ Mobile Menu: Estruture uma gaveta móvel exclusiva alinhada à identidade da marca, sincronizando o catálogo da Shopify em um toque.
• Navi+ Desktop Mega Menu: Agrupe sortimentos expressivos em diagramações de colunas com imagens publicitárias (suporta até 3 níveis de profundidade).

Para descobrir qual formato de menu se adequa ao seu portfólio, leia nosso panorama sobre como escolher o tipo de menu ideal para sua loja Shopify.

Checklist de ação

Recorra a esta lista de controle antes de colocar seu menu de três links no ar:

• Publicar página Sobre nós: Averiguar se a página está criada e marcada como Visível em Loja virtual > Páginas.
• Definir destino do Catálogo: Escolher entre a URL /collections/all ou coleção com handle all.
• Acessar editor de navegação: Entrar em Conteúdo > Menus e abrir o menu principal.
• Adicionar Início: Marcar o tipo de link Página inicial para definir automaticamente o endereço raiz.
• Adicionar Catálogo: Localizar a coleção desejada diretamente na lista suspensa de coleções.
• Adicionar Sobre nós: Apontar para a página publicada na listagem de Páginas.
• Organizar e salvar: Posicionar na sequência desejada e pressionar Salvar menu.
• Integrar cabeçalho do tema: No personalizador do tema, confirmar que o Cabeçalho aponta para esse menu.
• Inspecionar gaveta móvel: Abrir a visualização no smartphone para checar a estética no drawer.
• (Opcional) Habilitar barra inferior: Ancorar 3 abas identificadas com ícone e texto no rodapé móvel.
• Checar links ativos: Clicar em cada botão no computador e no celular para validar a integridade.

Perguntas frequentes

Para qual endereço o link de Catálogo deve apontar?

As lojas da Shopify disponibilizam a rota /collections/all, reunindo todos os itens visíveis em ordem alfabética. Se desejar uma disposição particular, monte uma coleção com o identificador all ou aponte diretamente para uma coleção de sua escolha.

Por que a página Sobre nós não aparece no menu?

A simples criação de um artigo em Loja virtual > Páginas não o insere automaticamente na barra da loja. Você deve abrir Conteúdo > Menus, acessar seu menu e incluí-lo a partir da listagem de páginas.

O mesmo menu surge automaticamente em celulares?

Sim, quase todos os temas transferem as opções do cabeçalho de desktop para dentro da gaveta lateral acionada pelo ícone de três traços (hambúrguer). Como os estilos variam segundo o tema, sempre faça um teste no celular.

É necessário usar um aplicativo para ter uma barra de guias inferior?

Os temas convencionais da Shopify contam com cabeçalho e gaveta retrátil, mas não trazem barra fixada na base. A sua adição requer um aplicativo ou código sob encomenda, e combina com poucos links essenciais.

Posso incluir ícones nos links de navegação?

Emojis podem ser colados diretamente nas caixas de texto do painel. Para dispor de ícones vetoriais SVG profissionais, é necessário contar com suporte do tema ou aplicativo específico, mantendo sempre uma legenda legível junto ao ícone.

Por que o link do menu resulta em erro 404?

Digitar endereços à mão costuma gerar falhas quando o nome de um produto ou coleção sofre alterações posteriores. Selecionar o destino a partir das listas nativas da Shopify assegura links permanentes e confiáveis.

Fontes

• Shopify Help Center: Editing menus
• Shopify Help Center: Menus and links
• Shopify Help Center: Drop-down menus
• Shopify Help Center: Add and edit pages
• Shopify Help Center: Change catalog page
• Shopify Help Center: About us page
• Nielsen Norman Group: Mobile navigation patterns
• Nielsen Norman Group: Visible navigation on mobile
• Nielsen Norman Group: Desktop navigation not hamburger
• Nielsen Norman Group: Hamburger menus and discoverability
• Nielsen Norman Group: Icon usability
• W3C: WCAG 2.2 Target Size (Minimum)