Zum Hauptinhalt springen

Finder-Abschnitte (kaskadierende Dropdowns)

Der Vertex-Finder-Abschnitt ist ein kaskadierendes Dropdown-Widget zur Produktentdeckung. Buyer grenzen das exakt benötigte Teil ein, indem sie 3 aufeinanderfolgende Werte wählen — Make → Model → Year, oder Brand → Category → Capacity, oder Printer Brand → Model → Color — und der Finder leitet sie zur gefilterten Kollektion weiter.

Vertex liefert vier Demo-Presets — Vertex (Industrie / MRO), Throttle (Autoteile), OfficeIT (Büro & IT) und Inkline (Druckerzubehör). Es gibt drei Finder-Typen, und der Finder-Abschnitt ist standardmäßig in drei der vier Presets verdrahtet:

  • Throttle (Autoteile) — Make / Model / Year
  • OfficeIT (Büro & IT) — Brand / Category / Capacity
  • Inkline (Druckerzubehör) — Printer Brand / Model / Color

Das Vertex-Preset (Industrie) wird ohne Finder ausgeliefert — es setzt stattdessen auf facettierte Kollektionsfilter und prädiktive Suche.

Make/Model/Year-Finder über dem Hero (Throttle-Preset)

Ein Abschnitt, drei Finder-Typen

Sie installieren keinen anderen Abschnitt für jede Branche — es ist in jedem Preset derselbe Finder-Abschnitt. Jedes Preset füllt nur seine eigenen Dropdown-Labels und Optionslisten aus (Make/Model/Year, Brand/Category/Capacity oder Printer Brand/Model/Color). Die Kaskade auf eine andere Vertikale umzustellen, ist eine Frage des Bearbeitens dieser Labels und Optionen.

Make/Model/Year-Finder​

Der Finder ist eine 3-stufige Kaskade. Wählen Sie Ebene 1 → die Optionen von Ebene 2 werden basierend auf der Wahl in Ebene 1 befüllt → wählen Sie Ebene 2 → die Optionen von Ebene 3 werden befüllt → klicken Sie auf Submit → Weiterleitung zur gefilterten Kollektion.

Öffnen Sie den Shopify-Admin → Online-Shop → Themes → Anpassen. Klicken Sie im Seiten-Editor auf Abschnitt hinzufügen und wählen Sie Finder.

Einstellungen​

  • Heading — „Find parts for your vehicle" oder „Find toner for your printer".
  • Intro text — Kurze Beruhigung — „Select your make, model, and year to see compatible parts.".
  • Drop-down 1 / 2 / 3 Label — Das sichtbare Label für jede Ebene — z. B. Make, Model, Year. Ändern Sie diese Labels (plus die Options-Blöcke unten), um denselben Abschnitt in jede beliebige Kaskade zu verwandeln.
  • Query param name (pro Drop-down) — Der URL-Parameter, den jede Ebene zum Such-/Kollektions-Link hinzufügt (z. B. make, model, year). Standard ist q1 / q2 / q3, wenn leer gelassen.
  • Submit button label — „Find parts" oder „Find toner".
  • Form action URL — Wohin das Formular gesendet wird. Standard ist /search; richten Sie es auf eine Kollektions-URL (z. B. /collections/all), um stattdessen eine Kollektion zu filtern.
  • Color scheme — Standard-Farbschema-Dropdown (Hell / Akzentband / Dunkel).
  • Vertical padding — Wie viel Freiraum das Finder-Band oben und unten erhält.

Die Auswahlmöglichkeiten jedes Drop-downs stammen aus Options-Blöcken, die Sie dem Abschnitt hinzufügen — ein Block pro Auswahl. Eine Option von Drop-down 2 / 3 kann einen Parent value festlegen, sodass sie nur erscheint, sobald die passende übergeordnete Auswahl getroffen wurde — so grenzt die Kaskade ein.

Die drei Finder-Typen​

1. Make / Model / Year — Throttle-Preset​

Für Autoteile-Distributoren mit passungsgesteuerten Katalogen.

Kaskade:

  1. Make — Ford, Toyota, Chevrolet, BMW usw.
  2. Model — befüllt aus dem gewählten Make (F-150, Camry, Silverado, 3 Series)
  3. Year — befüllt aus dem gewählten Make und Model (2018, 2019, 2020, ...)

