É possível vincular uma aba da barra móvel a uma seção da página inicial na Shopify? (Guia de links âncora)

A resposta curta: sim, com um link âncora

Sim. Atribua um ID à seção da página inicial (por exemplo reviews) e defina o link da aba como /#reviews. Os navegadores rolam até o elemento cujo ID corresponde à parte após #. Use um ID próprio, pois os IDs gerados pela Shopify em templates JSON podem mudar.

Links âncora HTML permitem que abas inferiores saltem para qualquer elemento da página inicial. O navegador localiza o ID no DOM e exibe o bloco na tela. Pelos padrões web, o ID deve ser exclusivo no documento. Como a Shopify gera IDs dinâmicos em modelos JSON, esses códigos mudam com edições. Declarar um ID estável próprio assegura funcionamento contínuo.

A barra de abas móvel é um menu de navegação fixo na parte inferior da tela. Uma sólida arquitetura da barra de abas móvel guia os clientes aos destinos essenciais, como coleções ou avaliações na página inicial.

Como os links âncora funcionam na página inicial da Shopify

O que /#reviews realmente significa

Um destino como /#reviews passa três ordens: a barra / aponta para a página inicial, # delimita o fragmento e reviews indica o ID HTML. O navegador rola a tela para exibir o elemento, conforme a API scrollIntoView(). Usar apenas #reviews funciona na página inicial, mas falha em produtos. A barra assegura o retorno à página principal.

IDs de seção gerados automaticamente versus IDs personalizados

Toda seção da Shopify fica em um div com class="shopify-section" e um id iniciado por shopify-section-. Em seções estáticas em Liquid, o ID é o nome do arquivo sem .liquid. Em templates JSON, a Shopify gera IDs dinâmicos (conf. Liquid Objects: Section), como shopify-section-template--123456__reviews. Usar essa string serve para um teste rápido, mas, se a seção for recriada, o ID pode mudar e quebrar o link. Definir um ID próprio torna o link independente do gerador de IDs da Shopify.

Passo 1: Atribuir um ID estável à seção

Para configurar um salto de âncora, o navegador móvel precisa de um ID exato. Há duas abordagens: inspecionar o código do tema para testes rápidos ou inserir um bloco âncora dedicado para assegurar estabilidade em produção.

Para um teste rápido, inspecione o DOM no computador. As seções ficam em um div com class="shopify-section" e um ID como shopify-section-template--123456__reviews (conf. Section Rendering API). Esse valor serve para testes, mas esse valor pode mudar e quebrar o link.

A abordagem definitiva é definir um ID próprio. Se o seu tema tiver um bloco ou seção de Custom Liquid ou HTML personalizado, posicione-o exatamente acima da seção no editor e insira uma tag âncora leve:

<div id="reviews"></div>

Nomeie a âncora em minúsculas com hífens. O atributo id no MDN Web Docs exige que o ID seja exclusivo no documento. IDs duplicados tornam o salto pouco confiável. Duplique o tema ativo como backup antes de editar.

Figura 1: Ilustração conceitual — ID de seção gerado automaticamente comparado a um ID estável criado via Custom Liquid.

Passo 2: Inserir o link âncora na aba

Barras de abas integradas ao tema (blocos de link personalizado)

Alguns temas incluem uma barra inferior móvel. A documentação do tema Zest descreve seu bloco como um recurso para redirecionar clientes à página vinculada. Essa documentação não menciona âncoras, então teste: no editor, acesse a barra móvel e digite /#reviews.

Barras de abas criadas por aplicativos dedicados

Se você utiliza um aplicativo para gerenciar a barra, consulte a documentação para confirmar se ele aceita âncoras. Alguns aplicativos têm sintaxe própria para rolar até um elemento (por exemplo, scroll:OnPage do Navi+, abordado adiante).

Formate sempre o destino como /#reviews em vez de #reviews se a barra for global. Em uma página de produto, clicar em #reviews não terá efeito. A barra inicial / instrui o navegador a retornar à página inicial antes do salto.

Para entender como os temas contemporâneos da Shopify estruturam a navegação móvel, confira nossa análise do tema Horizon.

Passo 3: Testar no celular (rolagem suave e compensação de cabeçalho fixo)

Testar em simuladores não reproduz a ergonomia real do toque. Valide a aba âncora em um smartphone físico: clicando na página inicial e a partir de uma página de produto.

Por padrão, os navegadores pulam instantaneamente para o destino. Para uma rolagem suave, inclua scroll-behavior: smooth; no CSS. Conforme o MDN Web Docs CSS scroll-behavior, ela define a animação da rolagem na navegação:

html {
  scroll-behavior: smooth;
}

Evite a sobreposição do cabeçalho fixo. Como o navegador alinha o topo com a janela, o cabeçalho cobre o título. Conforme o MDN Web Docs Element: scrollIntoView(), usar scroll-margin-top é o ideal com cabeçalhos fixos. Aplique a regra:

#reviews {
  scroll-margin-top: 80px; /* Adjust according to your sticky header height */
}

Observação: O valor de 80px é ilustrativo — meça a altura real do cabeçalho no celular e ajuste os pixels. Certifique-se também de que a barra inferior não cubra botões no rodapé da seção.

Figura 2: Ilustração conceitual — Título encoberto pelo cabeçalho fixo em comparação com a exibição correta via scroll-margin-top.

Quando o link âncora não funciona

Se o toque na aba móvel não produzir efeito ou parar no local incorreto, avalie estas cinco causas comuns:

