Saltar al contenido principal

Secciones de buscador (desplegables en cascada)

La sección Finder de Vertex es un widget de descubrimiento de productos con desplegables en cascada. Los compradores acotan hasta llegar a la pieza exacta que necesitan eligiendo 3 valores sucesivos — Marca → Modelo → Año, o Marca → Categoría → Capacidad, o Marca de impresora → Modelo → Color — y el buscador los lleva a la colección filtrada.

Vertex incluye cuatro preajustes de demostración — Vertex (industrial / MRO), Throttle (repuestos de automoción), OfficeIT (oficina y TI) e Inkline (suministros de impresión). Hay tres tipos de buscador, y la sección Finder viene cableada por defecto en tres de los cuatro preajustes:

  • Throttle (repuestos de automoción) — Marca / Modelo / Año
  • OfficeIT (oficina y TI) — Marca / Categoría / Capacidad
  • Inkline (suministros de impresión) — Marca de impresora / Modelo / Color

El preajuste Vertex (industrial) se entrega sin buscador — en su lugar se apoya en los filtros facetados de colección y la búsqueda predictiva.

Buscador Marca/Modelo/Año sobre el hero (preajuste Throttle)

Una sección, tres tipos de buscador

No instala una sección distinta para cada industria — es la misma sección Finder en cada preajuste. Cada preajuste solo rellena sus propias etiquetas de desplegable y listas de opciones (Marca/Modelo/Año, Marca/Categoría/Capacidad o Marca de impresora/Modelo/Color). Cambiar la cascada a otra vertical es cuestión de editar esas etiquetas y opciones.

Buscador Marca/Modelo/Año​

El buscador es una cascada de 3 niveles. Elija el Nivel 1 → las opciones del Nivel 2 se rellenan según la elección del Nivel 1 → elija el Nivel 2 → las opciones del Nivel 3 se rellenan → haga clic en Enviar → vaya a la colección filtrada.

Abra el admin de Shopify → Online Store → Themes → Customize. En el editor de páginas, haga clic en Add section y elija Finder.

Ajustes​

  • Heading — "Encuentre piezas para su vehículo" o "Encuentre tóner para su impresora".
  • Intro text — Mensaje breve y tranquilizador — "Seleccione la marca, el modelo y el año para ver las piezas compatibles.".
  • Drop-down 1 / 2 / 3 label — La etiqueta visible de cada nivel — p. ej. Marca, Modelo, Año. Cambie estas etiquetas (más los bloques de opciones de abajo) para convertir la misma sección en cualquier cascada que desee.
  • Query param name (por desplegable) — El parámetro de URL que cada nivel añade al enlace de búsqueda/colección (p. ej. make, model, year). Por defecto q1 / q2 / q3 si se deja en blanco.
  • Submit button label — "Encontrar piezas" o "Encontrar tóner".
  • Form action URL — A dónde se envía el formulario. Por defecto /search; apúntelo a una URL de colección (p. ej. /collections/all) para filtrar una colección en su lugar.
  • Color scheme — Desplegable estándar de esquema de color (Claro / Banda de acento / Oscuro).
  • Vertical padding — Cuánto espacio respira la franja del buscador por encima y por debajo.

Las opciones de cada desplegable provienen de bloques de opción que añade a la sección — un bloque por opción. Una opción del Desplegable 2 / 3 puede establecer un Parent value para que solo aparezca una vez seleccionada la elección padre correspondiente, que es cómo se acota la cascada.

Los tres tipos de buscador​

1. Marca / Modelo / Año — preajuste Throttle​

Para distribuidores de repuestos de automoción con catálogos basados en compatibilidad (fitment).

Cascada:

  1. Marca — Ford, Toyota, Chevrolet, BMW, etc.
  2. Modelo — se rellena a partir de la Marca elegida (F-150, Camry, Silverado, 3 Series)
  3. Año — se rellena a partir de la Marca y el Modelo elegidos (2018, 2019, 2020, ...)

Envío: lleva al comprador a la colección correspondiente, filtrada a los productos etiquetados con ese vehículo.

Configuración de datos: añada las opciones directamente a la sección como bloques de opción en el editor de tema:

  • Un bloque de opción del Desplegable 1 por cada Marca (Ford, Toyota, Chevrolet…)
  • Un bloque de opción del Desplegable 2 por cada Modelo, con su Parent value establecido a la Marca a la que pertenece
  • Un bloque de opción del Desplegable 3 por cada Año, con su Parent value establecido al Modelo al que pertenece

Después etiquete sus colecciones para que la URL enviada coincida (Vertex usa el filtrado nativo basado en etiquetas de Shopify).

2. Marca / Categoría / Capacidad — preajuste OfficeIT​

Para distribuidores de oficina, TI y electrónica.

