B2B-only-Abschnitte
Dies sind die Abschnitte, die speziell für B2B-Workflows entwickelt wurden — die Begrüßungsleiste, die automatisch für angemeldete Unternehmenskäufer erscheint, der Werbestreifen auf der Startseite, der B2B-Features an Gäste vermarktet, die Paste-to-Cart-Bulk-Seite, die Side-by-Side-Vergleichstabelle, die RFQ-Seite und das Inline-Quick-Order-Pad.
Jeder dieser Abschnitte funktioniert mit dem nativen B2B von Shopify (keine Apps, keine Abonnements). Wenn B2B in Ihrem Shop nicht aktiviert ist, funktionieren die marketingorientierten Abschnitte (B2B-Feature-Werbung, Bulk-Order, Compare, RFQ) weiterhin als ausgefeilte Abschnitte — Käufer sehen lediglich die unternehmensspezifischen Teile wie Volume-Pricing-Stufen im Angebot nicht.
Vertex liest quantity_price_breaks serverseitig gerendert aus Shopifys nativem B2B-Katalog. Käufer sehen korrekte gestaffelte Preise auf der PDP, im Warenkorb und auf der Bulk-Order-Seite automatisch — keine JS-Neuberechnung, keine App-Synchronisationsverzögerung. Die Einrichtung von B2B-Katalogen im Shopify-Admin ist alles, was Sie brauchen.
b2b-greeting-bar
Abschnittsdatei: sections/b2b-greeting-bar.liquid
Das bernsteinfarbene Band, das über dem Haupt-Header für angemeldete Unternehmenskäufer erscheint. Bereits behandelt in Header, Footer & Chrome — dieser Abschnitt ist hier querverwiesen, weil es der sichtbarste B2B-Touchpoint ist.
Keine Händlereinstellungen. Wird automatisch gerendert basierend auf:
customer.b2b? AND customer.current_company AND settings.storefront_mode != 'b2c'
Oberflächen: Firmenname, NET-Terms-Badge, Steuerbefreiungs-Badge, Sprachpille, Währungspille, Versandadressen-Umschalter (statisch bei 1 Standort, Dropdown bei 2+).
Sichtbarkeit: nur Desktop (≥ 1170px) — auf Mobile wandern dieselben Daten in den Kontobereich der Hamburger-Schublade.
b2b-feature-promo
Abschnittsdatei: sections/b2b-feature-promo.liquid
Startseiten-Band, das B2B-only-Features an Gäste vermarktet — Volume Pricing, Bulk Order, RFQ, NET-30 — sodass Besucher, die nicht wussten, dass Sie diese anbieten, den Weg zu einer Händleranmeldung oder einem RFQ finden.
Einstellungen pro Block: Symbol (Bild / SVG), Titel, Text, optionaler Link.
Wird automatisch für angemeldete B2B-Käufer ausgeblendet. Die Werbung ist für Gäste; angemeldete Händler haben bereits Zugriff auf die Features, die sie bewirbt, daher wäre die Anzeige redundant. Die bedingte Prüfung lautet:
{% unless customer.b2b? %}
{% render 'b2b-feature-promo' %}
{% endunless %}
Häufige Blockmuster
| Symbol | Titel | Text |
|---|---|---|
| Stack | Volume pricing | Gestaffelte Preisnachlässe pro Einheit bei jeder Bestellgröße — automatisch beim Checkout angewendet. |
| Spreadsheet | Bulk order | Fügen Sie SKU- und Mengenzeilen aus einer Tabelle ein. Wir validieren und fügen mit einem Klick in den Warenkorb hinzu. |
| Document | NET-30 terms | Qualifizierte Accounts erhalten 30-Tage-Zahlungsziele ohne Zinsen. Beantragen Sie es im Händleranmeldeformular. |
| Quote | Request a quote | Individuelle Preise für Mengenanfragen, Projektangebote und Vertragspreise. |
Über dem Fold (direkt unter dem Hero) fängt überfliegende Gäste — schiebt aber alles andere nach unten. Unter dem Fold funktioniert, wenn Sie möchten, dass angemeldete Händler ohne Scroll-Nachteil daran vorbei scrollen.
main-bulk-order
Abschnittsdatei: sections/main-bulk-order.liquid
Vorlage: templates/page.bulk-order.json → zuweisen zu /pages/bulk-order
Die Paste-to-Cart-Bulk-Order-Seite. Käufer fügen SKU,qty-Zeilen aus einer Tabelle ein; die Seite validiert jede Zeile gegen den Katalog und fügt den gesamten Warenkorb mit einem Klick hinzu. Ungültige SKUs werden inline markiert.
Einstellungen
| Einstellung | Typ | Hinweise |
|---|---|---|
| Heading | Text | "Bulk order" / "Quick order pad". |
| Intro text | Richtext | Kurzer Anweisungsblock (oder verwenden Sie den Instructions-Block). |
| Columns | Select | sku_qty · sku_qty_notes · sku_qty_notes_ship. Bestimmt, wie viele Spalten das Pad anzeigt. |
| Submit label | Text | Standard ist "Add all to cart". |
| Color scheme | Select | Standard-Farbschema-Dropdown. |
Instructions-Block
Fügen Sie einen Instructions-Block hinzu, um beruhigenden Text neben dem Pad zu rendern: "Fügen Sie Ihre SKU-Liste ein — eine pro Zeile, kommagetrennte Mengen. Wir validieren gegen Ihren Katalog, bevor wir in den Warenkorb legen."
So wird validiert
- Jede SKU wird gegen den Katalog des Käufers geprüft (B2B-Käufer erhalten den Unternehmenskatalog-Scope; Gäste erhalten den vollständigen Storefront)
- Ungültige SKUs werden rot hervorgehoben mit einem Inline-Fehler
- Gültige SKUs werden in einem einzigen Warenkorb-Update hinzugefügt (eine Netzwerk-Roundtrip, keine Race Conditions)
- Quantity Rules (MOQ, Max, Case-Pack) werden zum Validierungszeitpunkt durchgesetzt
B2B-Kompatibilität
Für angemeldete B2B-Käufer liest die Bulk-Order-Seite automatisch aus dem B2B-Katalog ihres Unternehmens. SKUs, die nicht im Katalog enthalten sind, schlagen bei der Validierung fehl, selbst wenn sie im Storefront existieren. Dies ist beabsichtigt — Käufer sollten nur das bestellen können, was in ihrem Vertrag enthalten ist.
→ Mounten Sie es auf einer Seite (typischerweise /pages/bulk-order), indem Sie die Vorlage page.bulk-order.json im Seiteneditor auswählen. Siehe den B2B-Setup-Leitfaden zum Zuweisen des Katalogs, der die Validierung steuert.
main-compare
Abschnittsdatei: sections/main-compare.liquid
Vorlage: templates/page.compare.json → zuweisen zu /pages/compare
Side-by-Side-Produktvergleichstabelle. Bis zu 4 Produkte. Nur Session — wird gelöscht, wenn der Käufer den Browser schließt. Keine Wunschliste (die Shopify-Theme-Store-Richtlinie verbietet persistente Wunschlisten ohne App).
Wie es funktioniert
- Käufer klickt + Compare auf einer Produktkarte oder PDP
- Das Produkt wird zu einem
vertex_compare-sessionStorage-Schlüssel hinzugefügt - Die Compare-Leiste (sticky bottom tray, siehe unten) zeigt bis zu 4 Produkt-Thumbnails
- Käufer klickt auf Compare im Tray → Weiterleitung zu
/pages/compare - Die Compare-Seite rendert eine Spec-by-Spec-Tabelle mit jedem Produkt als Spalte
Einstellungen
| Einstellung | Typ | Hinweise |
|---|---|---|
| Heading | Text | "Compare products". |
| Intro text | Richtext | Optional. |
| Empty state heading | Text | Wird angezeigt, wenn keine Produkte im Vergleich sind. "Add products to compare". |
| Empty state body | Richtext | "Durchsuchen Sie den Katalog und klicken Sie auf ⊕ Compare auf einer Produktkarte. Bis zu 4 Produkte.". |
Was der Vergleich zeigt
Pro Produktspalte: Bild, Titel, Preis, wichtige Specs (aus dem tech_spec_row-Metaobject), MOQ, Versand-von, ATC-Button. Zeilen, die sich zwischen Produkten unterscheiden, werden visuell hervorgehoben für einfaches Scannen.
compare-bar-Snippet
Snippet-Datei: snippets/compare-bar.liquid
Das Sticky-Bottom-Tray, das immer dann erscheint, wenn die Compare-Liste mindestens ein Produkt enthält. Rendert 4 Produkt-Slots (gefüllt oder leer), einen Compare-Button (deaktiviert, bis 2+ Produkte hinzugefügt wurden) und einen Clear all-Link.
Das Snippet ist aus theme.liquid eingebunden, sodass es auf jeder Seite erscheint. Es wird nur gerendert, wenn sessionStorage.vertex_compare mindestens einen Eintrag hat.
main-rfq
Abschnittsdatei: sections/main-rfq.liquid
Vorlage: templates/page.rfq.json → zuweisen zu /pages/rfq
Die Request-a-Quote-Seite. 2-Spalten-Layout: Kontaktformular links, Kontaktkarte / Öffnungszeiten / Adresse rechts. Verwendet Shopifys natives Kontaktformular-Muster — keine Quote-Management-App erforderlich.
Einstellungen
| Einstellung | Typ | Hinweise |
|---|---|---|
| Heading | Text | "Request a quote". |
| Intro text | Richtext | Kurze Beruhigung + erwartete Antwortzeit. |
| Contact name | Text | Überschrift der rechten Spalte — "Talk to a specialist". |
| Contact email | Text | mailto-Link. |
| Contact phone | Text | tel-Link. |
| Hours | Text | Z. B. "Mon–Fri · 8 AM – 6 PM ET". |
| Address | Richtext | Mehrzeiliger Adressblock. |
| NET-30 hint code | Text | Ein Code, auf den sich Käufer beziehen, wenn sie NET-30 beantragen ("Mention RFQ-NET30 in your message"). |
Formularfelder
Das Formular postet an Shopifys nativen Kontaktformular-Endpoint:
- Name (erforderlich)
- Firma (erforderlich)
- E-Mail (erforderlich)
- Telefon (optional)
- Branche (Select, optional)
- Geschätztes Bestellvolumen (Select, optional)
- NET-30-Opt-in (Checkbox) — wird beim Aktivieren an den Nachrichtentext angehängt
- Nachricht (erforderlich)
- Dateianhang (optional, Shopify-nativ)
Die Übermittlung landet in der Benachrichtigungs-E-Mail Ihres Shopify-Admins als Standard-Kontaktformular-Eintrag. Keine Drittanbieter-Integration.
Das eingebaute Kontaktformular-Muster hält Vertex vollständig Theme-Store-Richtlinien-konform und kostenlos. Wenn Sie Quote-Tracking, NET-Terms-Antragsworkflows oder Sales-Team-CRM-Integration benötigen, kombinieren Sie es mit Shopifys nativem B2B (unternehmensgebundenen Käufern) oder einer App Ihrer Wahl — Vertex' RFQ-Seite funktioniert auf beide Arten.
quick-order
Abschnittsdatei: sections/quick-order.liquid
Das Inline-Paste-to-Cart-Pad — dieselbe Engine wie main-bulk-order, aber als startseitentauglicher Abschnitt, den Sie in den Marketing-Flow einfügen können.
Einstellungen
| Einstellung | Typ | Hinweise |
|---|---|---|
| Heading | Text | "Quick order". |
| Intro text | Richtext | Einzeilige Beruhigung — "Sie wissen bereits, was Sie brauchen? Fügen Sie SKUs unten ein.". |
| Rows | Number | Standard 5. Wie viele Eingabezeilen anfänglich gerendert werden. Der "+ Add row"-Button fügt weitere hinzu. |
| Submit label | Text | "Add to cart". |
| Show 'Go to bulk order' link | Checkbox | Standardmäßig aktiviert. Verlinkt auf /pages/bulk-order für Käufer, die mehr Zeilen benötigen oder eine SKU-Validierung wünschen. |
Wann dies vs. main-bulk-order verwenden
| Anwendungsfall | Dies verwenden |
|---|---|
| Startseite, zwischen Hero und Featured Collection | quick-order |
Dedizierte /pages/bulk-order für Power-User | main-bulk-order |
| 50/50-Band gepaart mit Markenlogos | dual-brands-quickorder (siehe Startseiten-Marketing) |
Dieselbe Validierungs-Engine, dasselbe B2B-Katalog-Bewusstsein, dasselbe Ein-Klick-Hinzufügen zum Warenkorb. Der Unterschied liegt im Layout (5 Standardzeilen inline vs. ganzseitiges Pad) und in der Auffindbarkeit.
Spickzettel zur B2B-Abschnittssichtbarkeit
| Abschnitt | Gast | Angemeldet B2C | Angemeldet B2B |
|---|---|---|---|
b2b-greeting-bar | Ausgeblendet | Ausgeblendet | Sichtbar (nur Desktop, Schublade auf Mobile) |
b2b-feature-promo | Sichtbar | Sichtbar | Ausgeblendet |
main-bulk-order | Sichtbar (Storefront-Katalog) | Sichtbar (Storefront-Katalog) | Sichtbar (Unternehmenskatalog) |
main-compare | Sichtbar | Sichtbar | Sichtbar |
main-rfq | Sichtbar | Sichtbar | Sichtbar (Formular füllt Name/E-Mail/Firma vor) |
quick-order | Sichtbar (Storefront-Katalog) | Sichtbar (Storefront-Katalog) | Sichtbar (Unternehmenskatalog) |
Wie es weitergeht
- Produktseiten-Abschnitte → — Volume Pricing, MOQ, Sales-Rep-Karte auf der PDP
- Header, Footer & Chrome → — Details zum Lebenszyklus der Begrüßungsleiste
- Startseiten-Marketing → — Wo Sie die B2B-Werbung + Quick-Order auf der Startseite platzieren
- B2B-Setup-Leitfaden → — Aktivieren Sie natives Shopify-B2B + Kataloge + Unternehmen
- Storefront-Modi-Leitfaden → — Hybrid vs. B2B-only vs. B2C-only