Zum Hauptinhalt springen

Customer Account Dashboard — B2B-fähiger Workflow

Vertex liefert eine vollständige Customer-Account-Suite, die sich automatisch an den angemeldeten Nutzer anpasst. Ein B2B-Einkaufsmitarbeiter mit NET-30-Zahlungsziel und zugewiesenem Vertriebsmitarbeiter sieht ein Dashboard. Ein B2C-Endkunde sieht ein anderes. Ein Buchhalter mit mehreren Standorten sieht eine dritte Variante mit einem Company-Switcher. Alles aus denselben Theme-Dateien — ohne App, ohne zweite Template-Familie, ohne Custom Code.

Diese Anleitung deckt jeden Customer-Account-Bildschirm in Vertex ab, die B2B-fähigen Verhaltensweisen, den Quick-Reorder-Flow, das Multi-Location-Buyer-Erlebnis und wie Sie jeden Bildschirm über den Section-Editor anpassen können.

Nativ + B2B-fähig

Vertex's Customer Account baut auf Shopifys neuen Customer Accounts auf (das von Shopify gehostete, passwortlose Erlebnis, das B2B voraussetzt) — mit Vertex-Theme-Styling und B2B-fähigen Sections obendrauf. Sie erhalten den Feinschliff eines Custom Themes und die Flexibilität, jede Section wie jede andere Seite zu bearbeiten.

Was die Customer-Account-Suite mitbringt​

TemplateWas es macht
customers/account.jsonDashboard. B2B-fähig: zeigt Company-Informationen + Zahlungsziele + Vertriebsmitarbeiter-Karte + Quick Reorder für B2B-Buyer. Zeigt Bestellliste + Adressen-Link für B2C / aus Gast konvertierte Kunden.
customers/order.jsonEinzelbestellungsansicht. Bestellkopf (Nummer, Datum, Status, Gesamtbetrag), Positionen mit „Diesen Artikel erneut bestellen"-Buttons pro Zeile, „Alles erneut bestellen"-Button für die gesamte Bestellung unten, Versand- + Rechnungsadressen, Erfüllungsstatus.
customers/addresses.jsonAdressen CRUD. Hinzufügen / bearbeiten / löschen / Standard setzen für das Adressbuch. Länderspezifische Felder mit Validierung für Bundesland/Provinz.
customers/login.jsonAnmeldung. E-Mail + Passwort + „Passwort vergessen?" + „Konto erstellen"-CTAs.
customers/register.jsonKonto erstellen. Vor- / Nachname, E-Mail, Passwort. Umschaltbare B2B-CTA „Trade-Konto beantragen", die zur RFQ-Seite führt.
customers/activate_account.jsonEinladung aktivieren. Aktiviert ein Kundenkonto, das vom Händler über den Shopify-Admin erstellt wurde.
customers/reset_password.jsonPasswort zurücksetzen. Zweistufig (Reset-E-Mail anfordern, dann neues Passwort eingeben).

Jedes Template ist im Vertex-Designsystem neu gestaltet — Vertex's interner Name für die Design-Tokens, die den Rest der Storefront antreiben: Spacing-Skala, Type-Skala, Radius-Skala, Shadow-Skala, Button-System, Input-System. So fühlt sich der Customer Account nicht wie eine separate App an — er sieht aus und verhält sich genau wie das Chrome der Storefront.

B2B customer dashboard: company, NET-30, sales rep, reorder

Von Shopify gehostete Customer Accounts

Dies ist das neue, von Shopify gehostete Customer-Account-Erlebnis, das B2B-Buyer sehen — gebrandet mit Ihrem Shop-Namen und Ihrer Versandadresse, mit Bestellverlauf- und Profil-Tabs oben. Das Aussehen kommt direkt von Shopify, nicht vom Vertex-Theme. Die Vertriebsmitarbeiter-Karte und die Quick-Reorder-Verknüpfungen werden von Vertex obendrauf hinzugefügt.

Das B2B-fähige Dashboard​

customers/account.json ist das Herzstück. Es erkennt den B2B-Status des angemeldeten Kunden und rendert eines von zwei Layouts.