Cascada:

  1. Marca — HP, Dell, Lenovo, Apple, Cisco
  2. Categoría — se rellena a partir de la Marca elegida (portátiles, monitores, routers, impresoras)
  3. Capacidad — se rellena a partir de la Marca y la Categoría elegidas (8 GB / 16 GB / 32 GB · 24" / 27" / 32" · etc.)

Envío: lleva al comprador a la colección de marca-y-categoría correspondiente.

Configuración de datos: añada las opciones como bloques de opción en el editor de tema — una opción del Desplegable 1 por Marca, una opción del Desplegable 2 por Categoría (con su Parent value establecido a la Marca) y una opción del Desplegable 3 por Capacidad (con su Parent value establecido a la Categoría).

3. Marca de impresora / Modelo / Color — variante de suministros de impresión​

Para distribuidores de suministros de impresión que venden tóner, tinta y consumibles que deben coincidir con una impresora específica.

Cascada:

  1. Marca de impresora — HP, Canon, Brother, Epson, Xerox, etc.
  2. Modelo de impresora — se rellena a partir de la Marca elegida (LaserJet Pro M404, PIXMA TR8620, etc.)
  3. Color — se rellena a partir de la Marca y el Modelo elegidos (Negro, Cian, Magenta, Amarillo o Multipack)

Envío: lleva al comprador a la colección correspondiente, filtrada a los cartuchos compatibles con esa impresora.

Configuración de datos: añada las opciones como bloques de opción en el editor de tema — una opción del Desplegable 1 por Marca de impresora, una opción del Desplegable 2 por Modelo de impresora (con su Parent value establecido a la Marca) y una opción del Desplegable 3 por Color (con su Parent value establecido al Modelo).

Esta cascada viene preconfigurada en el preajuste de suministros de impresión Inkline, así que un storefront de suministros de impresión obtiene un buscador de tóner llave en mano de fábrica — solo cambie las opciones de demostración por su propia gama de impresoras.

Cómo funciona la cascada​

Las opciones del buscador provienen de los bloques de opción que añade a la sección, así que todo está integrado en la página. A partir de ahí:

  1. Al cargar la página, las opciones del Nivel 1 se rellenan a partir de sus bloques de opción del Desplegable 1
  2. Cuando el comprador selecciona el Nivel 1, el Nivel 2 se acota a las opciones cuyo Parent value coincide con la elección del Nivel 1
  3. Cuando el comprador selecciona el Nivel 2, el Nivel 3 se acota a las opciones cuyo Parent value coincide con la elección del Nivel 2
  4. Al enviar, el comprador es llevado a los resultados de búsqueda o a la colección, con cada nivel añadido como su parámetro de consulta

Las opciones están integradas en la página cuando se carga — así que no hay petición de red adicional y la cascada es instantánea.

Funciona sin JavaScript

Las opciones del primer nivel están integradas directamente en la página, así que el buscador sigue funcionando incluso si el navegador del comprador tiene JavaScript deshabilitado — puede enviar el primer nivel por sí solo y aterrizar en los resultados filtrados. Esta es la misma filosofía de mejora progresiva que verá en todo Vertex.

Configuración de los datos del buscador​

Para cada tipo de buscador, necesita:

  1. Establecer las tres etiquetas de desplegable según su cascada (p. ej. Marca / Modelo / Año), y el Query param name de cada nivel si quiere URLs limpias.
  2. Añadir un bloque de opción por opción — una opción del Desplegable 1 por cada valor de nivel superior, luego opciones del Desplegable 2 y 3 con su Parent value establecido para que cada nivel acote el siguiente.
  3. Apuntar la Form action URL a /search (predeterminado) o a una colección (p. ej. /collections/all).
  4. Etiquetar sus colecciones para que la URL filtrada coincida. Vertex usa el filtrado nativo basado en etiquetas de Shopify, así que una colección de "Piezas Ford F-150" debería tener la etiqueta vehicle:ford-f-150.

→ Los tres preajustes de demostración (Throttle, OfficeIT, Inkline) ya incluyen un buscador completamente poblado — duplique uno y cambie sus propias etiquetas y opciones.

Dónde ubicar el buscador​

PosiciónRecomendado para
Parte superior de la página de inicio, inmediatamente debajo del heroVerticales donde el buscador es la propuesta de valor de la página de inicio (repuestos de automoción, suministros de impresión)
Dentro del hero (como panel lateral)Verticales donde la imagen hero transmite la propuesta de valor y el buscador es un CTA paralelo
Debajo de la colección destacadaVerticales donde el buscador es una de varias rutas de navegación
En una página dedicada al buscadorVerticales donde el buscador es el método principal de navegación — enlace desde el menú secundario del encabezado

Los preajustes Throttle e Inkline colocan el buscador debajo del hero. El preajuste OfficeIT usa una variante más pequeña dentro del hero.

El buscador y B2B​

Para compradores B2B con sesión iniciada, el buscador los lleva a la colección filtrada — y esa colección respeta el alcance del catálogo B2B del comprador. Así, una búsqueda de Ford F-150 muestra únicamente las piezas del F-150 que están en el catálogo del comprador, con los escalones de precios por volumen del comprador aplicados.

El propio buscador no filtra por catálogo — ese filtrado ocurre en la página de colección una vez que aterriza. Esta es la separación correcta: el buscador acota hasta la familia de producto correcta; la colección muestra únicamente lo que el comprador puede comprar al precio correcto.

Consejos para la calidad de los datos del buscador​

  • Use una capitalización coherente en sus entradas (siempre Ford, nunca FORD ni ford) — la cascada compara cadenas exactamente
  • Evite espacios en blanco al final en los valores de las entradas — incluso un espacio invisible romperá la cascada
  • Rellene los 3 niveles para cada entrada — las entradas incompletas rompen la cascada para todos los que vienen detrás del nivel ausente
  • Establezca un valor predeterminado sensato para Target collection — los compradores que envían una selección parcial (o cuya selección no tiene coincidencias) aterrizan ahí

Qué sigue​