Produktseiten-(PDP-)Abschnitte
Die Vertex-Produktvorlage ist für technische Kataloge gebaut — Käufer, die sich um Teilenummern, Specs, Datenblätter, MOQs, Case-Packs und Volume Pricing kümmern. Jeder B2B-Touchpoint (Volume-Stufen, Login-required pricing, Quantity Rules, Sales-Rep-Karte, Versand-von, NET-Terms-Badge) wird inline auf der PDP gerendert, ohne eine einzige Begleit-App.
Dieselbe product.json-Vorlage rendert für Gäste und angemeldete B2B-Käufer. Preise, Badges, Quantity Rules und die Sales-Rep-Karte spiegeln automatisch den Unternehmenskatalog und die Zahlungsziele des Kunden wider — Sie benötigen keine "B2B-Produktvorlage" und keine "B2C-Produktvorlage" als parallele Dateien.
main-product
Abschnittsdatei: sections/main-product.liquid
Die PDP selbst — Galerie, Titel, Preis, Variantenauswahl, Mengeneingabe, ATC und jede B2B-bewusste Oberfläche zu einem Abschnitt gestapelt. Jeder Block unten ist ein main-product-Abschnittsblock, den Sie im Customizer neu anordnen können.
Galerie
- Hauptbild mit Bild-Rollover auf Listenkarten (2+ Bilder erforderlich)
- Thumbnails unter dem Hauptbild
- Klick-zum-Zoomen (Lightbox)
- Mobile: wischbares Karussell mit Punkten
Titel + Meta
- Produkttitel
- Vendor (falls angezeigt)
- Versand-von-Label — pro Produkt
vertex.ships_from-Metafield oder theme-weiter Standard - MPN-Zeile — wenn
vertex.mpngesetzt ist, zeigt "MPN: 1N4148" unter dem Titel
Preisblock
Die Preisoberfläche ist standardmäßig B2B-bewusst:
- Volume-Pricing-Stufen — serverseitig aus Shopifys
quantity_price_breaksgerendert. Käufer sehen "1–9: $4.50 · 10–49: $4.10 · 50+: $3.80" inline. Wird automatisch gerendert, wenn die Variantequantity_price_breaks_count > 0hat. - Login-required pricing — wenn die Theme-Einstellung Hide prices until customer logs in aktiviert ist, werden die Preise für Gäste durch "Log in to see pricing" + einen Anmelde-Link ersetzt.
- B2B-Compare-at-Preis — Durchstreichungs-Anzeige, wenn der B2B-Katalogpreis niedriger als der Storefront-Preis ist.
Variantenauswahl
Wird als gestaltete Buttons gerendert (Swatches für Farbe, Größenbuttons für Größe, Dropdown für andere Achsen). Out-of-Stock-Varianten sind visuell deaktiviert (durchgestrichen), aber weiterhin auswählbar, sodass der Käufer Alternativen sieht.
Mengeneingabe
Quantity Rules werden sowohl client-seitig als auch serverseitig durchgesetzt:
| Regel | Verhalten |
|---|---|
| MOQ (Minimum) | Kann nicht unter MOQ dekrementiert werden. Inline-Meldung: "Minimum order: 12". |
| Maximum | Kann nicht über Max inkrementiert werden. Inline-Meldung: "Maximum: 144". |
| Case-Pack-Schrittweite | Schrittet in Case-Pack-Größe. Manuelle Eingabe rundet auf den nächsten gültigen Wert auf mit einer kleinen Toast-Benachrichtigung. |
Käufer, die einem B2B-Katalog zugeordnet sind, erhalten die unternehmensspezifischen Quantity Rules; Gäste erhalten die Storefront-Regeln. Beide kommen aus Shopifys nativer API — Vertex rendert sie nur.
Add to cart + Buy it now
- Add to cart — Standard-ATC, deaktiviert bei Out-of-Stock, es sei denn, Pre-Order ist aktiviert
- Buy it now — Shopifys beschleunigte Checkout-Buttons (Shop Pay, Apple Pay, Google Pay, PayPal). Optional über Shopify-Einstellungen.
- Pre-Order — wenn die Variante nachbestellbar ist, ersetzt "Sold out" durch "Pre-order" (verwendet Shopifys natives Inventur-Tracking)
- Back-in-Stock-Alert — wenn die Variante ausverkauft und Pre-Order aus ist, zeigt ein E-Mail-Opt-in-Formular (nativ, keine zusätzliche App)
Sales-Rep-Karte
Für angemeldete B2B-Käufer erscheint eine Sales-Rep-Karte auf der PDP, die den zugewiesenen Rep des Unternehmens zeigt:
- Name (aus
vertex.rep_name) - E-Mail (aus
vertex.rep_email, alsmailto:-Link) - Telefon (aus
vertex.rep_phone, alstel:-Link)
Wird nur gerendert, wenn mindestens ein Rep-Feld befüllt ist und der Kunde customer.b2b? ist.
Breadcrumb
Automatisch aus der primären Kollektion des Produkts generiert. Gibt BreadcrumbList-JSON-LD aus.
Tech-Spec-Tabellen-Block
tech-specs-Block — rendert eine saubere 2-Spalten-Spec-Tabelle aus dem vertex.tech_specs-Listen-Metafield. Verwendung für Abmessungen, Gewicht, Material, Spannung, Kapazität, Zertifizierungen.
→ Siehe den Metafield-Setup-Leitfaden für die Befüllung.
Documents & Downloads-Block
documents-Block — rendert eine Liste von PDF-Downloads aus Produkt-Metafields:
- Datenblatt (
vertex.datasheet) - MSDS (
vertex.msds) - Broschüre (
vertex.brochure) - Technisches Datenblatt (
vertex.tech_sheet) - Installationsanleitung (
vertex.install_guide) - Garantiekarte (
vertex.warranty)
Wird pro Produkt automatisch ausgeblendet, wenn keine Dokumente angehängt sind.
Preisverlaufs-Offenlegung
price-history-Block — einklappbarer "Price history"-Abschnitt, der aus dem vertex.price_history-Metafield liest (Liste von Datum+Preis-Einträgen). Nützlich für industrielle Käufer, die Markttrends überwachen.
Stock-Counter (Low-Stock-Indikator)
stock-counter-Block — pro Variante Dringlichkeitssignal. Er erscheint nur für Varianten, deren Bestand Sie tracken, und wechselt zur Warnung „Only N left", sobald der Bestand auf den Low-Stock-Schwellenwert (10 Einheiten) fällt. Der Schwellenwert ist auf 10 fest eingestellt — es ist keine Theme-Einstellung. Ermutigt zum Handeln, ohne exakte Bestände an Wettbewerber preiszugeben.
Rendert einen dieser Zustände:
- Reichlich auf Lager (mehr als 10): "In stock"
- Bei oder unter 10 Einheiten: "Only 4 left in stock"
- Nachbestellbar (null, aber auf Weiterverkauf gesetzt): "Back-ordered — ships in 7–10 days"
- Ausverkauft (null, nicht nachbestellbar): "Sold out" (mit Back-in-Stock-Formular)
Wenn Hide prices until customer logs in aktiviert ist, wird der gesamte Preisblock (einschließlich Volume-Stufen und Compare-at) für Gäste durch ein "Log in to see pricing"-Prompt ersetzt. Quantity Rules, Stock-Counter und die Sales-Rep-Karte erscheinen weiterhin, damit Käufer entscheiden können, ob es sich lohnt, sich für das Produkt anzumelden.
product-tabs
Abschnittsdatei: sections/product-tabs.liquid
Abschnittsblock, der PDP-Inhalte auf Tabs aufteilt. Platzieren Sie diesen Abschnitt unter main-product in Ihrer product.json-Vorlage, um visuelle Überfrachtung bei Produkten mit langen Specs zu reduzieren.
Einstellungen pro Tab-Block: Titel, Inhalt (Richtext / Datei / Video).
Häufige Tab-Muster:
- Beschreibung — Haupt-Marketingtext
- Specs — erweiterte technische Specs jenseits der Tech-Spec-Tabelle
- Datenblatt — eingebetteter PDF-Viewer
- Versand & Rückgabe — Logistikinformationen
- Video — eingebettetes YouTube / Vimeo
Die Tabs verwenden natives <details> + <summary> für volle Tastatur-Zugänglichkeit. Der erste Tab ist standardmäßig geöffnet; das Öffnen eines anderen schließt die anderen automatisch (Akkordeon-Modus) oder bleibt geöffnet (Toggle-Modus), abhängig von der Einstellung Allow multiple open des Abschnitts.
related-products
Abschnittsdatei: sections/related-products.liquid
Empfehlungs-Strip unter der PDP. Zieht aus Same-Collection- oder Same-Tag-Produkten.
Einstellungen:
| Einstellung | Hinweise |
|---|---|
| Heading | Z. B. "Customers also viewed" oder "You may also like". |
| Source | same_collection (Standard) · same_tag · manual. |
| Max products | 4 (Standard) / 6 / 8 / 12. |
| Show price | Toggle. Respektiert Login-required-pricing-Regeln. |
| Show vendor | Toggle. |
Für B2B-Katalog-Käufer werden nur Produkte aus dem Katalog des Käufers angezeigt (Shopify-natives Filtering — Vertex respektiert dies durchgängig).
recently-viewed
Abschnittsdatei: sections/recently-viewed.liquid
localStorage-getrackte Produkte (bis zu 12 pro Käufer). Erscheint auf der PDP am unteren Rand und kann als Strip auf der Startseite platziert werden.
Wie es funktioniert
- Jede Produktansicht wird einem
vertex_recently_viewed-localStorage-Schlüssel angehängt (FIFO, begrenzt auf 12) - Der Abschnitt liest diesen Schlüssel client-seitig und holt das Karten-Markup jedes Produkts
- Wird gelöscht, wenn der Käufer die Browser-Site-Daten löscht — keine Wunschliste, nicht in Shopify persistiert
Einstellungen
- Heading — "Recently viewed"
- Max products — 4 / 6 / 8 / 12
- Hide if empty — Toggle, standardmäßig aktiviert (der gesamte Abschnitt verschwindet, wenn der Käufer keine Ansichts-Historie hat)
Eine persistente Wunschliste erfordert eine Shopify-App — Vertex bleibt Theme-Store-Richtlinien-konform, indem Recently-Viewed strikt sitzungs-/browserbezogen gehalten wird. Compare ist dasselbe Muster (siehe B2B-only-Abschnitte).
sticky-cart
Abschnittsdatei: sections/sticky-cart.liquid
Nur Mobile Sticky-ATC-Leiste, die erscheint, nachdem der Käufer am Haupt-ATC vorbeigescrollt ist. Hält das Hinzufügen zum Warenkorb einen Tipp entfernt, selbst wenn er tief in der Spec-Tabelle ist.
Was gerendert wird
- Produktbild-Thumbnail (links)
- Ausgewählter Variantentitel + Preis
- Mengeneingabe
- ATC-Button (rechts)
Einstellungen
- Show on mobile only — standardmäßig aktiviert (Desktop hat den Sticky-Header für Navigation; Mobile gewinnt mehr Konversion-Lift durch Sticky-ATC)
- Show variant title — Toggle
- Color scheme
Der Abschnitt verwendet einen IntersectionObserver auf dem Haupt-ATC — er wird nur gerendert, wenn der Haupt-ATC aus dem Viewport scrollt, und verschwindet, wenn er wieder in die Ansicht gescrollt wird.
Spickzettel zu B2B-Interaktionen
| Oberfläche | Gast | Angemeldet B2C | Angemeldet B2B |
|---|---|---|---|
| Preisblock | Ausgeblendet, wenn "Hide prices until customer logs in" aktiv | Storefront-Preis | B2B-Katalogpreis + Volume-Stufen |
| Volume-Pricing-Stufen | Ausgeblendet | Ausgeblendet | Sichtbar (serverseitig gerendert) |
| Quantity Rules | Storefront-MOQ/Max | Storefront-MOQ/Max | Unternehmenskatalog-MOQ/Max |
| Sales-Rep-Karte | Ausgeblendet | Ausgeblendet | Sichtbar (wenn Rep-Felder befüllt) |
| NET-Terms-Badge | Ausgeblendet | Ausgeblendet | Sichtbar in der Begrüßungsleiste (nicht PDP) |
| Pre-Order ATC | Sichtbar, wenn aktiviert | Sichtbar, wenn aktiviert | Sichtbar, wenn aktiviert |
| Back-in-Stock-Formular | Sichtbar bei Ausverkauf | Sichtbar bei Ausverkauf | Sichtbar bei Ausverkauf |
| Stock-Counter | Sichtbar | Sichtbar | Sichtbar |
| Recently Viewed | Sichtbar (localStorage) | Sichtbar (localStorage) | Sichtbar (localStorage) |
Wie es weitergeht
- B2B-only-Abschnitte → — Bulk Order, RFQ, Compare, B2B-Feature-Werbung
- Sales-Boost-Abschnitte → — Stock-Counter, Back-in-Stock-Alert, Quick View
- Header, Footer & Chrome → — Header, Footer, B2B-Begrüßungsleiste
- B2B-Setup-Leitfaden → — Aktivieren Sie B2B + befüllen Sie Sales-Rep-Metafields
- Metafield-Setup-Leitfaden → — Datenblätter, MPN, Versand-von, Tech-Specs