Pular para o conteúdo principal

Seções de localizador (dropdowns em cascata)

A seção Finder do Vertex é um widget de descoberta de produtos com dropdowns em cascata. Os compradores afinam até a peça exata de que precisam escolhendo 3 valores sucessivos — Marca → Modelo → Ano, ou Marca → Categoria → Capacidade, ou Marca de Impressora → Modelo → Cor — e o localizador os leva à coleção filtrada.

O Vertex traz quatro presets de demonstração — Vertex (industrial / MRO), Throttle (autopeças), OfficeIT (escritório e TI) e Inkline (suprimentos de impressão). Há três tipos de localizador, e a seção Finder vem conectada por padrão em três dos quatro presets:

  • Throttle (autopeças) — Marca / Modelo / Ano
  • OfficeIT (escritório e TI) — Marca / Categoria / Capacidade
  • Inkline (suprimentos de impressão) — Marca de Impressora / Modelo / Cor

O preset Vertex (industrial) é entregue sem localizador — em vez disso, ele se apoia nos filtros de coleção facetados e na pesquisa preditiva.

Localizador Marca/Modelo/Ano acima do hero (preset Throttle)

Uma seção, três tipos de localizador

Você não instala uma seção diferente para cada setor — é a mesma seção Finder em cada preset. Cada preset apenas preenche seus próprios rótulos de dropdown e listas de opções (Marca/Modelo/Ano, Marca/Categoria/Capacidade ou Marca de Impressora/Modelo/Cor). Mudar a cascata para outra vertical é uma questão de editar esses rótulos e opções.

Localizador Marca/Modelo/Ano​

O localizador é uma cascata de 3 níveis. Escolha o Nível 1 → as opções do Nível 2 são preenchidas com base na escolha do Nível 1 → escolha o Nível 2 → as opções do Nível 3 são preenchidas → clique em Enviar → vá para a coleção filtrada.

Abra o admin do Shopify → Online Store → Themes → Customize. No editor de página, clique em Add section e escolha Finder.

Configurações​

  • Heading — "Encontre peças para o seu veículo" ou "Encontre toner para a sua impressora".
  • Intro text — Breve reasseguramento — "Selecione a marca, o modelo e o ano para ver as peças compatíveis.".
  • Drop-down 1 / 2 / 3 label — O rótulo visível de cada nível — ex.: Marca, Modelo, Ano. Altere esses rótulos (além dos blocos de opções abaixo) para transformar a mesma seção em qualquer cascata que quiser.
  • Query param name (por dropdown) — O parâmetro de URL que cada nível adiciona ao link de pesquisa/coleção (ex.: make, model, year). O padrão é q1 / q2 / q3 se deixado em branco.
  • Submit button label — "Encontrar peças" ou "Encontrar toner".
  • Form action URL — Para onde o formulário envia. O padrão é /search; aponte-o para uma URL de coleção (ex.: /collections/all) para filtrar uma coleção em vez disso.
  • Color scheme — Dropdown padrão de esquema de cores (Claro / Faixa de destaque / Escuro).
  • Vertical padding — Quanto espaço de respiro a faixa do localizador recebe acima e abaixo.

As escolhas de cada dropdown vêm de blocos de opção que você adiciona à seção — um bloco por escolha. Uma opção do Dropdown 2 / 3 pode definir um Parent value para que ela só apareça depois que a escolha pai correspondente for selecionada, que é como a cascata afina.

Os três tipos de localizador​

1. Marca / Modelo / Ano — preset Throttle​

Para distribuidores de autopeças com catálogos orientados por compatibilidade (fitment).

Cascata:

  1. Marca — Ford, Toyota, Chevrolet, BMW, etc.
  2. Modelo — preenchido a partir da Marca escolhida (F-150, Camry, Silverado, Série 3)
  3. Ano — preenchido a partir da Marca e do Modelo escolhidos (2018, 2019, 2020, ...)

Enviar: leva o comprador à coleção correspondente, filtrada para os produtos marcados com aquele veículo.

Configuração de dados: adicione as escolhas diretamente à seção como blocos de opção no editor de tema:

  • Um bloco de opção do Dropdown 1 para cada Marca (Ford, Toyota, Chevrolet…)
  • Um bloco de opção do Dropdown 2 para cada Modelo, com seu Parent value definido para a Marca à qual pertence
  • Um bloco de opção do Dropdown 3 para cada Ano, com seu Parent value definido para o Modelo ao qual pertence

Depois marque suas coleções para que a URL enviada corresponda (o Vertex usa a filtragem nativa do Shopify baseada em tags).

2. Marca / Categoria / Capacidade — preset OfficeIT​

Para distribuidores de escritório, TI e eletrônica.

