Zum Hauptinhalt springen

Installation von Vertex in Ihrem Shopify-Shop

Dieser Guide führt Sie durch die Installation des Premium-B2B-Shopify-Themes Vertex — vom Kauf über die B2B-Aktivierung, die Metafield-Einrichtung bis zur ersten Veröffentlichung.

Geschätzte Zeit
  • Basis-B2C-Installation (nur Theme, kein B2B): 5 Minuten
  • Vollständige B2B-Installation (Theme + Native B2B + Metafields + erstes Unternehmen): 45–60 Minuten

Bevor Sie beginnen​

Anforderungen an den Shopify-Plan​

Sie benötigenWarum
Beliebiger Shopify-PlanVertex installiert sich auf jedem Plan — Basic / Shopify / Advanced / Plus
Shopify Plus ODER Advanced + B2B-Add-onNur erforderlich, wenn Sie Shopifys native B2B-Funktionen nutzen möchten. Ohne diese läuft Vertex als ausgefeiltes B2C-Industriebedarf-Theme.
Neue Kundenkonten aktiviertErforderlich für alle Account-Funktionen — Settings ▸ Customer accounts ▸ Show login link in checkout

Schritt 1 — Vertex aus dem Shopify Theme Store installieren​

  1. Gehen Sie zu Online Store ▸ Themes in Ihrem Shopify-Admin
  2. Klicken Sie auf Add theme ▸ Visit Theme Store
  3. Suchen Sie nach "Vertex" oder navigieren Sie zur B2B & Wholesale-Kategorie
  4. Klicken Sie auf Try theme, um Vertex als unveröffentlichtes Theme in Ihrem Shop zu installieren
  5. Klicken Sie auf Customize, um den Theme-Editor zu öffnen
Zu diesem Zeitpunkt ist Ihre Storefront unverändert

Das Theme ist installiert, aber nicht veröffentlicht. Sie können Vertex in der Vorschau anzeigen und anpassen, ohne Ihre Live-Storefront zu beeinflussen. Veröffentlichen Sie (Schritt 6) erst, wenn Sie bereit sind.

Schritt 2 — Shopifys natives B2B aktivieren (optional, aber empfohlen)​

Überspringen Sie diesen Schritt, wenn Sie nur B2C möchten — das B2B-Chrome von Vertex wird automatisch ausgeblendet, wenn kein B2B-Kunde angemeldet ist.

  1. Gehen Sie zu Settings ▸ Customer accounts
  2. Aktivieren Sie New customer accounts
  3. Scrollen Sie zu B2B und klicken Sie auf Manage
  4. Klicken Sie auf Enable B2B
  5. Sie sehen jetzt einen neuen B2B-Abschnitt in der Seitenleiste Ihres Shopify-Admins

→ Siehe den vollständigen B2B-Setup-Guide zum Erstellen Ihres ersten Unternehmens, Zuweisen von Katalogen, Festlegen von NET-Zahlungszielen usw.

Schritt 3 — Den Vertex-Metafield-Namespace einrichten​

Vertex liest mehrere händlerverwaltete Metafields, um die PDP-Verbesserungen (Vertriebsinformationen, Versendet-aus, MPN-Suche, Datenblätter, Tech-Specs, Preishistorie) zu betreiben.

Sie haben dafür zwei Wege:

Option A — Manuelle Einrichtung über den Shopify-Admin (~15 Min.)​

  1. Gehen Sie zu Settings ▸ Custom data
  2. Klicken Sie auf Companies (oder Products, je nachdem, welches Metafield Sie hinzufügen)
  3. Klicken Sie auf Add definition und erstellen Sie jedes Metafield aus der Tabelle im Metafield-Setup-Guide

Option B — Bulk-Einrichtung über die Shopify-GraphQL-Admin-API (~5 Min.)​

Verwenden Sie die GraphQL-Mutations, die im Metafield-Setup-Guide enthalten sind, um jede Vertex-Metafield-Definition in einem Batch anzulegen.

Sie benötigen nicht jedes Metafield zum Start

Das Theme degradiert elegant, wenn Metafields fehlen. PDP-Blöcke (Dokumente, Preishistorie, Versendet-aus) werden automatisch ausgeblendet, wenn ihre Backing-Metafields leer sind. Beginnen Sie mit den wirkungsvollsten (vertex.mpn für die SKU-Suche und vertex.rep_* für die Vertriebs-Pill) und fügen Sie die anderen hinzu, wenn Sie skalieren.

