Headless Commerce mit Shopware: Frontend-Freiheit für B2B
Mit der Shopware Store API entkoppeln wir Frontend und Backend vollständig. Das Ergebnis: maßgeschneiderte Nutzererlebnisse, blitzschnelle Ladezeiten und ein Shopsystem, das über alle Kanäle hinweg konsistent liefert — ohne Kompromisse bei Ihren B2B-Prozessen.
OCI 5.0
Punchout-Standard
3×
schnellere Frontend-Iterationen (Projekterfahrung)
40%
bessere Core Web Vitals (Projekterfahrung)
1
Backend, beliebig viele Frontends
Orientierungspreise · netto zzgl. USt.
- Entkoppeltes Frontend mit Vue.js, React oder SvelteKit
- Ein Shopware-CE-Backend für Web-Shop, App und Punchout
- Store-API-Erweiterungen als Plugin, keine Lock-in-Lizenz
- Verbindlicher Festpreis nach kostenfreiem Erstgespräch
Typisches vollständiges Headless-Projekt ab 39.000 €, schrittweiser Einstieg für einen einzelnen Bereich ab 14.900 €. Store-API-Erweiterungen nach Aufwand (Stundensatz 119 €, Tagessatz 940 €). Shopware-Lizenzkosten für optionale B2B-Funktionspakete werden getrennt ausgewiesen. Alle Preise netto zzgl. USt., verbindlich nach kostenfreiem Erstgespräch.
Klassische Shopware-Shops verbinden Frontend und Backend in einem monolithischen System. Das funktioniert gut, bis die Anforderungen wachsen: ein eigenes React- oder Vue.js-Frontend, eine native App, ein IoT-Bestellterminal oder ein maßgeschneidertes B2B-Portal mit komplexer Nutzerführung. Für solche Szenarien bietet Shopware CE mit seiner leistungsfähigen Store API eine ideale Grundlage für den Headless-Ansatz. Als spezialisierte B2B E-Commerce Agentur entwickeln wir entkoppelte Frontends, die alle Stärken moderner JavaScript-Frameworks nutzen und gleichzeitig die bewährte Shopware-Backend-Logik für Katalog, Preisfindung, Bestellabwicklung und ERP-Integration vollständig beibehalten.
Headless-B2B-Projekt: Ablauf
Was ist Headless Commerce und warum ist es für B2B relevant?
Im traditionellen E-Commerce-Ansatz steuert das Backend nicht nur die Geschäftslogik, sondern liefert auch fertig gerenderte HTML-Seiten an den Browser. Das ist einfach zu betreiben, aber unflexibel: Das Template-System des Backends bestimmt, wie der Shop aussieht und wie er sich verhält. Headless Commerce trennt diese Schichten konsequent. Das Backend — in unserem Fall Shopware CE — übernimmt Datenhaltung, Preisfindung, Bestellverarbeitung und die gesamte B2B-Geschäftslogik. Das Frontend ist eine eigenständige Applikation, die über die Shopware Store API mit dem Backend kommuniziert und die Oberfläche vollständig eigenständig rendert.
Diese Entkopplung schafft Freiheiten, die im klassischen Shopware-Storefront-Ansatz nicht erreichbar sind. Das Frontend-Team kann mit modernen Frameworks wie Vue.js, React, SvelteKit oder Next.js arbeiten, ohne Kenntnisse des PHP-Backend-Stacks zu benötigen. Iterationen am Frontend, A/B-Tests und Performance-Optimierungen können vollständig unabhängig vom Backend-Deployment durchgeführt werden. Gleichzeitig lassen sich Designvorgaben in jeder Detailtiefe umsetzen, die ein Theme-System niemals ermöglichen würde. Für B2B-Projekte mit komplexen Nutzeroberflächen, kundenindividuellen Dashboards und mehrstufigen Bestellprozessen ist das ein entscheidender Vorteil.
Die Shopware Store API als Fundament
Die Shopware Store API ist eine vollständige REST-API, die alle Funktionen des Shopware-Frontends programmatisch zugänglich macht. Produktkataloge, Kategoriestrukturen, Suchfunktionen, Warenkorb, Checkout, Kundenkonto und B2B-spezifische Funktionen wie Unternehmenshierarchien, Freigabeworkflows und individuelle Preislisten — alles ist über sauber dokumentierte Endpoints erreichbar. Die API folgt dem OpenAPI-Standard und ist vollständig typisiert, sodass Frontends automatisch generierten Client-Code nutzen können.
Produktkatalog und Suche
Vollständiger Zugriff auf Kategorien, Produkte, Varianten, Preise und Lagerbestände. Elasticsearch-gestützte Suchfunktionen mit Facettenfilterung und Autocomplete über die Listing-API.
Warenkorb und Checkout
Stateless-Warenkorb-API mit Token-basierter Session-Verwaltung. Vollständiger Checkout-Flow inklusive Adressvalidierung, Versandkostenkalkulation und Zahlungsabwicklung über alle B2B-Zahlungsarten.
Firmenkonten und B2B-Logik
Unternehmenshierarchien mit Haupt- und Unterkonten, rollenbasierte Berechtigungen, Bestellfreigabe-Workflows und budgetbasierte Einkaufslimits vollständig über API steuerbar.
Kundenpreise in Echtzeit
Kundenspezifische Preislisten, Staffelpreise und Rahmenvertragskonditionen werden in Echtzeit über die Preis-API abgerufen und im Frontend ohne Seitenreload dargestellt.
CMS und Landingpages
Shopware CMS-Inhalte, Kategorieseiten und Shopping Experiences sind vollständig über die Content-API abrufbar und können im Headless-Frontend nach eigenem Layout gerendert werden.
Authentifizierung und Sicherheit
OAuth2-basierter Token-Flow für Kundenanmeldung und Unternehmenszugriff. API-Keys für serverseitige Anfragen mit granularen Berechtigungsstufen für sichere B2B-Szenarien.
Wann ist Headless Commerce die richtige Wahl?
Headless Commerce ist nicht in jedem Projekt die optimale Wahl. Ein klassischer Shopware-Storefront-Shop ist schneller zu realisieren und ausreichend für viele B2B-Projekte. Die entkoppelte Architektur entfaltet ihren Wert, wenn spezifische Anforderungen vorliegen, die ein klassischer Storefront-Ansatz nicht wirtschaftlich erfüllen kann. In unseren Projekten empfehlen wir Headless Commerce für die folgenden Szenarien.
- Komplexe Frontend-Anforderungen, die über das Twig-Template-System hinausgehen
- Gleichzeitiger Betrieb mehrerer Frontend-Kanäle (Web-Shop, App, B2B-Portal) auf einem Backend
- Hohe Performance-Anforderungen mit LCP-Zielwerten unter 1,5 Sekunden
- Designvorgaben, die ein Framework wie Twig strukturell nicht abbilden kann
- Stark interaktive Seiten wie Produktkonfiguratoren, Live-Preisrechner oder Dashboard-Ansichten
- Internationaler Betrieb mit unterschiedlichen Marktanforderungen je Sprachregion
- Einbindung des Shopware-Backends in eine bestehende React- oder Vue.js-Applikation
Klassisch oder Headless? Wir beraten Sie ehrlich
Omnichannel im B2B: Ein Backend, viele Frontends
Ein Backend, beliebig viele Frontends
Im B2B kauft niemand über nur einen Kanal: Einkäufer bestellen im Web-Shop, der Außendienst über eine Tablet-App, Großkunden über Punchout aus ihrem Beschaffungssystem, Sonderprodukte über einen Konfigurator. Alle Kanäle sprechen dieselbe Shopware Store API — kundenspezifische Preise, Freigaben, Lagerbestände und die ERP-Anbindung leben an einem einzigen Ort im Backend.
- Web-Shop, App, Punchout-Portal und Konfigurator teilen sich ein Shopware-CE-Backend
- Kundenpreise, Freigaben und Lagerbestände werden zentral gepflegt, nicht je Kanal doppelt
- Eine Preisänderung im ERP wirkt sofort auf allen Kanälen, ohne jede Frontend-Anpassung
Im B2B-Handel erfolgt der Kauf selten über einen einzigen Kanal. Einkäufer bestellen über den Web-Shop, Außendienstmitarbeiter über eine App auf dem Tablet, Großkunden über Punchout-Verbindungen aus ihrem ERP, und bestimmte Produkte werden über ein spezialisiertes Konfigurationsportal zusammengestellt. Die Headless-Architektur ermöglicht genau dieses Szenario: Alle Kanäle kommunizieren über dieselbe Shopware Store API, und die Geschäftslogik — kundenspezifische Preise, Bestellfreigaben, Lagerbestände und ERP-Anbindung über unsere Schnittstellenplattform — lebt an einem einzigen Ort im Backend.
Das bedeutet in der Praxis: Wenn sich eine Preisregel im ERP ändert, ist die Änderung sofort auf allen Kanälen wirksam, ohne dass Frontends angepasst werden müssen. Neue Produktdaten, Kategorien oder Aktionspreise werden einmal gepflegt und stehen automatisch in Web-Shop, App und Punchout-Portal zur Verfügung. Die PIM-Integration liefert strukturierte Produktdaten ins Shopware-Backend, von wo sie über die API an alle Frontends verteilt werden. Dieses zentrale Datenmodell ist der eigentliche Mehrwert eines gut aufgebauten Headless-Systems: Es eliminiert Datensilos nicht nur zwischen Shop und ERP, sondern auch zwischen den verschiedenen Vertriebskanälen.
Technologie-Stack für Headless B2B mit Shopware
Vue.js / Nuxt.js
Bewährter Stack für komplexe B2B-Applikationen mit reichem Komponentenökosystem. Nuxt.js ermöglicht serverseitiges Rendering für optimale Core Web Vitals und SEO-Sichtbarkeit.
React / Next.js
Ideal für große Entwicklerteams und maximale Komponentenwiederverwendung. Next.js App Router mit Server Components für minimales JavaScript-Bundle und hervorragende Performance.
SvelteKit
Kompilierter Ansatz mit minimalem Runtime-Overhead. Besonders geeignet für hochperformante B2B-Portale mit reaktiven Dashboards und interaktiven Produktkonfiguratoren.
CDN und Edge Rendering
Statisch generierte Seiten über CDN- oder Edge-Infrastruktur, auf Wunsch selbst gehostet mit eigenem CDN-Layer. Dynamische API-Aufrufe an Shopware erfolgen client- oder serverseitig je nach Datensensitivität.
Composable Architecture
Headless-Frontends werden als Composition of Composables entwickelt: wiederverwendbare Logikmodule für Warenkorb, Suche und Checkout, die in allen Kanälen genutzt werden.
Shopware Frontends SDK
Das offizielle Shopware Composable Frontends SDK beschleunigt die Entwicklung mit vorbereiteten Composables für alle Store API-Endpunkte. Typsicherheit durch automatisch generierte TypeScript-Typen.
Der Entwicklungsprozess für Headless B2B-Projekte
Architektur-Workshop und API-Analyse
Gemeinsame Definition der Kanalanforderungen, Identifikation der benötigten Store API-Endpunkte und Entscheidung über den Frontend-Technologie-Stack. Analyse von SEO-Anforderungen, Rendering-Strategie (SSR, SSG, ISR) und Caching-Konzept.
API-Kontrakt und Datenmodell
Definition des vollständigen API-Kontrakts zwischen Frontend und Shopware Backend. Erweiterungen der Store API für projektspezifische B2B-Funktionen wie kundenindividuelle Dashboards oder komplexe Konfigurationslogik werden als Shopware-Plugins implementiert.
Parallel-Entwicklung Frontend und Backend-Erweiterungen
Frontend-Entwicklung gegen Mock-Services nach vereinbartem API-Kontrakt. Gleichzeitige Entwicklung der Backend-Extensions für B2B-Funktionen. Die parallele Arbeitsweise verkürzt die Gesamtprojektlaufzeit erheblich.
Integration und Performance-Testing
Verbindung von Frontend und realem Shopware-Backend. Lighthouse-Audits für Core Web Vitals, End-to-End-Tests aller B2B-Flows und Lasttests für die Store API unter realistischen Bestellvolumina.
Deployment und Monitoring
Go-Live mit verteiltem Deployment: Shopware Backend auf dedizierten Servern, Frontend auf CDN-Edge-Infrastruktur. Monitoring der API-Latenz, Frontend-Performance und B2B-Checkout-Conversion. Laufende Betreuung nach dem Launch.
Leistungsumfang: Was wir für Ihr Headless-Projekt liefern
Ein Headless-Commerce-Projekt mit Shopware CE umfasst weit mehr als die reine Frontend-Entwicklung. Wir übernehmen das gesamte Spektrum vom Architekturentwurf über die API-Erweiterungen bis zum produktionsreifen Deployment. Im Folgenden sind die wesentlichen Leistungsbausteine beschrieben, die in einem typischen Headless-B2B-Projekt enthalten sind.
Store API-Erweiterungen
Wenn die Standard-Store-API Ihre B2B-Anforderungen nicht vollständig abdeckt, entwickeln wir Custom API-Endpunkte als Shopware-Plugins. Beispiele: Dashboard-Endpunkte mit aggregierten Bestelldaten, Echtzeit-Verfügbarkeitsabfragen über mehrere Lager oder projektspezifische Konfiguratoren.
Frontend-Applikation
Entwicklung des Headless-Frontends nach Ihren Designvorgaben mit dem vereinbarten JavaScript-Framework. Vollständige Umsetzung aller B2B-Flows: Katalog, Suche, Produktdetail, Konfigurationsseiten, Warenkorb, Checkout, Kundenkonto und Unternehmensadministration.
Performance-Optimierung
Rendering-Strategie (SSR, SSG, ISR) je nach Seiten-Typ, Code-Splitting, Image-Optimierung mit Next.js Image oder Vite-Plugins, Font-Subsetting und kritisches CSS-Inlining. Zielwerte für LCP, CLS und INP gemäß Performance-Leistungen.
Mehrsprachigkeit und Internationalisierung
i18n-Integration mit Shopware-seitiger Verwaltung von Übersetzungen, Währungen und Steuersätzen. Das Frontend bezieht alle lokalisierten Inhalte über die API und passt Routing, Meta-Tags und strukturierte Daten je Sprachregion an.
Klassisch oder Headless? Wir klären es in einem Termin
Ob vollständige Entkopplung oder schrittweiser Umstieg einzelner Bereiche — im kostenfreien Erstgespräch prüfen wir, welcher Weg für Ihre B2B-Prozesse und Kanäle den größten Mehrwert bringt, mit klarem Orientierungspreis.
Was ein Headless-Projekt kostet
Headless Commerce ist kein Angebot von der Stange, aber ganz ohne Orientierung bleiben Sie im Unklaren. Deshalb nennen wir hier klare Ab-Preise für die typischen Ausbaustufen. Der genaue Preis hängt von der Zahl der Kanäle, dem Umfang der Store-API-Erweiterungen und Ihrer Rendering-Strategie ab und steht nach einem kostenfreien Erstgespräch verbindlich fest, ohne versteckte Posten.
Ausbaustufen für Ihr Headless-Projekt
Alle Preise netto zzgl. USt. Jedes Projekt beginnt mit einem kostenfreien Erstgespräch und einem klaren Angebot. Umfang, Kanäle und API-Erweiterungen bestimmen den passenden Weg.
Hybrid-Einstieg
Ein besonders anspruchsvoller Bereich headless, der Rest bleibt klassisch.
- Einzelner Headless-Bereich, z. B. Konfigurator oder B2B-Dashboard
- Anbindung an Ihren bestehenden Shopware-CE-Storefront
- Store-API-Integration mit serverseitigem Rendering
- Messbare Verbesserung ohne vollständigen Systemaustausch
Vollständiges Headless-Projekt
Komplett entkoppeltes Frontend auf Basis von Shopware CE.
- Entkoppeltes Frontend mit Vue.js, React oder SvelteKit
- Alle B2B-Flows: Katalog, Checkout, Firmenkonten, Freigaben
- Store-API-Erweiterungen als Shopware-Plugin
- Performance-Optimierung auf Core-Web-Vitals-Zielwerte
- Verteiltes Deployment und laufendes Monitoring
Store-API-Erweiterungen
Custom-Endpunkte und laufende Weiterentwicklung nach Aufwand.
- Individuelle Store-API-Endpunkte als Plugin
- Dashboard- und Echtzeit-Verfügbarkeitsabfragen
- Anpassungen und neue Kanäle im laufenden Betrieb
- Projektkontingent oder transparenter Tagessatz
Shopware-Lizenzkosten für optionale B2B-Funktionspakete werden getrennt ausgewiesen und sind nicht in den Agenturpreisen enthalten. Ein verbindliches Angebot erhalten Sie nach dem kostenfreien Erstgespräch.
Abgrenzung: Headless vs. klassischer Shopware-Storefront
Die Entscheidung zwischen Headless Commerce und klassischem Storefront-Ansatz ist eine der wichtigsten Architekturentscheidungen, die wir gemeinsam mit unseren Kunden treffen. Beide Ansätze haben ihre Berechtigung, und wir setzen bewusst keinen Standard, der für jedes Projekt gilt. Entscheidend sind Ihre konkreten Anforderungen, Ihr internes Technologieumfeld und Ihre langfristige Digitalstrategie.
| Kriterium | Klassischer Storefront | Headless Commerce |
|---|---|---|
| Entwicklungsgeschwindigkeit | Schneller Go-Live (Twig, SCSS) | Längere Initialentwicklung, schnellere Iterationen danach |
| Frontend-Flexibilität | Begrenzt auf Twig-Templates | Vollständige Freiheit im Frontend-Framework |
| Performance | Gut mit Caching-Layer | Sehr hoch (SSG/ISR, Edge Rendering) |
| Omnichannel | Aufwändig (mehrere Storefronts) | Native (ein Backend, N Frontends) |
| Betriebskomplexität | Geringer (ein System) | Höher (Frontend + Backend getrennt) |
| B2B-Funktionen | Vollständig via Shopware B2B | Vollständig via Store API |
B2B-spezifische Anforderungen in der Headless-Architektur
Headless Commerce im B2B-Kontext stellt andere Anforderungen als im Consumer-Bereich. Komplexe Unternehmenshierarchien, mehrstufige Freigabeworkflows und kundenindividuelle Katalogansichten müssen über die Store API genauso zuverlässig funktionieren wie im klassischen Storefront-Ansatz. In unseren Projekten haben wir Headless-Frontends für genau diese Szenarien entwickelt und verfügen über erprobte Muster für die Abbildung komplexer B2B-Logik im entkoppelten Frontend.
Ein besonderes Augenmerk legen wir auf die Preisstrategie im Headless-Umfeld. Im B2B ist die korrekte Darstellung kundenspezifischer Preise, Staffeln und Rahmenvertragskonditionen geschäftskritisch. Wir implementieren eine durchdachte Caching-Strategie, die sicherstellt, dass Preisseiten nie mit falschen Daten ausgeliefert werden: Preisabfragen werden mit kurzen TTLs serverseitig gecacht, und auf Kundenebene nie in öffentlichen CDN-Caches gespeichert. Das Ergebnis ist eine schnelle Preisdarstellung ohne das Risiko, einem Kunden den Preis eines anderen Kunden zu zeigen.
Für B2B-Portale mit starkem Self-Service-Charakter — etwa für das B2B-Kundenportal — eignet sich der Headless-Ansatz besonders gut. Bestellhistorien, Rechnungsarchive, Lieferstatus und individuelle Dashboards lassen sich mit einem modernen JavaScript-Framework deutlich komfortabler und reaktiver gestalten als mit einem klassischen Twig-Template. Gleichzeitig profitiert das Kundenportal von der zentralen Shopware-Backend-Logik für Berechtigungen, Unternehmenshierarchien und Preisfindung. Wie sich das im Detail umsetzen lässt, zeigen unsere Praxisbeiträge zu Marktplatz oder eigener Shop? B2B-Strategie 2026 und API-Architektur im B2B: REST, GraphQL und Message Queues.
Schrittweiser Umstieg auf Headless möglich