Submit: leitet den Buyer zur passenden Kollektion weiter, gefiltert auf Produkte, die mit diesem Fahrzeug getaggt sind.

Daten-Einrichtung: fügen Sie die Auswahlmöglichkeiten direkt im Theme-Editor als Options-Blöcke zum Abschnitt hinzu:

  • Eine Drop-down-1-Option für jedes Make (Ford, Toyota, Chevrolet…)
  • Eine Drop-down-2-Option für jedes Model, mit dem Parent value auf das zugehörige Make gesetzt
  • Eine Drop-down-3-Option für jedes Year, mit dem Parent value auf das zugehörige Model gesetzt

Taggen Sie dann Ihre Kollektionen so, dass die gesendete URL passt (Vertex verwendet Shopifys natives Tag-basiertes Filtering).

2. Brand / Category / Capacity — OfficeIT-Preset​

Für Büro-, IT- und Elektronik-Distributoren.

Kaskade:

  1. Brand — HP, Dell, Lenovo, Apple, Cisco
  2. Category — befüllt aus dem gewählten Brand (Laptops, Monitors, Routers, Printers)
  3. Capacity — befüllt aus dem gewählten Brand und Category (8 GB / 16 GB / 32 GB · 24" / 27" / 32" · etc.)

Submit: leitet den Buyer zur passenden Brand-und-Category-Kollektion weiter.

Daten-Einrichtung: fügen Sie die Auswahlmöglichkeiten im Theme-Editor als Options-Blöcke hinzu — eine Drop-down-1-Option pro Brand, eine Drop-down-2-Option pro Category (mit dem Parent value auf das Brand gesetzt) und eine Drop-down-3-Option pro Capacity (mit dem Parent value auf die Category gesetzt).

3. Printer Brand / Model / Color — Druckerzubehör-Variante​

Für Druckerzubehör-Distributoren, die Toner, Tinte und Verbrauchsmaterialien verkaufen, die zu einem bestimmten Drucker passen müssen.

Kaskade:

  1. Printer Brand — HP, Canon, Brother, Epson, Xerox usw.
  2. Printer Model — befüllt aus dem gewählten Brand (LaserJet Pro M404, PIXMA TR8620 usw.)
  3. Color — befüllt aus dem gewählten Brand und Model (Black, Cyan, Magenta, Yellow oder Multi-Pack)

Submit: leitet den Buyer zur passenden Kollektion weiter, gefiltert auf Patronen, die mit diesem Drucker kompatibel sind.

Daten-Einrichtung: fügen Sie die Auswahlmöglichkeiten im Theme-Editor als Options-Blöcke hinzu — eine Drop-down-1-Option pro Printer Brand, eine Drop-down-2-Option pro Printer Model (mit dem Parent value auf das Brand gesetzt) und eine Drop-down-3-Option pro Color (mit dem Parent value auf das Model gesetzt).

Diese Kaskade wird auf dem Inkline-Druckerzubehör-Preset vorkonfiguriert ausgeliefert, sodass eine Druckerzubehör-Storefront direkt einen schlüsselfertigen Toner-Finder erhält — tauschen Sie einfach die Demo-Optionen gegen Ihre eigene Drucker-Modellpalette aus.

Wie die Kaskade funktioniert​

Die Auswahlmöglichkeiten des Finders stammen aus den Options-Blöcken, die Sie dem Abschnitt hinzufügen, sodass alles in die Seite eingebaut ist. Von dort aus:

  1. Beim Seitenladen werden die Optionen von Ebene 1 aus ihren Drop-down-1-Options-Blöcken befüllt
  2. Wenn der Buyer Ebene 1 auswählt, grenzt sich Ebene 2 auf die Optionen ein, deren Parent value zur Wahl von Ebene 1 passt
  3. Wenn der Buyer Ebene 2 auswählt, grenzt sich Ebene 3 auf die Optionen ein, deren Parent value zur Wahl von Ebene 2 passt
  4. Beim Submit wird der Buyer zu den Suchergebnissen oder zur Kollektion weitergeleitet, wobei jede Ebene als ihr Query-Parameter hinzugefügt wird

Die Optionen sind beim Laden in die Seite eingebaut — daher gibt es keine zusätzliche Netzwerkanfrage und die Kaskade ist sofort.

Funktioniert ohne JavaScript

Die Optionen der ersten Ebene sind direkt in die Seite eingebaut, sodass der Finder selbst dann funktioniert, wenn der Browser eines Buyers JavaScript deaktiviert hat — er kann die erste Ebene allein absenden und auf den gefilterten Ergebnissen landen. Dies ist dieselbe Progressive-Enhancement-Philosophie, die Sie überall in Vertex sehen werden.

Einrichten Ihrer Finder-Daten​

Für jeden Finder-Typ müssen Sie:

  1. Die drei Drop-down-Labels auf Ihre Kaskade setzen (z. B. Make / Model / Year) und den Query param name für jede Ebene, wenn Sie saubere URLs möchten.
  2. Einen Options-Block pro Auswahl hinzufügen — eine Drop-down-1-Option pro Wert der obersten Ebene, dann Drop-down-2- und -3-Optionen mit gesetztem Parent value, sodass jede Ebene die nächste eingrenzt.
  3. Die Form action URL auf /search (Standard) oder eine Kollektion (z. B. /collections/all) richten.
  4. Ihre Kollektionen taggen, damit die gefilterte URL passt. Vertex verwendet Shopifys natives Tag-basiertes Filtering, sodass eine Kollektion von „Ford F-150 parts" den Tag vehicle:ford-f-150 haben sollte.

→ Die drei Demo-Presets (Throttle, OfficeIT, Inkline) liefern bereits einen vollständig befüllten Finder — duplizieren Sie eines und tauschen Sie Ihre eigenen Labels und Optionen ein.

Wo der Finder zu platzieren ist​

PositionAm besten geeignet für
Oben auf der Startseite, direkt unter dem HeroVertikale, in denen der Finder das Wertversprechen der Startseite ist (Autoteile, Druckerzubehör)
Innerhalb des Hero (als Seitenpanel)Vertikale, in denen das Hero-Bild das Wertversprechen trägt und der Finder ein paralleler CTA ist
Unter der Featured CollectionVertikale, in denen der Finder einer von mehreren Browsing-Pfaden ist
Auf einer dedizierten Finder-SeiteVertikale, in denen der Finder die primäre Navigationsmethode ist — verlinken Sie ihn aus dem sekundären Header-Menü

Die Throttle- und Inkline-Presets platzieren den Finder unter dem Hero. Das OfficeIT-Preset verwendet eine kleinere Variante innerhalb des Hero.

B2B und der Finder​

Für angemeldete B2B-Buyer leitet der Finder zur gefilterten Kollektion weiter — und diese Kollektion respektiert den B2B-Katalog-Scope des Buyers. Eine Ford F-150-Suche zeigt also nur die F-150-Teile, die im Katalog des Buyers enthalten sind, mit angewendeten Volume-Pricing-Stufen des Buyers.

Der Finder selbst filtert nicht nach Katalog — diese Filterung erfolgt auf der Kollektionsseite, sobald der Buyer dort landet. Dies ist die korrekte Trennung: Der Finder grenzt auf die richtige Produktfamilie ein; die Kollektion zeigt nur das, was der Buyer zum richtigen Preis kaufen kann.

Tipps zur Finder-Datenqualität​

  • Verwenden Sie konsistente Groß-/Kleinschreibung in Ihren Einträgen (immer Ford, nie FORD oder ford) — die Kaskade vergleicht Strings exakt
  • Vermeiden Sie nachgestellte Leerzeichen in den Eintragswerten — selbst unsichtbare Leerzeichen brechen die Kaskade
  • Befüllen Sie alle 3 Ebenen für jeden Eintrag — unvollständige Einträge brechen die Kaskade für jeden, der der fehlenden Ebene nachgelagert ist
  • Verwenden Sie einen vernünftigen Standard für die Ziel-Kollektion — Buyer, die eine unvollständige Auswahl absenden (oder deren Auswahl keine Treffer hat), landen hier

Wie es weitergeht​