Erkennungslogik​

Die Section des Dashboards verwendet Liquid wie dieses (vereinfacht):

{% if customer.b2b? and customer.current_company %}
  {% render 'account-b2b-dashboard', customer: customer %}
{% else %}
  {% render 'account-b2c-dashboard', customer: customer %}
{% endif %}

Zwei Liquid-Signale werden geprüft:

  • customer.b2b? — wahr, wenn der Buyer über ein B2B-Konto angemeldet ist
  • customer.current_company — die Company, die er gerade repräsentiert (steuert Katalog, Preise, Zahlungsziele, Ship-to)

Wenn beide vorhanden sind, wird das B2B-Dashboard gerendert. Andernfalls wird das B2C-Dashboard gerendert. Es gibt keine App, keine Metafeld-Einrichtung, kein JavaScript-Flag — die gesamte Erkennung erfolgt serverseitig und Shopify-nativ.

B2B-Dashboard-Layout​

Für einen angemeldeten B2B-Buyer bringt das Dashboard folgendes hervor:

1. Begrüßungs-Header​

  • Hallo, {first_name} — freundliche Begrüßung
  • Company-Name — aus customer.current_company.name gezogen
  • Company-Badges — NET-30 / NET-60 / NET-90 (aus current_company.payment_terms_template), Steuerbefreit (aus current_company.tax_exemptions)
  • Aktueller Ship-to — kurze Zusammenfassung der aktuell ausgewählten Ship-to-Adresse des Buyers

2. Vertriebsmitarbeiter-Karte (volle Variante)​

Wenn Sie die Vertriebsmitarbeiter-Metafelder pro Company ausgefüllt haben (vertex.rep_name / vertex.rep_email / vertex.rep_phone unter Kunden ▸ Companies ▸ [Company] ▸ Metafelder), zeigt das Dashboard eine vollständige Vertriebsmitarbeiter-Karte — größer als die kleinere Pille im Header.

Die Karte umfasst:

  • Name des Vertriebsmitarbeiters (mit Initial-Avatar)
  • E-Mail des Vertriebsmitarbeiters (Klick zum Mailen)
  • Telefon des Vertriebsmitarbeiters (Klick zum Anrufen)

Siehe den Metafeld-Einrichtungsleitfaden für das Ausfüllen.

Vertriebsmitarbeiter pro Company

Die Vertriebsmitarbeiter-Karte verwendet die Vertriebsmitarbeiter-Daten, die Sie für jede Company ausfüllen. Alle Buyer, die derselben Company zugeordnet sind, sehen denselben Vertriebsmitarbeiter.

3. Quick-Reorder-Liste​

Das beliebteste B2B-Feature. Zeigt die letzten 5 Bestellungen des Buyers mit:

  • Bestellnummer + Datum
  • Gesamtbetrag + Artikelanzahl
  • Alles erneut bestellen-Button (ein Klick — fügt jede Zeile zu aktuellen Preisen wieder dem Warenkorb hinzu)
  • Bestellstatus-Badge (Erfüllt / Teilweise / Nicht erfüllt / Storniert)
  • Link zur vollständigen Einzelbestellungsansicht

Dies wird von assets/b2b-quick-reorder.js betrieben — Vanilla JS, kein Framework, keine App. Der Button sendet POST jeder Zeile an /cart/add.js nacheinander, validiert gegen den Katalog des Buyers (überspringt Artikel, die nicht mehr zugewiesen sind) und aktualisiert dann den Cart Drawer oder leitet zu /cart weiter.

Eingestellte oder aus dem Katalog entfernte Artikel

Wenn eine Position der ursprünglichen Bestellung nicht mehr im Katalog des Buyers ist, überspringt das Reorder-Skript sie und zeigt einen kleinen Hinweis: „2 Artikel aus Bestellung #1234 sind nicht mehr verfügbar und wurden übersprungen." Buyer können den Warenkorb vor dem Checkout noch überprüfen.

