Vertex — Das Premium B2B- & Wholesale-Shopify-Theme
Vertex ist ein Premium-Shopify-Online-Store-2.0-Theme, das speziell für Händler im Bereich Industriebedarf, MRO (Maintenance, Repair & Operations), Wholesale, Fachhandel und Händleraccounts entwickelt wurde, die Shopifys native B2B-Funktionen benötigen, damit ihre Storefront auch tatsächlich wie eine B2B-Storefront aussieht — ohne eine einzige Companion-App, ohne Monatsabo und ohne Drittanbieter-Skripte.
Jedes Shopify-native B2B-Objekt — Staffelpreistabellen, Mengenregel-Durchsetzung, NET-30-/NET-60-/NET-90-Zahlungsziele, steuerbefreite Accounts, Multi-Location-Unternehmenswechsel, B2B-Kataloge, Quote Requests — wird mit der Eleganz dargestellt, die Ihre Vertragskäufer erwarten. Procurement-Teams, Facility-Manager und Händleraccounts erhalten eine Storefront, die die Katalogklarheit von McMaster-Carr, Grainger und Fastenal widerspiegelt und gleichzeitig vollständig OS 2.0 bleibt.
B2C-ready ab Werk
Vertex ist nicht reine B2B. Jede B2B-Funktion degradiert elegant, wenn kein eingeloggtes Unternehmen vorhanden ist, und ein einzelner Storefront-mode-Toggle (Hybrid / B2B-only / B2C-only) lässt Sie entscheiden, wie viel B2B-Chrome Sie zeigen möchten. Dasselbe Theme läuft ab dem ersten Tag als ausgefeilte Industriebedarf-B2C-Storefront — keine zweite Lizenz, keine parallele Codebasis.
Für wen Vertex gedacht ist
- Distributoren für Industriebedarf — Verbindungselemente, Hardware, Werkzeuge, Schleifmittel, Flüssigkeiten
- MRO-Lieferanten — Verbrauchsmaterialien für Wartung, Reparatur und Betrieb
- Wholesale-Händler — Trade-only-Kataloge mit gestaffelten Preisen
- Auto-Teile-Distributoren — teilenummerngetriebene Kataloge mit großer Lagertiefe
- Büro-, IT- und Elektronikhändler — Verbrauchsmaterialien und gerätespezifischer Bedarf
- Print- und Reprografiehändler — Toner, Tinte und Reprografie-Verbrauchsmaterial
- B2C-Industriebedarf-Händler — Verkauf an kleine Unternehmen und Endkunden
Wenn Ihre Käufer nach Teilenummern suchen, Mengenrabatte erwarten, 50-Zeilen-Bestellungen aus einer Tabellenkalkulation platzieren, NET-30-Zahlungsziele benötigen oder Dokumentation (Datenblätter, MSDS, Zertifizierungen) inline auf der Produktseite wünschen — Vertex wurde für sie entwickelt.
Der vollständige Funktionskatalog
Dieser Abschnitt ist die definitive Liste jedes Features in Vertex v1.0.0. Jeder Eintrag verlinkt auf seine dedizierte Anleitung, sofern verfügbar.
Native B2B (keine Apps, keine Abos)
| Feature | Was es tut |
|---|---|
| Staffelpreistabellen | Server-gerenderte gestaffelte Preise aus Shopifys quantity_price_breaks. Käufer sehen den Stückpreis für jede Mengenstufe auf der PDP, im Warenkorb und auf der Bulk-Order-Seite. |
| Mengenregel-Durchsetzung | MOQ (Mindestbestellmenge), Maximalbestellmenge und Verpackungseinheiten-Inkremente werden client-seitig (UI-Guard) und server-seitig (Shopify-nativ) validiert. |
| Login-erforderliche Preise | Ein einzelner Theme-Setting-Toggle blendet alle Preise für Gäste aus und ersetzt sie durch "Zum Anzeigen der Preise anmelden". Käufer sehen Preise erst nach der Anmeldung. |
| NET-30-/NET-60-/NET-90-Zahlungsziele | Automatisch erkannt aus dem Payment-Terms-Metafield des Unternehmens. Erscheint als Badge in der kobaltblauen Begrüßungsleiste und beim Checkout. |
| Steuerbefreiungs-Badges | Automatisch aus Shopifys nativem Company-Tax-Status erkannt. Erscheint auf PDP, im Warenkorb und in der Begrüßungsleiste. |
| Multi-Location-Unternehmenswechsel | Käufer, die mehreren Unternehmen zugeordnet sind, können in einem dedizierten Dropdown im Mobile Drawer zwischen ihnen wechseln. |
| Ship-to-Location-Switcher | Ein-Klick-Wechsel zwischen den autorisierten Lieferadressen des Käufers. Erscheint als gestyltes Dropdown in der kobaltblauen B2B-Begrüßungsleiste (Desktop) und im Account-Bereich des Mobile Drawers. |
| B2B-Katalog-Scoping | Käufer sehen nur Produkte + Preise, die dem Katalog ihres Unternehmens über Shopifys natives B2B-Catalogs-Feature zugewiesen sind. Vertex respektiert dies durchgängig. |
| Bulk-Paste-to-Cart-Quick-Order-Seite | Dediziertes /pages/bulk-order-Template. Käufer fügen SKU,Menge-Zeilen aus einer Tabellenkalkulation 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. |
| Quick Reorder | "Erneut bestellen"-Button bei vergangenen Bestellungen. Erneut bestellt die gesamte Bestellung auf einmal ODER zeilenweise aus dem Kundenkonto-Dashboard. |
| Request-a-Quote (RFQ)-Seite | Dediziertes /pages/rfq-Template unter Verwendung von Shopifys nativem Kontaktformular-Muster. E-Mail an den Händler; keine Quote-Management-App erforderlich. |
| Vertriebs-Kontakt-Pill | Pro-Unternehmen-Vertriebsinformationen aus den Metafields vertex.rep_name, vertex.rep_email, vertex.rep_phone. Erscheint als Sticky-Pill im Desktop-Header (≥1170px) und als Full-Width-Karte am unteren Rand des Mobile Drawers (<1170px). |
| B2B-Begrüßungsleiste | Kobaltblaues Band über dem Header, das den Firmennamen, das NET-Terms-Badge, das Steuerbefreiungs-Badge sowie Sprach-/Währungs-/Lieferadress-Switcher anzeigt, wenn der Käufer angemeldet ist. Wird für Gäste und im B2C-only-Modus automatisch ausgeblendet. |
| B2B-Feature-Promo-Strip | Startseiten-Band, das B2B-only-Features hervorhebt (Staffelpreise, Bulk-Bestellung, RFQ, NET-30) — sichtbar für Gäste als Marketing-Text. |
| B2B-bewusstes Kunden-Dashboard | Das /account-Template erkennt B2B-Käufer und zeigt Unternehmensinformationen, Zahlungsziele, Quick Reorder und die Vertriebskontakt-Karte an. |
→ Vollständiger B2B-Setup-Guide
Produktseite (PDP) — für technische Kataloge gebaut
| Feature | Was es tut |
|---|---|
| Tech-Spec-Metafield-Tabellen | Ein dediziertes tech_spec_row-Metaobject + vertex.*-Metafields rendern einen sauberen Spec-Block auf der PDP. Deckt Maße, Gewicht, Material, Zertifizierungen, Spannung, Kapazität usw. ab. |
| Dokumente & Downloads | Pro-Produkt-PDF-Links werden automatisch in einem "Dokumente"-Block gerendert: Datenblatt, MSDS, Broschüre, technisches Datenblatt, Installationsanleitung, Garantiekarte. Wird pro Produkt automatisch ausgeblendet, wenn keine Dokumente angehängt sind. |
| Preishistorie-Offenlegung | Optionales vertex.price_history-Metafield (Liste von Datum+Preis-Einträgen) rendert einen einklappbaren "Preishistorie"-Block auf der PDP. |
| Versendet-aus-Label | Pro-Produkt-vertex.ships_from-Metafield (oder Theme-weiter Standard) erscheint unter dem Titel — nützlich für Distributoren mit regionalen Lagern. |
| Stock-Counter (Geringer-Bestand-Indikator) | Pro-Variante-Stock-Counter auf der PDP, konfigurierbarer Schwellenwert. Erzeugt Dringlichkeit, ohne den exakten Bestand an die Konkurrenz preiszugeben. |
| Pre-Order-ATC-Button | Varianten, die als nachbestellbar markiert sind, zeigen einen "Vorbestellen"-Button anstelle von "Ausverkauft" an. Nutzt Shopifys native Bestandsverwaltung. |
| Side-by-Side-Produktvergleich | Sticky-Compare-Leiste verfolgt bis zu 4 Produkte; dediziertes /pages/compare-Template rendert eine vollständige Spec-Row-Vergleichstabelle. Nur sitzungsbasiert — keine Wunschliste. Vollständig konform mit den Richtlinien des Shopify Theme Stores. |
| Quick-View-Modal | "Quick View"-Button auf Produktkarten öffnet ein Modal mit Produktgalerie, Varianten-Picker, Mengeneingabe und ATC — ohne das Listing zu verlassen. |
| Produkt-Tabs | Dedizierter Section-Block für die PDP, der Produktinhalte über Tabs aufteilt (Beschreibung / Specs / Datenblatt / Versand / Video). |
| Zuletzt angesehen | localStorage-getrackte Produkte (bis zu 12 pro Käufer); erscheint unten auf der PDP. Wird gelöscht, wenn der Käufer seine Browserdaten löscht. |
| Verwandte Produkte | Empfehlungen aus derselben Kollektion oder mit denselben Tags unter der PDP. |
| Bild-Rollover auf Produktkarten | Wenn ein Produkt 2+ Bilder hat, wechselt das Bild beim Hover auf die Listing-Karte zum zweiten Bild. |
Header, Navigation, Lokalisierung
| Feature | Was es tut |
|---|---|
| Announcement Bar | APEX-style-Top-Leiste mit Link-Slots, Social-Icons, Telefon und einem schließbaren × auf der rechten Seite (localStorage-persistent). Drei Farbschemata: Dark (Standard), Accent (Marke) und Light. |
| Zwei Header-Layouts (automatisch angewendet) | Gast: Weißer Haupt-Header mit Logo + Predictive-Search + Sprach-/Währungs-Pills + Anmelden/Registrieren + Warenkorb. Eingeloggt B2B: dasselbe + kobaltblaue Begrüßungsleiste darüber mit Firmen-Badges und Switchern. |
| Mega Menu | Mehrspaltige Dropdown-Panels mit optionalen Icons und einem dedizierten "Shop-by-Brand"-Grid (Hairline-Divider-Grid). |
| Simple-Dropdown-Alternative | Wenn der Händler eine flache Liste pro übergeordneter Menüposition bevorzugt. Automatisch erkannt oder pro Einstellung erzwingbar. |
| Rechtsbündige Sekundär-Nav | Spezialangebote / Anleitungen / Services / FAQ — automatisch nach Handle erkannt, wenn eine secondary-menu-Linkliste existiert. |
| Predictive-Search-Overlay | Produkte / Kollektionen / Seiten / vorgeschlagene Suchanfragen mit Bild-Thumbnails. Erkennt Hersteller-Teilenummern über das vertex.mpn-Metafield. |
| Sticky-Header beim Scrollen | Admin-Toggle — heftet den Header an den Viewport. |
| REP-Pill-Style-Switcher | Sprache + Währung werden als kleine kreisförmige Flag-Avatar-Pills mit einem 2-Zeilen-Text-Stack (Eyebrow + ISO-Code) und einem Chevron gerendert. Der Mobile Drawer hat dieselben Pills in voller Breite in einem 2-spaltigen Grid für die einhändige Bedienung. |
| Custom-Dropdown-Panels | Null natives <select> irgendwo. Sprache, Währung und Lieferadresse verwenden alle ein gemeinsames <details>+Custom-Panel-System mit Hover-Zuständen, Markierung der aktuellen Auswahl, Check-Icon, Fade-in-Animation, gegenseitigem Ausschluss, Schließen-bei-Klick-außerhalb, Schließen-mit-Escape. |
| Multi-Currency via Shopify Markets | Currency-Pill wird auch für B2B-Käufer gerendert, die an einen einzelnen Market gepinnt sind — informativ, damit sie immer sehen, in welcher Währung sie bezahlen. |
| 5 Sprachen ausgeliefert | Englisch (Standard), Französisch, Italienisch, Deutsch, Spanisch — vollständige UI-Strings + Schema-Strings in locales/. |
| Vollständige RTL-Unterstützung | <html dir> wechselt automatisch für Arabisch, Hebräisch, Farsi, Urdu, Jiddisch, Kurdisch, Dhivehi, Paschto. Kann über die Lokalisierungs-Theme-Einstellung erzwungen werden. |
| Tablet-bewusster Breakpoint | Bei <1170px (Mobile + Tablet) übernimmt der Hamburger-Drawer. Bei ≥1170px wird die volle Desktop-Nav angezeigt. |
→ Storefront-Modus-Guide · Markets-&-Multi-Currency-Guide
Marketing-Sections (30+ in der Startseiten-Palette)
| Section | Zweck |
|---|---|
| Hero | Multi-Slide-Rotator mit Auto-Advance, Dot-Navigation, editorialer Komposition. Standardmäßig 1 Slide für schnellsten LCP. |
| Featured Collection | Produkt-Grid; akzeptiert @app-Blöcke für Theme-Store-Konformität. |
| Collection List | Kategorie-Grid mit Bild-Overlays. |
| Image with Text | Editoriale Paarung (Text + Bild, 50/50 oder asymmetrisch). |
| Multicolumn | 2–4-Spalten-Grid (Icons + Text + optionaler Link). |
| Rich Text | Zentrierter Intro- / About-Block. |
| CTA Banner | Pre-Footer-Call-to-Action mit Überlapp-in-Footer-Effekt; per-Kundenstatus-Text (Gast vs B2B). |
| Newsletter | E-Mail-Opt-in mit Subscribe-Button. |
| FAQ | Disclosure-basiertes Accordion; emittiert automatisch FAQPage-JSON-LD für Rich Snippets. |
| Logo List | Marquee-scrollende Markenlogos mit Fading-Grid-Linien. |
| Testimonials | Bewertete Karten mit Avatar-Overlap-Header-Treatment. |
| Stats Bar | Dark-Mode-KPI-Band (z. B. "40.000+ SKUs · NET-30 · 24-Std.-Versand · ISO 9001"). |
| Industries Grid | Editoriales Karten-Grid (z. B. HVAC, Manufacturing, Facilities). |
| Resource Hub | Downloads-Liste — Datenblätter, MSDS, Broschüren. |
| Press Coverage | Logo-Strip + Pull-Quotes. |
| Timeline | Chronik für About-Seite (Jahr + Meilenstein). |
| Services Grid | Bild-Overlay-Tiles für Service-Angebote. |
| Countdown Timer | Tage / Stunden / Minuten / Sekunden — werbend. |
| Featured Bundles | Kuratierte Bundle-Karten mit Rabatt-Badges. |
| Promo Banner | Schließbares Top-Banner mit localStorage-Persistenz. |
| Promo Popup | Auto-Open + Exit-Intent + localStorage; händlerkonfigurierbare Kadenz. |
| Quick-Order-Pad | Inline-Paste-to-Cart-Pad (homepagebereite Version der vollen Bulk-Order-Seite). |
| Recently Viewed (Homepage) | Dasselbe Widget wie PDP, erscheint auf der Startseite als Strip. |
| Related Products | Cross-Sell-Strip auf PDP. |
| Sticky Cart Bar | Mobile-only-Sticky-ATC-Strip. |
| Dual Brands + Quickorder | 50/50-Merged-Section, die Markenlogos + Quick-Order-Pad kombiniert. |
| Dual Resources + FAQ | 50/50-Merged-Section, die Downloads + FAQ kombiniert. |
Was Vertex sein kann
Vertex liefert einen fertigen Stil (Industrie / MRO). Dasselbe Theme lässt sich für andere Vertikalen neu einfärben und umkonfigurieren — das sind Konfigurationen, die Sie aufbauen im Theme-Editor mit einer Farbpalette und der Section-Bibliothek, keine separaten installierbaren Themes:
| Konfiguration | Branche | Farbpalette |
|---|---|---|
| Vertex (Standard) | Industrial / MRO-Bedarf | Custom (Kobaltblau) |
| Autoteile | Auto-Teile | Signal red |
| Büro & IT | Büro, IT & Elektronik | Office blue |
| Druckerbedarf | Druckerbedarf | Inkline teal |
Jede davon ist dasselbe Theme, neu eingefärbt (über die Starter-Farbpalette) und umkonfiguriert (Sections + Copy) für diese Vertikale — ein Ausgangspunkt, den Sie selbst einrichten, kein separates Theme zum Installieren.
Mitgelieferte Templates (Online Store 2.0)
Erforderliche Shopify-Templates (jedes ist vorhanden): index.json, product.json, collection.json + list-collections.json, cart.json, search.json, blog.json + article.json, page.json, 404.json, password.json, gift_card.liquid.
Customer-Account-Suite: customers/account.json (B2B-bewusst), activate_account.json, addresses.json, login.json, order.json (mit zeilenweisem + vollständigem Reorder), register.json, reset_password.json.
Custom-Page-Templates — können auf jeder neuen Seite verwendet werden: page.about.json, page.contact.json (2-Spalten), page.faq.json, page.rfq.json, page.bulk-order.json, page.compare.json, page.services.json, page.special-offers.json.
Performance
- Vanilla ES Modules — kein Bundler, kein Framework, kein jQuery, null Drittanbieter-Skripte zur Laufzeit
- Per-Section-CSS —
section-{name}.csswird nur von der Section geladen, die es besitzt. Kein globales Megabundle. - Inlined Design Tokens in
layout/theme.liquideliminiert eine render-blockierende CSS-Anfrage - WebP-Hero-Bilder in mehreren Breiten via
<picture><source srcset> font-display: optionalauf Body- + Heading-Schriften, um LCP schnell zu halten- Server-gerenderte Preise — JS berechnet Preise nie neu, sondern erweitert nur
- Preload Body- + Heading-Basis-Schriften, preconnect zu
fonts.shopifycdn.com - Background-Image-Hero-Ansatz + 1-Slide-Standard-Layout = wiederhergestellter LCP auf Mobilgeräten
- Aufgezeichneter Lighthouse: Performance 65–100 mobile, 90+ desktop
Barrierefreiheit (WCAG 2.1 AA)
- Überall mit Tastatur bedienbar (Custom-Dropdowns verwenden natives
<details>/<summary>; Pfeiltasten-Navigation im Mega Menu) - Sichtbarer Fokus auf jedem interaktiven Element (Focus-visible-Stil-Ring)
- 4,5:1 Mindestkontrast durchgängig; Palette getestet
- 24-px-Mindest-Touch-Targets auf Mobilgeräten
- Beschriftete Inputs + ARIA-Rollen (
role="menu",menuitemradio,aria-checked,aria-current) - Skip-to-Content-Link
- Auto-RTL-Umschaltung mit optionalem manuellem Override
SEO & Social
- Vollständiger JSON-LD-Schema-Graph — Organization, WebSite + SearchAction, BreadcrumbList (PDP), Product (mit GTIN, shippingDetails, returns), BlogPosting, ContactPage + LocalBusiness, FAQPage, ItemList (Collection)
- Open Graph + Twitter Card Meta auf jeder Seite (
og:image,og:locale,og:image:alt,twitter:image,twitter:site) rel="next"/rel="prev"auf Collection- + Blog-Paginationfetchpriority="high"auf dem ersten Collection-Karten-Bild (LCP-Gewinn)- Sitewide
noindexauf 12 Utility-Seitentypen (Account, Suche etc.) - hreflang automatisch ausgegeben für alle 5 veröffentlichten Locales
- Favicon wird als SVG-Fallback + einstellungs-überschreibbarer PNG-Slot ausgeliefert
- Google-Merchant-Center-Felder — GTIN, Versanddetails, Retouren
Datenschutz & Compliance
- Kein eigener Cookie-Banner — verwendet Shopifys natives Customer-Privacy-Banner (bessere Lighthouse-Best-Practices-Bewertung, weniger zu wartender Code, keine Policy-Überraschungen)
- Theme-Store-Policy-konform — kein Drittanbieter-Tracking, keine Affiliate-Links, keine Designer-Credits in den Theme-Dateien
Was (noch) NICHT enthalten ist
Um die richtigen Erwartungen zu setzen:
- PO-Upload (Purchase-Order-PDFs als Zahlung) — abhängig davon, dass Shopify die entsprechende native API ohne Companion-App freigibt. Geplant für v1.1.
- Approval Workflow (mehrstufige interne Freigaben vor dem Checkout) — gleiche Abhängigkeit. Geplant für v1.1.
- Wunschliste — bewusst nicht enthalten. Produktvergleich ist gemäß Theme-Store-Policy nur sitzungsbasiert; persistente Wunschlisten erfordern eine App.
- Live-Chat — wir empfehlen Shopifys nativen Chat oder eine beliebige Drittanbieter-App Ihrer Wahl.
Schnellstart
- Installieren Sie Vertex aus dem Shopify Theme Store (Online Store ▸ Themes ▸ Add theme)
- Aktivieren Sie natives B2B (Settings ▸ Customer accounts ▸ Enable B2B). Ohne dies wird B2B-Chrome automatisch ausgeblendet — das Theme funktioniert weiterhin als ausgefeiltes B2C-Theme.
- Befüllen Sie den
vertex-Metafield-Namespace — Datenblätter, MPN, Vertriebskontakte, Versendet-aus. Siehe Metafield-Setup-Guide. - Wählen Sie eine Starter-Palette — Customize ▸ Theme settings ▸ Colors ▸ Starter color palette. Wählen Sie: Custom (Kobaltblau ab Werk), Signal red, Office blue oder Inkline teal.
- Anpassen in Themes ▸ Customize und Veröffentlichen.
→ Vollständige Installations-Anleitung
Was kommt als Nächstes
- Installation → — Schritt-für-Schritt-Installation + B2B-Aktivierung
- Theme-Settings-Referenz → — Jede Einstellung in den Theme Settings, erklärt
- Section-Setup-Guides → — Wie jede Section konfiguriert wird
- Feature-Guides → — B2B-Setup, Metafields, Storefront-Modi, Markets, was Vertex sein kann, Kundenkonto, RFQ
- FAQ + Troubleshooting → — Häufigste Fragen beantwortet
- Changelog → — Was in jedem Release neu ist
- Support → — So erreichen Sie uns