Como encontrar o seletor CSS de uma seção da página inicial para um link de aba (Shopify)

Resposta rápida

Abra sua página inicial ao vivo, clique com o botão direito na seção e selecione Inspecionar. Localize o contêiner cujo ID comece com shopify-section-, adicione um # na frente e execute $$('#esse-id').length no Console. Se retornar 1, esse seletor é um destino de rolagem válido.

Ao configurar uma barra de abas inferior ou um menu móvel, os lojistas frequentemente se deparam com um campo que solicita um «seletor CSS». Como os navegadores realizam a rolagem procurando nós correspondentes no DOM da loja, informar um seletor impreciso ou duplicado fará com que a aba salte para a posição errada ou permaneça inerte. Testar o seletor com as ferramentas de desenvolvedor assegura uma navegação consistente antes de publicar alterações na loja.

Seletor, ID de seção e âncora: o que o link da aba realmente precisa

Antes de colar códigos nas configurações de navegação, é importante distinguir três termos correlatos: seletor CSS, ID HTML de seção e link de âncora. Aplicativos de menu e configurações de temas empregam essas designações de modos distintos, e o uso de um formato incorreto impedirá o salto da aba.

Um seletor CSS é um padrão adotado por folhas de estilo e scripts para identificar um ou mais elementos HTML. Exemplos comuns incluem #reviews (que visa o elemento com o ID exato reviews) ou .featured-collection (que seleciona qualquer elemento com essa classe). Conforme a especificação do atributo id no MDN Web Docs, um id deve ser exclusivo em todo o documento. A documentação técnica do Section Store reforça esse princípio: um ID pertence a apenas um elemento e, por isso, sempre atinge o ponto certo.

Um link de âncora (anchor link), por outro lado, é uma URL completa ou relativa com um identificador de fragmento, como /#reviews. Os navegadores web interpretam o caractere cerquilha # na barra de endereços e rolam a visualização até o elemento com aquele ID. Se o seu aplicativo de navegação oferece um campo específico para «seletor CSS», ele espera uma expressão de seleção (como #reviews), e não um endereço web completo. Para lojas que configuram âncoras comuns de URL, consulte nosso guia complementar sobre links de âncora para abas móveis.

Conectar os consumidores em dispositivos móveis diretamente às seções principais da página inicial é parte crucial da arquitetura de barra de abas móvel. A tabela a seguir sintetiza as diferenças práticas:

Passo 1: Inspecione a seção na sua loja ao vivo

Para identificar o seletor adequado, visualize sua loja exatamente como um cliente faz, sem recorrer ao personalizador de temas da Shopify. A página ao vivo é a que os clientes realmente carregam, então é o lugar mais seguro para ler a marcação real.

Abra uma nova aba do navegador, acerte o endereço da página inicial ao vivo e role até a seção que sua aba deve alcançar (como avaliações de clientes, perguntas frequentes ou produtos em destaque). Clique com o botão direito no título ou fundo da seção e selecione Inspecionar (Inspect).

Você também pode abrir as ferramentas de desenvolvedor por atalhos de teclado:

• macOS: Pressione Cmd + Option + C (Chrome DevTools Open)
• Windows: Pressione Ctrl + Shift + C (Chrome DevTools Open)

Atalhos de teclado para abrir o inspetor de elementos:
macOS:   Cmd + Option + C
Windows: Ctrl + Shift + C

Localize o contêiner shopify-section

Quando o painel Elementos se abrir, o inspetor destacará a linha de texto ou imagem exata onde você clicou. Para estabelecer um destino confiável, suba na hierarquia do DOM até encontrar o contêiner que envolve toda a seção.

1. No painel Elementos, mova o cursor para cima nas tags pai.
2. Procure um contêiner externo—quase sempre uma tag <div>—que envolva toda a seção.
3. Encontre o atributo id. Nas lojas Shopify, esse ID normalmente começa com shopify-section-.

Como consta na documentação oficial da Shopify sobre o objeto Section, os IDs das seções inseridas via modelos JSON são gerados dinamicamente pela Shopify. Um ID pode se parecer com shopify-section-template--18492048593__featured_collection, mas o seu será diferente, então copie-o da sua própria página.

<!-- Exemplo de contêiner de seção na Shopify -->
<div id="shopify-section-template--18492048593__reviews" class="shopify-section">
  <!-- O conteúdo da seção é renderizado aqui -->
</div>