Cascata:

  1. Marca — HP, Dell, Lenovo, Apple, Cisco
  2. Categoria — preenchida a partir da Marca escolhida (Notebooks, Monitores, Roteadores, Impressoras)
  3. Capacidade — preenchida a partir da Marca e da Categoria escolhidas (8 GB / 16 GB / 32 GB · 24" / 27" / 32" · etc.)

Enviar: leva o comprador à coleção de marca-e-categoria correspondente.

Configuração de dados: adicione as escolhas como blocos de opção no editor de tema — uma opção do Dropdown 1 por Marca, uma opção do Dropdown 2 por Categoria (com seu Parent value definido para a Marca) e uma opção do Dropdown 3 por Capacidade (com seu Parent value definido para a Categoria).

3. Marca de Impressora / Modelo / Cor — variante de suprimentos de impressão​

Para distribuidores de suprimentos de impressão que vendem toner, tinta e consumíveis que precisam corresponder a uma impressora específica.

Cascata:

  1. Marca de Impressora — HP, Canon, Brother, Epson, Xerox, etc.
  2. Modelo de Impressora — preenchido a partir da Marca escolhida (LaserJet Pro M404, PIXMA TR8620, etc.)
  3. Cor — preenchida a partir da Marca e do Modelo escolhidos (Preto, Ciano, Magenta, Amarelo ou Multipack)

Enviar: leva o comprador à coleção correspondente, filtrada para os cartuchos compatíveis com aquela impressora.

Configuração de dados: adicione as escolhas como blocos de opção no editor de tema — uma opção do Dropdown 1 por Marca de Impressora, uma opção do Dropdown 2 por Modelo de Impressora (com seu Parent value definido para a Marca) e uma opção do Dropdown 3 por Cor (com seu Parent value definido para o Modelo).

Esta cascata vem pré-configurada no preset de suprimentos de impressão Inkline, então uma loja de suprimentos de impressão obtém um localizador de toner pronto para uso de fábrica — basta trocar as opções de demonstração pela sua própria linha de impressoras.

Como a cascata funciona​

As escolhas do localizador vêm dos blocos de opção que você adiciona à seção, então tudo está integrado na página. A partir daí:

  1. No carregamento da página, as opções do Nível 1 são preenchidas a partir de seus blocos de opção do Dropdown 1
  2. Quando o comprador seleciona o Nível 1, o Nível 2 afina para as opções cujo Parent value corresponde à escolha do Nível 1
  3. Quando o comprador seleciona o Nível 2, o Nível 3 afina para as opções cujo Parent value corresponde à escolha do Nível 2
  4. Ao enviar, o comprador é levado aos resultados de pesquisa ou à coleção, com cada nível adicionado como seu parâmetro de consulta

As opções estão integradas na página quando ela carrega — então não há requisição de rede adicional e a cascata é instantânea.

Funciona sem JavaScript

As opções do primeiro nível estão integradas diretamente na página, então o localizador continua funcionando mesmo se o navegador do comprador tiver o JavaScript desabilitado — ele pode enviar o primeiro nível sozinho e cair nos resultados filtrados. Esta é a mesma filosofia de aprimoramento progressivo que você verá em todo o Vertex.

Configurando os dados do seu localizador​

Para cada tipo de localizador, você precisa:

  1. Definir os três rótulos de dropdown de acordo com sua cascata (ex.: Marca / Modelo / Ano), e o Query param name de cada nível se quiser URLs limpas.
  2. Adicionar um bloco de opção por escolha — uma opção do Dropdown 1 por valor de nível superior, depois opções dos Dropdowns 2 e 3 com seu Parent value definido para que cada nível afine o seguinte.
  3. Apontar a Form action URL para /search (padrão) ou uma coleção (ex.: /collections/all).
  4. Marcar suas coleções para que a URL filtrada corresponda. O Vertex usa a filtragem nativa do Shopify baseada em tags, então uma coleção de "Peças Ford F-150" deve ter a tag vehicle:ford-f-150.

→ Os três presets de demonstração (Throttle, OfficeIT, Inkline) já vêm com um localizador totalmente preenchido — duplique um e troque pelos seus próprios rótulos e opções.

Onde colocar o localizador​

PosiçãoIdeal para
Topo da página inicial, imediatamente abaixo do heroVerticais onde o localizador é a proposta de valor da página inicial (autopeças, suprimentos de impressão)
Dentro do hero (como painel lateral)Verticais onde a imagem hero carrega a proposta de valor e o localizador é um CTA paralelo
Abaixo da coleção em destaqueVerticais onde o localizador é um de vários caminhos de navegação
Em uma página dedicada ao localizadorVerticais onde o localizador é o método principal de navegação — vincule a ele a partir do menu secundário do cabeçalho

Os presets Throttle e Inkline colocam o localizador abaixo do hero. O preset OfficeIT usa uma variante menor dentro do hero.

B2B e o localizador​

Para compradores B2B logados, o localizador os leva à coleção filtrada — e essa coleção respeita o escopo do catálogo B2B do comprador. Assim, uma pesquisa de Ford F-150 mostra apenas as peças do F-150 que estão no catálogo do comprador, com as faixas de preços por volume do comprador aplicadas.

O próprio localizador não filtra por catálogo — essa filtragem acontece na página de coleção depois que ele cai lá. Esta é a separação correta: o localizador afina até a família de produto certa; a coleção mostra apenas o que o comprador pode comprar pelo preço certo.

Dicas para a qualidade dos dados do localizador​

  • Use capitalização consistente em suas entradas (sempre Ford, nunca FORD ou ford) — a cascata corresponde a strings exatamente
  • Evite espaços em branco no final nos valores das entradas — mesmo espaços invisíveis quebrarão a cascata
  • Preencha os 3 níveis para cada entrada — entradas incompletas quebram a cascata para todos os que vêm abaixo do nível ausente
  • Defina um padrão sensato para a coleção de destino — compradores que enviam uma seleção parcial (ou cuja seleção não tem correspondências) caem lá

O que vem a seguir​