Aller au contenu principal

Sections de recherche (listes déroulantes en cascade)

La section Finder de Vertex est un widget de découverte de produits par listes déroulantes en cascade. Les acheteurs affinent jusqu'à la pièce exacte dont ils ont besoin en choisissant 3 valeurs successives — Marque → Modèle → Année, ou Marque → Catégorie → Capacité, ou Marque d'imprimante → Modèle → Couleur — et la recherche les redirige vers la collection filtrée.

Vertex propose quatre préréglages de démonstration — Vertex (industriel / MRO), Throttle (pièces auto), OfficeIT (bureau et IT) et Inkline (fournitures d'impression). Il existe trois types de recherche, et la section Finder est câblée par défaut dans trois des quatre préréglages :

  • Throttle (pièces auto) — Marque / Modèle / Année
  • OfficeIT (bureau et IT) — Marque / Catégorie / Capacité
  • Inkline (fournitures d'impression) — Marque d'imprimante / Modèle / Couleur

Le préréglage Vertex (industriel) est livré sans recherche — il s'appuie plutôt sur les filtres de collection à facettes et la recherche prédictive.

Recherche Marque/Modèle/Année au-dessus du hero (préréglage Throttle)

Une section, trois types de recherche

Vous n'installez pas une section différente pour chaque secteur — c'est la même section Finder dans chaque préréglage. Chaque préréglage remplit simplement ses propres libellés de listes déroulantes et ses listes d'options (Marque/Modèle/Année, Marque/Catégorie/Capacité ou Marque d'imprimante/Modèle/Couleur). Faire basculer la cascade vers une autre verticale est une affaire d'édition de ces libellés et de ces options.

Recherche Marque/Modèle/Année​

La recherche est une cascade à 3 niveaux. Choisissez le niveau 1 → les options du niveau 2 se peuplent selon le choix du niveau 1 → choisissez le niveau 2 → les options du niveau 3 se peuplent → cliquez sur Soumettre → redirection vers la collection filtrée.

Ouvrez l'admin Shopify → Online Store → Themes → Customize. Dans l'éditeur de page, cliquez sur Add section et choisissez Finder.

Paramètres​

  • Heading — « Trouvez les pièces pour votre véhicule » ou « Trouvez le toner pour votre imprimante ».
  • Intro text — Brève réassurance — « Sélectionnez votre marque, modèle et année pour voir les pièces compatibles. ».
  • Drop-down 1 / 2 / 3 label — Le libellé visible de chaque niveau — p. ex. Marque, Modèle, Année. Modifiez ces libellés (ainsi que les blocs d'options ci-dessous) pour transformer la même section en n'importe quelle cascade de votre choix.
  • Query param name (par liste déroulante) — Le paramètre d'URL que chaque niveau ajoute au lien de recherche/collection (p. ex. make, model, year). Par défaut q1 / q2 / q3 s'il est laissé vide.
  • Submit button label — « Trouver des pièces » ou « Trouver du toner ».
  • Form action URL — Là où le formulaire est soumis. Par défaut /search ; pointez-le vers une URL de collection (p. ex. /collections/all) pour filtrer une collection à la place.
  • Color scheme — Liste déroulante standard de palette de couleurs (Clair / Bande d'accent / Sombre).
  • Vertical padding — L'espace de respiration que la bande de recherche obtient au-dessus et en dessous.

Les choix de chaque liste déroulante proviennent de blocs d'options que vous ajoutez à la section — un bloc par choix. Une option de la liste déroulante 2 / 3 peut définir une Parent value afin de n'apparaître qu'une fois le choix parent correspondant sélectionné, ce qui est la manière dont la cascade s'affine.

Les trois types de recherche​

1. Marque / Modèle / Année — préréglage Throttle​

Pour les distributeurs de pièces auto dont les catalogues sont pilotés par la compatibilité véhicule.

Cascade :

  1. Marque — Ford, Toyota, Chevrolet, BMW, etc.
  2. Modèle — peuplé selon la marque choisie (F-150, Camry, Silverado, Série 3)
  3. Année — peuplée selon la marque et le modèle choisis (2018, 2019, 2020, ...)

Soumettre : redirige l'acheteur vers la collection correspondante, filtrée sur les produits étiquetés avec ce véhicule.

Configuration des données : ajoutez les choix directement à la section sous forme de blocs d'options dans l'éditeur de thème :

  • Un bloc d'option de la liste déroulante 1 par marque (Ford, Toyota, Chevrolet…)
  • Un bloc d'option de la liste déroulante 2 par modèle, avec sa Parent value définie sur la marque à laquelle il appartient
  • Un bloc d'option de la liste déroulante 3 par année, avec sa Parent value définie sur le modèle auquel elle appartient

Étiquetez ensuite vos collections afin que l'URL soumise corresponde (Vertex utilise le filtrage natif de Shopify basé sur les étiquettes).

2. Marque / Catégorie / Capacité — préréglage OfficeIT​

Pour les distributeurs de bureau, IT et électronique.

Cascade :

  1. Marque — HP, Dell, Lenovo, Apple, Cisco
  2. Catégorie — peuplée selon la marque choisie (Ordinateurs portables, Moniteurs, Routeurs, Imprimantes)
  3. Capacité — peuplée selon la marque et la catégorie choisies (8 Go / 16 Go / 32 Go · 24" / 27" / 32" · etc.)

Soumettre : redirige l'acheteur vers la collection marque-et-catégorie correspondante.

Configuration des données : ajoutez les choix sous forme de blocs d'options dans l'éditeur de thème — une option de la liste déroulante 1 par marque, une option de la liste déroulante 2 par catégorie (avec sa Parent value définie sur la marque) et une option de la liste déroulante 3 par capacité (avec sa Parent value définie sur la catégorie).

3. Marque d'imprimante / Modèle / Couleur — variante fournitures d'impression​

Pour les distributeurs de fournitures d'impression vendant du toner, de l'encre et des consommables qui doivent correspondre à une imprimante spécifique.

Cascade :

  1. Marque d'imprimante — HP, Canon, Brother, Epson, Xerox, etc.
  2. Modèle d'imprimante — peuplé selon la marque choisie (LaserJet Pro M404, PIXMA TR8620, etc.)
  3. Couleur — peuplée selon la marque et le modèle choisis (Noir, Cyan, Magenta, Jaune ou Multipack)

Soumettre : redirige l'acheteur vers la collection correspondante, filtrée sur les cartouches compatibles avec cette imprimante.

Configuration des données : ajoutez les choix sous forme de blocs d'options dans l'éditeur de thème — une option de la liste déroulante 1 par marque d'imprimante, une option de la liste déroulante 2 par modèle d'imprimante (avec sa Parent value définie sur la marque) et une option de la liste déroulante 3 par couleur (avec sa Parent value définie sur le modèle).

Cette cascade est livrée préconfigurée sur le préréglage de fournitures d'impression Inkline, de sorte qu'une vitrine de fournitures d'impression obtient une recherche de toner clé en main dès le départ — il suffit de remplacer les options de démonstration par votre propre gamme d'imprimantes.

Comment la cascade fonctionne​

Les choix de la recherche proviennent des blocs d'options que vous ajoutez à la section, de sorte que tout est intégré à la page. À partir de là :

  1. Au chargement de la page, les options du niveau 1 sont peuplées depuis ses blocs d'options de la liste déroulante 1
  2. Lorsque l'acheteur sélectionne le niveau 1, le niveau 2 s'affine aux options dont la Parent value correspond au choix du niveau 1
  3. Lorsque l'acheteur sélectionne le niveau 2, le niveau 3 s'affine aux options dont la Parent value correspond au choix du niveau 2
  4. À la soumission, l'acheteur est redirigé vers les résultats de recherche ou la collection, chaque niveau étant ajouté comme son paramètre de requête

Les options sont intégrées à la page au moment de son chargement — il n'y a donc pas de requête réseau supplémentaire et la cascade est instantanée.

Fonctionne sans JavaScript

Les options du premier niveau sont intégrées directement à la page, de sorte que la recherche fonctionne même si le navigateur de l'acheteur a JavaScript désactivé — il peut soumettre le premier niveau seul et atterrir sur les résultats filtrés. C'est la même philosophie d'amélioration progressive que vous retrouverez tout au long de Vertex.

Configurer les données de votre recherche​

Pour chaque type de recherche, vous devez :

  1. Définir les trois libellés de listes déroulantes selon votre cascade (p. ex. Marque / Modèle / Année), et le Query param name de chaque niveau si vous voulez des URL propres.
  2. Ajouter un bloc d'option par choix — une option de la liste déroulante 1 par valeur de niveau supérieur, puis des options des listes déroulantes 2 et 3 avec leur Parent value définie pour que chaque niveau affine le suivant.
  3. Pointer la Form action URL vers /search (par défaut) ou une collection (p. ex. /collections/all).
  4. Étiqueter vos collections afin que l'URL filtrée corresponde. Vertex utilise le filtrage natif de Shopify basé sur les étiquettes, de sorte qu'une collection « Pièces Ford F-150 » doit avoir l'étiquette vehicle:ford-f-150.

→ Les trois préréglages de démonstration (Throttle, OfficeIT, Inkline) sont déjà livrés avec une recherche entièrement peuplée — dupliquez-en un et remplacez par vos propres libellés et options.

Où placer la recherche​

PositionIdéal pour
En haut de la page d'accueil, immédiatement sous le heroVerticales où la recherche est la proposition de valeur de la page d'accueil (pièces auto, fournitures d'impression)
Dans le hero (en tant que panneau latéral)Verticales où l'image hero porte la proposition de valeur et où la recherche est un CTA parallèle
Sous la collection mise en avantVerticales où la recherche est l'un des nombreux chemins de navigation
Sur une page dédiée à la rechercheVerticales où la recherche est la méthode de navigation principale — liez-y depuis le menu secondaire de l'en-tête

Les préréglages Throttle et Inkline placent la recherche sous le hero. Le préréglage OfficeIT utilise une variante plus petite à l'intérieur du hero.

Comportement B2B + recherche​

Pour les acheteurs B2B connectés, la recherche redirige vers la collection filtrée — et cette collection respecte la portée du catalogue B2B de l'acheteur. Ainsi, une recherche Ford F-150 n'affiche que les pièces F-150 figurant dans le catalogue de l'acheteur, avec les paliers de prix par volume de l'acheteur appliqués.

La recherche elle-même ne filtre pas par catalogue — ce filtrage s'effectue sur la page de collection une fois la redirection effectuée. C'est la bonne séparation : la recherche affine jusqu'à la bonne famille de produits ; la collection n'affiche que ce que l'acheteur peut acheter au bon prix.

Conseils pour la qualité des données de recherche​

  • Utilisez une capitalisation cohérente dans vos entrées (toujours Ford, jamais FORD ni ford) — la cascade compare les chaînes exactement
  • Évitez les espaces en fin de chaîne dans les valeurs des entrées — même un espace invisible cassera la cascade
  • Remplissez les 3 niveaux pour chaque entrée — les entrées incomplètes cassent la cascade pour tout ce qui se trouve en aval du niveau manquant
  • Définissez une valeur par défaut sensée pour la collection cible — les acheteurs qui soumettent une sélection partielle (ou dont la sélection n'a aucune correspondance) y atterrissent

Et ensuite​