1. ID alterado após edição da seção: Se você usou um ID gerado automaticamente (shopify-section-...), reorganizar a seção gerou um novo código. Mude para Custom Liquid.

2. ID duplicado na página: Se vários blocos tiverem o mesmo ID, o navegador só rolará para o primeiro. Assegure-se de que o ID seja exclusivo na página.

3. Widgets de apps terceiros: Seções adicionadas por aplicativos podem não permitir edição de ID. Insira um bloco vazio <div id="reviews"></div> logo acima.

4. Deslocamentos por carregamento tardio: Seções pesadas com imagens em lazy-loading podem alterar a altura. Toque na aba uma segunda vez para ver se o alinhamento se ajusta.

5. Menu gaveta aberto: Se um menu gaveta para celular continuar aberto, ele bloqueará a visão. Garanta que o toque na aba feche o menu aberto.

Link âncora versus página ou coleção dedicada

Embora vincular uma aba a uma seção da página inicial crie um atalho rápido, essa opção não serve para qualquer conteúdo. A escolha entre um salto na página e uma página dedicada exige ponderar a indexação em buscas e a ergonomia no celular.

Links âncora são ideais quando o conteúdo pertence à página inicial — como depoimentos, lookbooks ou FAQs curtas. O cliente confere sinais de confiança instantaneamente sem recarregar a página ou perder o foco.

Contudo, para visibilidade em SEO, os fragmentos são insuficientes. O Google geralmente não suporta fragmentos para indexar conteúdo separado (conf. Diretrizes de URLs da Central da Pesquisa Google). Não espere que /#reviews apareça nos resultados de busca como uma página própria. Para ranquear diretórios completos de avaliações, crie URLs dedicadas (como /pages/reviews ou /collections/all).

Barras móveis foram criadas para alternar entre telas principais. Adicionar várias âncoras cria poluição cognitiva. Limite as âncoras a no máximo uma ou duas abas estratégicas. Para aprofundar, veja nosso guia sobre navegação além do menu hambúrguer.

Onde o Navi+ se encaixa

Caso você estruture sua navegação com a Navi+ Tab Bar para Shopify, a rolagem para seções é suportada nativamente.

No painel do Navi+, cada aba possui um campo Link To. Nos planos Business e Elite, ele aceita a sintaxe scroll:OnPage(#reviews), executando rolagem suave até o seletor CSS indicado.

O Navi+ segue convenções claras: deixar o Link To vazio direciona para a página inicial. Links internos usam caminhos curtos sem o domínio, como /collections/all. O caractere # isolado serve para expandir submenus sem navegar — não o confunda com scroll:OnPage(#reviews).

Mesmo com a sintaxe do aplicativo, as regras básicas continuam indispensáveis: a seção precisa de um ID estável (Passo 1) e o cabeçalho fixo deve ser ajustado com scroll-margin-top no celular (Passo 3). Como scroll:OnPage rola até um elemento da página atual, teste a aba na página inicial e em outras páginas antes de confiar nela.

Se você utiliza a Navi+ Tab Bar, insira scroll:OnPage(#reviews) no campo Link To da aba e teste a interação no seu celular — a relação completa de formatos de link está no centro de ajuda do Navi+. Confira o guia sobre os tipos de links do Navi+ para os detalhes.

Checklist de ações

• Escolha a seção da página inicial para onde os compradores devem saltar.
• Adicione um bloco Custom Liquid vazio (<div id="reviews"></div>) para um ID estável.
• Defina o link da aba como /#your-id (ou a sintaxe própria do aplicativo).
• Inclua html { scroll-behavior: smooth; } no CSS para rolagem suave.
• Aplique scroll-margin-top no CSS para evitar sobreposição do cabeçalho fixo.
• Teste em um celular real tanto a partir da página inicial quanto de uma página de produto.
• Registre o ID nas notas da loja para que edições futuras não apaguem o bloco por engano.

Perguntas frequentes (FAQ)

Onde encontro o ID de uma seção na Shopify?

Cada seção fica em um div com um ID no formato shopify-section-.... Visualize-o clicando com o botão direito em Inspecionar elemento no computador.

Por que meu link âncora parou de funcionar?

A Shopify gera IDs dinâmicos em templates JSON. Se a seção for recriada, o ID muda. Um ID próprio via Custom Liquid assegura estabilidade permanente.

Por que o título da seção fica encoberto pelo cabeçalho após o salto?

O navegador alinha o elemento no topo e o cabeçalho fixo cobre o título. Adicionar scroll-margin-top no CSS cria a compensação necessária.

Posso usar o mesmo ID duas vezes na mesma página?

Não. O padrão HTML exige que o atributo id seja estritamente único em todo o documento. Duplicar IDs gera saltos imprevisíveis.

O Google indexará /#reviews como uma página separada?

Não. O Google geralmente não suporta fragmentos de URL para indexar conteúdo separado. Se você precisa de indexação, crie uma página dedicada.

O Navi+ oferece suporte para vincular uma aba a uma seção?

Sim. Na Navi+ Tab Bar, insira scroll:OnPage(#section-id) no campo Link To para rolagem suave via seletor CSS nos planos Business e Elite.

Fontes

• Shopify Developer Documentation: Liquid Objects: Section
• Shopify Developer Documentation: Section Rendering API
• MDN Web Docs: HTML id attribute
• MDN Web Docs: Element: scrollIntoView() method
• MDN Web Docs: CSS scroll-behavior
• Google Search Central: URL Structure Guidelines
• FoxEcom Zest Theme Documentation: Mobile Navigation Bar
• Navi+ Help Center: Menu Item Link Types