Ein Raster der kanonischen B2B-Account-Aktionen:

  • Alle Bestellungen — vollständiger Bestellverlauf
  • Adressen — Ship-to-Adressen verwalten
  • Bulk Order — Link zu /pages/bulk-order (Paste-to-Cart)
  • Angebot anfordern — Link zu /pages/rfq
  • Katalog — Link zum Storefront-Katalog, gefiltert nach ihrem B2B-Katalog

5. Aktuelle Aktivität​

Eine komprimierte Zeitleiste der letzten 10 Aktionen des Buyers:

  • Aufgegebene Bestellungen
  • Hinzugefügte / aktualisierte Adressen
  • Eingereichte Angebotsanfragen (wenn Sie RFQ-Formularübermittlungen über Shopify Flow oder Webhooks in den Kundendatensatz einspeisen)

B2C-Dashboard-Layout​

Für einen Nicht-B2B-Kunden ist das Dashboard einfacher:

  • Begrüßungs-Header (keine Company-Info, kein Zahlungsziel-Badge)
  • Bestellliste (vollständige Paginierung)
  • Standardadresse-Karte mit Bearbeiten-/Verwalten-Links
  • Keine Vertriebsmitarbeiter-Karte (B2C-Kunden erhalten keinen zugewiesenen Vertriebsmitarbeiter)
  • Keine Quick-Reorder-Liste (einzelne „Bestellungen anzeigen"-CTA — Buyer bestellen aus der Einzelbestellungsansicht erneut)

Das B2C-Dashboard ist gezielt darauf ausgelegt, schnell und übersichtlich zu sein — die meisten B2C-Kunden möchten einen Bestellstatus prüfen und nicht mit Company-Chrome interagieren.

Quick-Reorder-Flow​

Quick Reorder ist auf zwei Oberflächen aufgeteilt:

Oberfläche 1 — Dashboard mit den letzten 5 Bestellungen​

(Oben beschrieben.) Ein-Klick „Alles erneut bestellen" pro Bestellung, mit Anzeige der 5 neuesten. Buyer, die wöchentlich dasselbe Kit nachbestellen, lieben das — es sind zwei Klicks von der Anmeldung bis zum voll beladenen Warenkorb.

Oberfläche 2 — Einzelbestellungsansicht (customers/order.json)​

Für ältere Bestellungen oder zum Nachbestellen nur einer Teilmenge bietet die Einzelbestellungsansicht:

  • „Diesen Artikel erneut bestellen"-Button pro Zeile für jede Zeile — fügt eine Variante in der ursprünglichen Menge hinzu
  • Mengen-Eingabe pro Zeile, sodass der Buyer die Menge vor dem Hinzufügen ändern kann (standardmäßig die ursprüngliche Bestellmenge)
  • „Alle Artikel erneut bestellen"-Button für die gesamte Bestellung unten — fügt jede Zeile in der ursprünglichen Menge hinzu

Dies ist das gleiche Muster wie „Alles erneut bestellen" im Dashboard — dieselbe assets/b2b-quick-reorder.js, dieselbe Katalogvalidierung, derselbe Hinweis auf übersprungene Artikel. Nur feiner granuliert.

Wie das JS funktioniert​

assets/b2b-quick-reorder.js ist ein eigenständiges Modul, das:

  1. Liest die Bestell-ID aus dem data-order-id des Buttons
  2. Holt die Positionen der Bestellung über den Endpunkt /cart/add.js von Shopify (POST gebündelt)
  3. Verfolgt übersprungene Varianten (aus dem Katalog entfernt / nicht vorrätig / eingestellt)
  4. Zeigt eine Toast-Benachrichtigung: „12 Artikel zum Warenkorb hinzugefügt. 2 Artikel übersprungen."
  5. Leitet zu /cart weiter oder öffnet den Cart Drawer (je nach Theme-Einstellung)

Es gibt keine Drittanbieter-App, keine Proxy-App und keine App-Block-Abhängigkeit. Der gesamte Flow ist Shopify-nativ plus Vanilla JS.

Reorder verwendet aktuelle Preise

Reorders verwenden den aktuellen Katalogpreis des Buyers — nicht den historischen Bestellpreis. Das ist wichtig für B2B: Vertragspreise ändern sich, und das Nachbestellen zu einem alten Preis würde mit dem neuen Katalog kollidieren. Wenn ein Buyer den alten Preis benötigt, sollte er seinen Vertriebsmitarbeiter kontaktieren und ein Angebot (RFQ) einreichen.

Multi-Location-Buyer​

Einige B2B-Buyer sind mehreren Companies zugeordnet (z. B. ein Buchhalter im Konzern, der Bestellungen für 5 Tochtergesellschaften aufgibt). Für diese Buyer rendert Vertex einen Company-Switcher im Fußbereich des mobilen Drawers.

Erkennung​

{% if customer.company_available_locations.size > 1 %}
  {% render 'company-switcher' %}
{% endif %}

Der Switcher wird nur gerendert, wenn der Buyer mehr als einen Company-Standort zugänglich hat. Buyer mit nur einer Company sehen ihn nicht — saubere UI.

Wie der Wechsel funktioniert​

Wenn der Buyer einen anderen Company-Standort auswählt:

  1. Vertex sendet POST an die url_to_set_as_current, die Shopify für diesen Standort zurückgegeben hat
  2. Shopify lädt die Seite mit der neuen Company in der Session neu
  3. Katalog, Preise, Zahlungsziele, Ship-to, Steuerbefreiungsstatus wechseln alle zur neuen Company
  4. Warenkorb wird beibehalten, falls kompatibel; bei Inkompatibilität mit einer Warnung geleert

Dies ist vollständig nativ — keine App, keine JS-Statusverwaltung, kein manueller Sync. Shopify übernimmt den serverseitigen Company-Wechsel.

Wo der Switcher gerendert wird​

  • Desktop (≥1170px) — in der bernsteinfarbenen B2B-Begrüßungsleiste (oben im Header), wenn mehr als eine Company verfügbar ist
  • Mobile + Tablet (<1170px) — am unteren Rand des Hamburger-Drawer-Fußbereichs, oberhalb der Sprach- / Währungspillen

Der Switcher verwendet dasselbe <details> + Custom-Panel-Muster wie jeder andere Dropdown in Vertex — null native <select>-Elemente, vollständige Tastaturnavigation, AT-freundlich.

Templates für Login / Registrierung / Aktivierung / Reset​

Alle Authentifizierungsbildschirme wurden im Vertex-Designsystem neu gestaltet. Sie teilen eine konsistente visuelle Sprache:

  • Zentriertes Card-Layout mit der Heading-Schriftart + Body-Schriftart der Storefront
  • Logo + kleine Headline oben in der Karte
  • Einspaltiges Formular mit vollbreiten Inputs (Touch-Targets 52 px, Focus-Visible-Ring, Label oben)
  • Primärer CTA-Button in der Akzentfarbe der Storefront
  • Sekundäre Links darunter — „Passwort vergessen?", „Konto erstellen", „Sie haben bereits ein Konto?"
  • Storefront-Footer unter der Karte (leichtgewichtig — nur rechtliche Links + Copyright)

customers/login.json​

  • E-Mail + Passwort
  • „Passwort vergessen?"-Link → /account/login#recover
  • „Konto erstellen"-CTA → /account/register
  • (Optional) Anmeldung mit sozialen Anbietern, wenn Sie diese im Shopify-Admin aktiviert haben
  • (B2B-Ergänzung) — kleiner Hinweis: „Sie benötigen ein Trade-Konto? Zugang anfordern →"

customers/register.json​

  • Vorname, Nachname, E-Mail, Passwort
  • „Konto erstellen"-CTA
  • (B2B-Ergänzung) — kleiner Hinweis: „Bestehender Trade-Kunde? Anmelden →"

Standard-Shopify-Verhalten: Neue Konten durchlaufen die E-Mail-Verifizierung, bevor sie sich anmelden können. Neue B2B-Konten werden vom Händler über Einstellungen ▸ Kunden ▸ Companies erstellt — sie registrieren sich nicht selbst.

customers/activate_account.json​

Für vom Händler eingeladene Kunden. Sie landen aus der Einladungs-E-Mail auf dieser Seite und setzen ihr Passwort.

customers/reset_password.json​

Zwei Bildschirme in einem:

  1. Reset anfordern — Nur-E-Mail-Input + „Reset-Link senden"-CTA
  2. Neues Passwort festlegen — Neues Passwort + Passwort bestätigen + „Passwort aktualisieren"-CTA (nach Klick auf den E-Mail-Link)

Anpassung im Theme-Editor​

Die Customer-Account-Bildschirme sind im Theme-Editor bearbeitbar, wo Vertex einen kleinen Satz an Section-Einstellungen bereitstellt. Die Anpassung ist hier bewusst fokussiert — die Struktur des Dashboards ist fest, und die untenstehenden Steuerelemente sind die, die Vertex bereitstellt.

Dashboard im Theme-Editor öffnen​

  1. Online Store ▸ Themes ▸ Anpassen
  2. Wählen Sie im oberen Template-Dropdown Customers ▸ Account
  3. Der Theme-Editor rendert nun das Account-Dashboard mit allen Sections in der linken Seitenleiste

Die Account-Section hält die Anpassung bewusst klein — es gibt genau zwei Einstellungen, beide unter dem Layout-Header der Section:

AnpassenWie
Recent orders to showSection-Einstellungen → „Recent orders to show" → steuert, wie viele aktuelle Bestellungen die Quick-Reorder-Liste anzeigt. Bereich 3–10, Standard 5.
Show Quick actions cardSection-Einstellungen → „Show Quick actions card" → schaltet die Quick-Actions-Karte ein oder aus (Standard ein).
Sichtbarkeit der Vertriebsmitarbeiter-KarteAuto — die Karte erscheint, wenn das vertex.rep_name-Metafeld der Company ausgefüllt ist und der Buyer angemeldet ist; sie wird für B2C-Kunden und im B2C-only-Modus ausgeblendet. Es gibt keinen Schalter pro Section.
Der Inhalt der Account-Seite wird von Shopify gesteuert, nicht vom Theme

Vertex's Dashboard wird innerhalb von Shopifys neuen Customer Accounts gerendert. Die Begrüßung, die Bestell- und Profil-Tabs sowie die gesamte Seiten-Chrome kommen direkt von Shopify — Sie bearbeiten das Branding (Shop-Name, Logo, Farben) unter Einstellungen ▸ Kundenkonten im Shopify-Admin, nicht in dieser Section. Die beiden obigen Einstellungen sind die einzigen Theme-seitigen Steuerelemente, die Vertex obendrauf legt.

Für die Einzelbestellungsansicht (die Order-Section) gibt es eine Einstellung:

AnpassenWie
Show print invoice linkSection-Einstellungen → „Show print invoice link" → schaltet den Rechnung-drucken-Link auf der Bestelldetailseite ein oder aus (Standard ein).

Weiterführende Literatur​

Zusammenfassung​

  • Vertex's Customer-Account-Suite ist B2B-fähig — dieselben Templates, zwei Layouts, serverseitig automatisch erkannt.
  • B2B-Dashboard zeigt Company-Infos, Zahlungsziele-Badge, vollständige Vertriebsmitarbeiter-Karte, die letzten 5 Bestellungen mit Quick Reorder und ein Quick-Links-Raster.
  • B2C-Dashboard ist gezielt schnell gebaut — nur Bestellungen + Standardadresse.
  • Quick Reorder funktioniert vom Dashboard UND von der Einzelbestellungsansicht aus, betrieben von assets/b2b-quick-reorder.js (Vanilla, keine App).
  • Multi-Company-Buyer erhalten einen Company-Switcher im Fußbereich des mobilen Drawers + in der Desktop-Begrüßungsleiste.
  • Templates für Login / Registrierung / Aktivierung / Reset im Vertex-Designsystem neu gestaltet — visuell stimmig mit der Storefront.
  • Jedes Account-Template ist JSON — vollständig anpassbar über den Section-Editor.