Transforme a linha em um seletor (# para ID, . para classe)

Assim que localizar o contêiner, converta o atributo HTML em sintaxe CSS válida:

• Se usar o valor do id, coloque uma cerquilha # na frente: #shopify-section-template--18492048593__reviews
• Se usar uma class, coloque um ponto . na frente: .featured-reviews-grid
• Se um elemento possuir várias classes separadas por espaços, conecte-as com pontos: div.shopify-section.reviews-container

O Chrome DevTools também oferece um recurso direto: clique com o botão direito no nó destacado na árvore de elementos, selecione Copy e clique em Copy JS Path (Chrome DevTools DOM). O Chrome copiará uma expressão:

document.querySelector("#shopify-section-template--18492048593__reviews")

Extraia o texto entre as aspas. Esse conteúdo é o seu seletor candidato. Antes de incluí-lo na navegação, é imprescindível confirmar sua exclusividade.

Passo 2: Verifique se o seletor corresponde a exatamente um elemento

Um equívoco comum é supor que qualquer seletor copiado do DevTools funcionará perfeitamente. Contudo, se ele corresponder a várias seções ou a nenhum elemento em telas móveis, a barra de abas falhará.

A orientação técnica da UpCharge enfatiza que os lojistas devem priorizar classes ou IDs exclusivos. Verificar a exclusividade com as ferramentas de desenvolvedor do navegador é rápido.

Pesquise no painel Elementos (Ctrl/Cmd+F)

A verificação inicial mais rápida ocorre diretamente na árvore DOM. Conforme detalhado em Chrome DevTools DOM, você pode pesquisar na árvore DOM por texto, seletor CSS ou expressão XPath.

1. Clique dentro do painel Elementos.
2. Pressione Ctrl + F (Windows) ou Cmd + F (macOS) para exibir a barra de busca inferior.
3. Cole seu seletor candidato com a cerquilha # incluída (por exemplo, #shopify-section-template--18492048593__reviews).
4. Verifique o contador à direita do campo de busca (por exemplo, 1 of 1).

Verificação de busca no painel Elementos:
Expressão: #shopify-section-template--18492048593__reviews
Resultado desejado: 1 of 1

Se o contador marcar 1 of 1, o seletor aponta para um nó exclusivo na página.

Conte as correspondências no Console

Para uma validação precisa sob a ótica dos scripts do navegador, vá para a aba Console no DevTools.

Conforme a API Console Utilities do Chrome DevTools, a função $$(selector) retorna uma matriz com todos os elementos compatíveis com o seletor CSS fornecido. Você também pode utilizar a função nativa document.querySelectorAll(selector) (MDN querySelectorAll).

Digite um dos seguintes comandos no console e tecle Enter:

$$('#shopify-section-template--18492048593__reviews').length

document.querySelectorAll('#shopify-section-template--18492048593__reviews').length

Avalie o valor exibido pelo console:

Repita esse teste em modo de simulação móvel. Clique no ícone Toggle device toolbar no DevTools. Certos temas da Shopify exibem blocos distintos para desktop e mobile, fazendo com que seletores desapareçam ou se dupliquem em telas menores.

Ilustração de conceito: Verificação do número de correspondências no console para certificar que o seletor aponte para um elemento exclusivo.

Passo 3: Escolha um seletor que sobreviva a edições de tema

Embora utilizar o ID de contêiner gerado automaticamente com prefixo shopify-section- sirva para testes rápidos, adotá-lo permanentemente impõe riscos na rotina de manutenção.

Na arquitetura Online Store da Shopify, os IDs das seções inseridas por modelos JSON são criados dinamicamente (Shopify Section Object). A desenvolvedora de temas Fluorescent resume este comportamento: “Shopify dynamically generates ids for sections but these ids are not stable.” (A Shopify gera IDs dinamicamente para as seções, mas esses IDs não são estáveis). Como esses IDs não são estáveis, um link de aba baseado neles pode deixar de funcionar após edições de layout, então verifique de novo após cada mudança.

Evite também caminhos extensos em múltiplos níveis, como div:nth-child(4) > div.grid > div:first-child. Qualquer ajuste estrutural sutil pode inutilizar esses seletores.

A abordagem confiável: criar um bloco de ID com Custom Liquid

Para obter um seletor que permaneça inalterado diante de qualquer edição, atribua seu próprio ID fixo diretamente no editor de temas:

1. No painel administrativo da Shopify, acesse Loja virtual > Temas.
2. Duplique o tema ativo para manter uma cópia de segurança antes das alterações.
3. Clique em Personalizar no tema em edição.
4. No layout da página inicial, clique em Adicionar seção ou Adicionar bloco logo acima da seção desejada.
5. Selecione Custom Liquid (ou HTML personalizado, conforme o tema).
6. Insira uma tag HTML de ancoragem com o ID de sua preferência:

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

Escreva o ID em letras minúsculas e separado por hifens (por exemplo, avaliacoes-clientes, secao-faq ou mais-vendidos). Conforme a referência do atributo id no MDN, esse valor deve ser estritamente único em todo o documento.

O tutorial em vídeo a seguir, desenvolvido pela EcomGraduates, apresenta o processo de inspeção e a configuração de IDs de ancoragem personalizados em temas Shopify:

Casos complexos: sem ID claro, seções aninhadas e caracteres especiais

Certas arquiteturas de lojas podem criar cenários em que contêiners padrão não são óbvios. Tratar cada caso com método evita links rompidos.

Seção sem identificador explícito

Algumas seções personalizadas ou criadas por construtores de páginas não emitem IDs convencionais no contêiner externo. Em vez de concatenar várias classes frágeis—que podem quebrar com atualizações no CSS—, aplique a solução Custom Liquid do Passo 3. Adicionar <div id="seu-id"></div> acima da seção garante um seletor transparente sem mexer nos arquivos liquid do tema.

Seções aninhadas e blocos de aplicativos

Quando o objetivo for alcançar um bloco de app inserido dentro de uma seção nativa (como um widget de avaliações em uma grade de produtos), direcionar o link para o contêiner interno do app pode levar a um ponto inesperado, por isso teste sempre. Mire no contêiner externo shopify-section ou posicione seu bloco de âncora logo acima da seção.

Seções exclusivas para mobile ou desktop

Muitos lojistas configuram banners separados para computador e celular. Se a seção de desktop contiver um ID mas a versão mobile utilizar outro bloco, a aba falhará em smartphones. Inspecione sempre a loja no modo mobile do DevTools e aponte para o elemento renderizado no celular.

Caracteres incomuns e regras de escape em CSS

De acordo com a documentação do MDN sobre querySelector, caso o valor de uma classe ou ID não seja um identificador CSS válido (como nomes iniciados por números ou contendo dois-pontos, pontos ou pontos de interrogação), ele precisa ser escapado com CSS.escape(). Um ID como 123-reviews exigirá escape no CSS padrão.

Para evitar falhas de sintaxe nos aplicativos de menu, evite caracteres especiais. Mantenha os IDs restritos a letras minúsculas, números e hifens, e não use aspas ou parênteses nos campos de link.

Use o seletor como destino de rolagem da aba

Confirmado que o seletor aponta para exatamente um elemento, você pode inseri-lo na configuração da sua barra de abas móvel.

Consulte inicialmente a documentação do seu app de menu ou tema. Verifique se o campo de link requer uma URL com fragmento de âncora (como /#reviews) ou uma expressão direta de seletor CSS (como #reviews).

Se o aplicativo oferecer um campo específico para seletor:

1. Cole o seletor verificado no Passo 2 (por exemplo, #reviews ou #shopify-section-template--custom).
2. Garanta que a sintaxe obedeça às exigências do app.
3. Salve as alterações do menu.

Lembre-se de que os comandos de rolagem atuam sobre o documento ativo. Se um cliente tocar em uma aba configurada com seletor interno enquanto navega em uma página de produto ou coleção, a consulta retornará null (MDN querySelector) e nenhuma rolagem ocorrerá. Teste sempre o atalho a partir da página inicial.

Guarde o registro dos IDs criados nas notas de desenvolvimento da loja, impedindo que outros colaboradores excluam acidentalmente o bloco Custom Liquid durante revisões de layout.

Solução de problemas: a aba não rola, fica sob o cabeçalho ou erra o local

Se a rolagem da aba não funcionar como esperado em dispositivos móveis, avalie os seguintes pontos de checagem:

A aba não realiza nenhum movimento

Abra o console na sua página inicial ao vivo e execute novamente $$('#seu-seletor').length. Se o resultado for 0, o elemento não existe na página, o ID foi alterado com a publicação de um novo tema ou há um erro de digitação. Consultas sem correspondência produzem null e interrompem o fluxo (MDN querySelector).

A aba rola para a seção errada

Se ao clicar na aba a tela saltar para o topo ou rodapé em vez da seção planejada, o seletor coincide com múltiplos elementos. Nesses casos, querySelector elege sempre o primeiro nó encontrado no DOM (MDN querySelector). Use o console para identificar IDs duplicados e substitua-os por um ID Custom Liquid exclusivo.

O título da seção fica escondido sob o cabeçalho fixo

Por padrão, as rotinas de rolagem do navegador alinham o topo do elemento com o limite superior da tela. Se a sua loja conta com um cabeçalho fixo ou sticky, ele encobrirá o título da seção.

Conforme a documentação do MDN sobre scrollIntoView, é viável introduzir um recuo usando a propriedade CSS scroll-margin-top: “To define a custom spacing, use scroll-margin-top or scroll-margin-bottom. This is often useful when there’s a fixed header on the page.” (Para definir um espaçamento personalizado, use scroll-margin-top ou scroll-margin-bottom. Isso costuma ser útil quando há um cabeçalho fixo na página).

Meça a altura do cabeçalho no DevTools e configure o recuo correspondente no CSS personalizado do seu tema:

/* Estabelecer espaçamento sob o cabeçalho móvel fixo */
#reviews {
  /* Replace 80px with your own header height */
  scroll-margin-top: 80px;
}

Um menu gaveta (drawer) aberto obstrui a tela

Se a barra de abas coexiste com um menu lateral deslizante, clicar em uma aba enquanto a gaveta permanece aberta pode gerar sobreposições indesejadas. Seguir as recomendações de um menu gaveta móvel (drawer) assegura que painéis sobrepostos se recolham automaticamente quando um link externo é acionado.

Imagens com carregamento lento (lazy-load) deslocam a parada

Se a página inicial conta com banners pesados acima da seção alvo, o carregamento sob demanda pode recalcular a altura da página após o término da rolagem, deslocando a posição final. Conduza o teste da aba depois que todas as imagens tiverem carregado por completo.

Ilustração de conceito: Compensação de cabeçalhos fixos sobre o título de uma seção mediante a propriedade CSS scroll-margin-top.

Compromissos: quando um seletor não é a ferramenta indicada

Embora rolar para uma seção na mesma página ofereça agilidade na navegação, essa nem sempre é a estrutura mais recomendada para uma loja virtual.

Conteúdo extenso que precisa de página própria

Se o conteúdo para o qual você cria o link é um catálogo extenso de produtos, políticas detalhadas ou respostas de suporte aprofundadas, comprimi-lo em uma única seção da página inicial o torna mais difícil de encontrar e compartilhar. Páginas de coleção ou de políticas independentes têm cada uma sua própria URL, para a qual uma aba pode apontar diretamente em vez de depender de uma rolagem na página.

Sobrecarga e poluição visual na barra de abas

Uma barra de abas inferior foi feita para trocas rápidas entre as grandes áreas da loja com o polegar. Dedicar diversas abas a meras seções da página inicial sobrecarrega a interface e perde o sentido quando o consumidor se aprofunda nos produtos. Como abordamos em nosso guia sobre navegação além do menu hambúrguer, as abas devem ser guardadas para destinos prioritários.

Dependência de tema e esforço de manutenção

Qualquer seletor associado a marcações automáticas do tema demanda nova validação ao trocar de template. Quando as alterações nos menus nativos se tornam difíceis de sustentar, vale a pena analisar os limites dos menus padrão de temas para verificar se um aplicativo dedicado não oferece maior estabilidade no longo prazo.

Onde o Navi+ se encaixa

O Navi+ disponibiliza recursos de navegação profissionais para comerciantes da Shopify por meio dos seus módulos Tab Bar e Mobile Menu. Cada item conta com um campo Link To exclusivo, preparado para suportar endereços convencionais e comandos funcionais de interação.

Para lojas que necessitam de rolagem suave até seções determinadas, o Navi+ suporta a sintaxe scroll:OnPage(#section-id), documentada no centro de ajuda oficial como «Scroll to a section by CSS selector» (tipos de links no Navi+). Esse recurso está disponível nos planos Business e Elite.

Na configuração, informe com exatidão o seletor exclusivo verificado no Passo 2. Como o processamento da rolagem ocorre no DOM do documento em exibição, a seção pretendida precisa estar presente na página aberta pelo usuário. Teste a navegação diretamente em um smartphone partindo da página inicial.

Se você utiliza o Navi+ Tab Bar, cole o seletor que acabou de testar no campo Link To da aba como scroll:OnPage(#seu-id), e em seguida teste no seu celular a partir da página inicial. A relação completa dos tipos de links está acessível no centro de ajuda do Navi+.

Lista de verificação de ações

Adote este roteiro prático em sete passos para homologar o seletor da sua seção:

• Abra a página inicial ao vivo no navegador do computador (fora do editor de temas).
• Clique com o botão direito na seção desejada, escolha Inspecionar e localize o contêiner externo cujo ID começa com shopify-section-.
• Anote o ID do contêiner e transforme-o em seletor com o prefixo #.
• Execute $$('#seu-seletor').length no console do DevTools para certificar que o resultado seja rigorosamente 1.
• Habilite o modo de simulação móvel para confirmar que o seletor segue presente e exclusivo no celular.
• Para garantir durabilidade contínua, adicione um bloco Custom Liquid com <div id="seu-id"></div> acima da seção.
• Cole o seletor verificado nas configurações da aba, adicione scroll-margin-top se o cabeçalho fixo cobrir o título e faça o teste final em um celular real.

Perguntas frequentes (FAQ)

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

Os IDs de seção não são exibidos no painel administrativo padrão da Shopify. Para encontrá-los, acesse sua loja ao vivo no navegador, clique com o botão direito na seção, selecione Inspecionar e consulte o atributo id no contêiner externo shopify-section (Shopify Section Object, MDN querySelectorAll).

Por que o seletor da minha seção parou de funcionar de repente?

A Shopify gera os IDs de seções em modelos JSON de modo dinâmico, e esses dados podem mudar após edições no tema (Shopify Section Object, Fluorescent). Inserir um ID fixo por meio de um bloco Custom Liquid assegura estabilidade irrestrita.

Como ter certeza de que meu seletor atinge apenas um elemento?

Abra a aba Console nas ferramentas de desenvolvedor e digite $$(selector).length ou document.querySelectorAll(selector).length (Chrome DevTools Console Utilities, Chrome DevTools DOM). Um retorno igual a 1 atesta a exclusividade no documento ativo.

Devo utilizar a opção «Copy selector» do DevTools?

O recurso «Copy selector» ou «Copy JS Path» do Chrome auxilia nos testes iniciais, mas as cadeias longas que ele gera quebram com facilidade. É muito mais seguro simplificar o caminho atrelando-o ao ID exclusivo da seção.

O que acontece se o seletor coincidir com várias seções?

Quando um seletor abrange múltiplos elementos, rotinas como querySelector elegem apenas o primeiro item encontrado no DOM (MDN querySelector). Consequentemente, a aba pode rolar para uma seção inesperada posicionada acima.

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

Os navegadores alinham a borda superior do elemento com o limite superior da janela de visualização. Havendo um cabeçalho fixo, este cobrirá o título. Inserir a propriedade CSS scroll-margin-top na seção estabelece o espaçamento visual indispensável (MDN scrollIntoView).

Fontes

• Shopify Developer Documentation: Section Liquid Object — Esclarecimentos sobre a geração dinâmica de IDs de seção em modelos JSON.
• Fluorescent Documentation: Custom Liquid Developer Guide — Análise técnica sobre a instabilidade de IDs automáticos e criação de âncoras personalizadas.
• MDN Web Docs: HTML id global attribute — Regras formais determinando a obrigatoriedade de unicidade do atributo ID no documento.
• MDN Web Docs: Document.querySelector() — Comportamento de primeira correspondência, valores nulos e regras de escape para seletores.
• MDN Web Docs: Document.querySelectorAll() — Mecânica de listas estáticas de nós durante a conferência de seletores.
• MDN Web Docs: Element.scrollIntoView() — Alinhamento no viewport e definições de recuo com scroll-margin-top.
• Chrome for Developers: Chrome DevTools DOM Inspection — Pesquisas na árvore DOM e exportação de expressões de seleção.
• Chrome for Developers: Console Utilities API — Especificação da função utilitária de busca $$(selector).
• Chrome for Developers: Open Chrome DevTools — Relação de atalhos de teclado para acionamento do inspetor.
• Section Store Help: Custom Placement: Finding a CSS Selector — Recomendações sobre exclusividade e identificação de elementos.
• UpCharge Help Center: Selector Settings Guide — Orientações práticas para lojistas na identificação de classes e IDs únicos.
• Navi+ Help Center: Navigation Item Link Types — Especificações oficiais para scroll:OnPage(#section-id) nos planos Business e Elite.