Schritt 4 — Ein Farb-Preset wählen​

Vertex wird mit 4 Starter-Paletten ausgeliefert:

PresetBrancheAkzent
Vertex (Standard)Industrial / MROBernstein #fbbf24
ThrottleAuto-TeileRot-Orange #ec5f24
OfficeITBüro & IT-BedarfBlau
InklinePrint-BedarfPetrol

So wechseln Sie Presets:

  1. Klicken Sie im Theme-Editor auf Theme settings (unten links)
  2. Öffnen Sie Colors
  3. Wählen Sie Ihre Starter-Palette aus dem Starter color palette-Dropdown
  4. Die gesamte Storefront wird im Vorschaubereich neu eingefärbt

→ Siehe Demo-Presets-Guide für die Unterschiede zwischen den Presets.

Schritt 5 — Header, Navigation, Footer konfigurieren​

Header + Footer werden über Section Groups im Theme-Editor konfiguriert:

  1. Klicken Sie im Theme-Editor auf Sections (linke Seitenleiste)
  2. Klicken Sie auf Header group, um Folgendes zu konfigurieren:
    • Announcement Bar (Top-Dark-/Bernstein-Strip mit Links, Socials, Telefon)
    • B2B-Begrüßungsleiste (nur für eingeloggte B2B-Kunden sichtbar)
    • Haupt-Header (Logo, Suche, Navigation)
  3. Klicken Sie auf Footer group, um Folgendes zu konfigurieren:
    • Footer-Menü, Social-Links, Kontakt-E-Mail, Newsletter-Anmeldung, Payment-Icons

→ Detaillierte Anleitung: Header & Footer Chrome Guide · Theme-Settings-Referenz.

Schritt 6 — Vorschau anzeigen, dann veröffentlichen​

  1. Klicken Sie im Theme-Editor auf den Preview-Button (oben rechts), um Ihre Storefront in einem neuen Tab anzuzeigen
  2. Klicken Sie sich durch:
    • Startseite
    • Eine Collection-Seite
    • Eine Produktseite
    • Den Warenkorb
    • Die Kunden-Login-Seite
  3. Wenn ein B2B-Käufer-Testaccount konfiguriert ist, melden Sie sich an und überprüfen Sie:
    • Bernsteinfarbene Begrüßungsleiste erscheint mit Firmenname + NET-Terms-Badge
    • Staffelpreis-Stufen werden auf der PDP gerendert (sofern dem Katalog dieses Käufers zugewiesen)
    • Vertriebs-Pill erscheint im Header (wenn vertex.rep_name-Metafield gesetzt ist)
  4. Zurück in Online Store ▸ Themes, finden Sie Vertex in der Theme library
  5. Klicken Sie auf das ⋯-Menü neben Vertex ▸ Publish

Ihre Storefront ist jetzt mit Vertex live 🎉

Installation-Troubleshooting​

"Ich sehe die bernsteinfarbene B2B-Begrüßungsleiste nicht"​

Ursachen (in der Reihenfolge der Wahrscheinlichkeit):

  1. Sie sind nicht als B2B-Kunde angemeldet. Die bernsteinfarbene Leiste wird nur gerendert, wenn customer.b2b? true ist UND customer.current_company gesetzt ist. Melden Sie sich als B2B-Käufer an, der einem Unternehmen zugeordnet ist.
  2. Der Storefront-Modus ist auf B2C-only gesetzt. Öffnen Sie Theme settings ▸ B2B ▸ Storefront mode und bestätigen Sie, dass er auf Hybrid (auto) oder B2B-only gesetzt ist.
  3. Native B2B ist im Shopify-Admin nicht aktiviert. Bestätigen Sie Schritt 2 oben.

"Preise zeigen 'Zum Anzeigen der Preise anmelden', obwohl ich angemeldet bin"​

Der Toggle Theme settings ▸ B2B ▸ Hide prices until customer logs in ist aktiviert. Zum Deaktivieren entfernen Sie das Häkchen.

"Die Vertriebs-Pill erscheint nicht im Header"​

Die Pill wird nur gerendert, wenn das Unternehmen des Käufers einen Wert im vertex.rep_name-Metafield gesetzt hat. Überprüfen Sie unter Customers ▸ Companies ▸ [Firmenname] ▸ Metafields, dass vertex.rep_name befüllt ist.

→ Siehe FAQ + Troubleshooting für mehr.

Nächste Schritte​