14 Minuten Lesezeit

Headless Commerce – ein Überblick mit praxisnahen Use Cases

Headless Commerce – ein Überblick mit praxisnahen Use Cases

To the English article

Bei E-Commerce- und CMS-Systemen der aktuellen Generation geht der Trend erkennbar zu sogenannten “Headless-Lösungen”. Was sich hinter dem Begriff verbirgt, welchen Mehrwert der Ansatz Onlineshop-Betreibern bietet und durch welche zentralen Headless-Merkmale sich Shopware 6 auszeichnet, erklärt dir Shopware Partneragentur Exconcept anhand von praxisnahen Use Cases in diesem Blogbeitrag.

Bereits vor einigen Jahren sind die ersten „Headless“-CMS auf den Markt gekommen, um in der Form eines neuen Headless-Ansatzes wenig später auch die Systemarchitekturen im E-Commerce zu beeinflussen. Hier erfährst du, was Headless Commerce außerdem so besonders macht und wie es unterschiedlichste Herausforderungen von Unternehmen löst. Mehr Details und Hintergründe erhältst du ebenfalls im Shopware Webinar mit ExconceptMit Headless Commerce Kunden auf jedem Kanal begeistern“. 

Was ist Headless Commerce?

Die Bezeichnung „Headless“ tauchte in den 2010er Jahren zuerst bei Headless-CMS auf und bezeichnete die Trennung von Inhalten und ihrer Anzeigeoberfläche: Inhalte und Datenobjekte sind über eine Schnittstelle für die Anzeige zu erreichen. Daran angelehnt wird der Begriff Headless Commerce im Onlinehandel verwendet, wenn ein Shopsystem die Bereitstellung von E-Commerce-Funktionen und deren Darstellung im Vertriebskanal trennt. Die Kommunikation zwischen dem Vertriebskanal (Frontend) und dem Backend, welches die E-Commerce-Funktionen bereitstellt, erfolgt nur noch über APIs. Auf diese Weise ist es möglich, die Funktionen des Onlineshops in beliebige Benutzeroberflächen einzubinden, wie wir anhand von Praxisbeispielen später zeigen.

grafik1_headless-architektur

Schematische Darstellung der Headless-Architektur eines Shopsystems

Die Einordnung von Headless als Systemarchitektur

Die Systemarchitekturen lassen sich grob in die Kategorien Monolithische, Headless-Shopsysteme und Shop Frameworks einteilen. Dabei werden die traditionellen Shopsysteme als monolithisch bezeichnet, wenn das Backend und das Frontend einen zusammenhängenden (monolithischen) Block bilden. Die Prozesse im Onlineshop sind in der Regel vordefiniert und durch die enge Verbindung zwischen Backend und Frontend ist auch die User Experience vorbestimmt. Eine Headless-Shoparchitektur bildet ein System, bei dem die Shop-Funktionen im Backend noch fest miteinander verzahnt sind, sich aber die Anbindung verschiedenster Frontends via API flexibel gestalten lässt. Das Frontend und die damit verbundene User-Führung kann frei gestaltet werden, es gibt keine fest definierte UX mehr. Frameworks hingegen lösen alle Shopping-Prozesse im Backend auf und lassen es zu, dass selbst das Zusammenspiel zwischen Produktdatenbank, Frontend, Ordermanagement und Promotions beliebig definiert werden kann.

Wesentliche Vorteile und Nachteile von Headless-Shopsystemen im Unterschied zu traditionellen E-Commerce-Plattformen

Die wichtigen Vorteile von einem auf Headless-basierten Shopsystem lassen sich wie folgt zusammenfassen:

Möglichkeit zur freien Anbindung über Schnittstellen: Bei Headless-Lösungen können die benötigten Frontends frei ausgewählt und verbunden werden – Im Gegensatz zu monolithischen Systemen mit Template-Engine.

Integration in eine bestehende Systemlandschaft: Das Headless-Shopsystem bietet Innovationspotential, indem es eine vorhandene Systemlandschaft, wie eine Website, um Inhalte wie Produktübersichten mehrwertig ergänzt, ohne sie ganz ersetzen zu müssen.

Komplett neue Usability-Möglichkeiten: Mit einem Headless-Shopsystem ist es z. B. nicht mehr nötig, den kompletten Kaufvorgang von Warenkorb bis Checkout im Frontend abzubilden. Es können die tatsächlich nötigen Funktionen implementiert werden, wodurch sich Bestellprozesse beliebig erweitern, verkürzen oder umbauen lassen.

Bestellprozesse

Erschließung neuer Vertriebskanäle: Über den API-first-Ansatz können einzelne Shop-Funktionen in die verschiedenen Nutzeroberflächen direkt integriert werden, ohne einen Browser als Grundlage zu benötigen. Damit wird die Basis für Omnichannel-Vertrieb gelegt.

Gemeinsame Integration verschiedener Datenquellen: Headless-Lösungen sind in der Lage, Daten dezentral zu organisieren und diese verschiedenen Datenquellen auf einer einzigen Nutzeroberfläche zur leichteren Verarbeitung gemeinsam abzubilden.

Sicherlich gibt es noch weitere Vorteile, die hier nicht betont wurden. Aber es sollen auch kurz die Nachteile charakterisiert werden, die man bei Headless-Shopsystemen – gerade im Vergleich mit monolithischen Shopsystemen – gerne übersieht. 

Größere funktionale Verantwortung: Statt wie bei monolithischen Systemen die Anzeige per Template-Engine zu ermöglichen, stellt das Headless-System eine API zur Verfügung. Im Template des monolithischen Systems sind bereits alle Funktionen verankert, welche das System beherrscht. Hingegen müssen im Headless-System alle Funktionen, die im Frontend vorhanden sein sollen, unter Verwendung der API implementiert werden. Auch ihre korrekte Funktionsweise muss sichergestellt werden. Die Verantwortung, dass der Shop korrekt funktioniert, liegt komplett in der Implementierung des Frontends.

Höhere technische Verantwortung: Grundsätzlich ist mehr technisches Wissen erforderlich. Die Implementierung und Einrichtung des Frontends ist für ein Headless-Shopsystem meist nur mit soliden Software-Entwicklungskenntnissen möglich. Demgegenüber kann in einem Template, das auf CSS, HTML und etwas Template-Logik basiert, mit vergleichsweise wenig Know-how eine Anpassung vorgenommen werden. Das erforderliche Know-how für die Umsetzung eines Onlineshops wächst damit enorm und die Verfügbarkeit von guten Implementierern sinkt.

Höhere initiale Kosten: Die höhere Flexibilität bei der UX, welche das Headless-Shopsystem bringt, erkauft man sich durch technischen Mehraufwand und somit höhere Kosten. Bei einer individuellen Frontend Implementierung werden diese durch die zwei erstgenannten Punkte maßgeblich verursacht. Alternativ entstehen Kosten durch ein Frontend-Framework, welches die erstgenannten Punkte mildert, dafür aber in der Regel Lizenz- oder Subscriptionskosten zur Folge hat.

Was sind zentrale Headless-Merkmale bei Shopware 6?

Shopware hat mit der Entwicklung von Shopware 6 für Headless Commerce eine sehr gute Grundlage geschaffen. Für die zentrale Datenhaltung und -steuerung ist die Shop-Software verantwortlich. Darüber hinaus können alle Bereiche über Schnittstellen (Sync, Admin und Store API) angebunden werden. Auf diese Weise lassen sich mittels Sync API größere Produkt- und Datenmengen an angebundene Systeme, wie PIM, ERP oder CRM, übertragen. Gleichzeitig spricht die Store API die entsprechenden Vertriebskanäle an und die User Experience lässt sich passend zum jeweiligen Kanal gestalten. Über die Admin API kann schließlich auch die Bearbeitungsoberfläche personalisiert und dem Unternehmensfokus entsprechend angepasst werden. Darüber hinaus hat Shopware 6 im Kern die Template-Engine für die Erstellung einfacher Onlineshops beibehalten.

 

Headlles-Commerce

 

Praxisnahe Beispiele, wie du mit Headless Commerce Kunden auf jedem Kanal begeisterst

Nachfolgend nennen wir dir typische Beispiele, bei denen – auch branchenunabhängig – eine Headless-Shopsystem-Lösung weiterhilft.

Beispiel 1: Den Onlineshop als Katalog einbinden

Dieses einfache Beispiel kommt vor allem für Unternehmen aus dem D2C- oder B2B-Bereich in Frage. Für eine bessere Kundennähe sollen Informationen zum Produktsortiment direkt auf ihrer Website in Form eines Katalogs dargestellt werden. Mit einer Headless-Lösung lässt sich das leicht umsetzen, indem die Katalogdaten mittels API vom Onlineshop zur Website übermittelt und über ein Javascript-Widget als Katalog oder als einzelne Produkte ausgegeben werden können. Ein wesentlicher Vorteil dieser Lösung besteht darin, dass die doppelte Datenpflege für die Mitarbeiter entfällt.

grafik2_shop-als-katalog

Shopware 6 übernimmt "headless" die Kataloganzeige auf den Inhaltsseiten sowie die Anzeige im Onlineshop.

Beispiel 2: Der Verkauf spezieller Produkte direkt über eine „Jetzt kaufen“-Option

Dieses Headless-Szenario ist die optimale technische Lösung für eine Reihe von Anwendungsfällen, bei denen sehr spezifische Produkte verkauft werden. Insgesamt basiert die Benutzeroberfläche der vorgestellten Szenarien nicht auf einem Shopsystem, sondern vielmehr übernehmen oft CMS-Systeme die Darstellung. Der Onlineshop ist nur mit der direkten Kauffunktion über Javascript in die Seite eingebunden, wodurch die Darstellung der Kaufprozesse auf das Wesentliche reduziert ist. Das wichtigste Merkmal dieser Fälle ist, dass diese Produkte nicht in einem Warenkorb landen, sondern nur direkt gekauft werden. Aufgrund der Größe oder Exklusivität des Produkts sind Zubehörkäufe nicht zu erwarten und die Kunden möchten das Produkt im Normalfall nur einmal kaufen.

Anwendung in der Immobilienbranche

Ein Anwendungsfall ist der Online-Verkauf von Immobilien wie Eigentumswohnungen oder Häuser. Diese Wohnobjekte werden erwartungsgemäß einzeln gekauft und der Kaufprozess ist aufgrund der exklusiven Produkte typisch für die Branche. Statt der gewohnten User Experience aus (bisherigen) B2C-Shopping-Erlebnissen finden die Kunden hier keinen Warenkorb vor, es gibt keinen Payment Service Provider, der die Zahlungsabwicklung übernimmt, und der Versand entfällt. Dafür kann der Kunde seine Wunschimmobilie oft individuell ausstatten. Mit der Headless-Lösung funktioniert die Nutzeroberfläche unabhängig vom Onlineshop. Sie beinhaltet alle wesentlichen Informationen zum Produkt und den Kunden bietet sich über die „Jetzt kaufen“-Option ein komplett anderes Kaufssystem (und Kundenerlebnis), das an dieser Stelle ausgelöst wird.

Eine identische Problemstellung findet man zum Beispiel auch beim Verkauf von Online-Services wie einer Subscription oder einem physischen Zeitungsabonnement.

grafik3_jetzt-kaufen-option

Mit der "Jetzt kaufen"-Option spezielle Produkte wie Subscriptions verkaufen, ohne einen kompletten Onlineshop zu benötigen.

Beispiel 3: Native Apps als sinnvolle Ergänzung zum Onlineshop 

Hauseigene Shopping-Apps können dann erfolgreich werden, wenn sie einen echten Mehrwert für die Mobilgeräte und respektive ihre Nutzer liefern. So kann die App sinnvolle Werkzeuge anbieten, die das Einkaufserlebnis verbessern – etwa beim Kauf von Farben. Hier sind Funktionen wie Mengenrechner, Farbwähler und -vergleich sowie eine Wandfarbenvorschau auf dem Smartphone nützliche Hilfsmittel, die den Kunden bei der Produktwahl unterstützen. Und natürlich ist der Kunde anschließend in der Lage, das vorgeschlagene oder gewählte Produkt auch direkt über die Native Shopping-App dank der Headless-Einbindung des Onlineshops zu erwerben.   

grafik4_miss-pompadour-app

Ein Einblick in die Native App von MissPompadour

Beispiel 4: Headless Commerce im B2B-Bereich mit Customer-Service-Portalen

Auch im B2B-Bereich finden sich verschiedene Anwendungsfälle, von denen Customer-Service-Portale ein gutes Beispiel für den Einsatz von Headless Commerce sind. Das Ziel ist es, die Verarbeitung von Serviceleistungen, wie Ersatzteilbestellungen, rund um individuell produzierbare Produkte (zum Beispiel schwerer Baugeräte) für Kunden und Hersteller zu vereinfachen. Die Informationen aus verschiedenen Systemen, so etwa CRM-, PIM- oder ERP-System, werden hierfür Headless in einer Nutzeroberfläche gebündelt präsentiert. 

Nach dem Login sind für den Kunden dadurch alle wichtigen Informationen sowie Funktionen direkt verfügbar: von der Auflistung eigener Daten und bisheriger Produktkäufe, über Vorschläge zu passenden Ersatzteilbestellungen bis hin zur Möglichkeit, neue Bestellungen abzuschließen. 

Für die Abbildung dieser Prozesse im Frontend reicht der Funktionsumfang eines standardisierten Onlineshops nicht mehr aus. Die Lösung hierfür ist ein Headless-Shopsystem, mit dem sich über die Schnittstellen die jeweiligen Vorgänge entsprechend zusammenstellen und gemeinsam abbilden lassen.

Weitere Infos im Webinar

Für mehr Details zur Lösung des vorgestellten Szenarios sowie weiteren praxisnahen Beispielen möchten wir auf das gemeinsam mit Shopware durchgeführte Webinar zum Thema „Mit Headless Commerce Kunden auf jedem Kanal begeistern“ verweisen. 

Wie zukunftsfähig ist Headlesss Commerce im Onlinehandel? 

Wie wir im Beitrag gezeigt haben, sind Headless-Lösungen vielseitig einsetzbar und finden Anwendung im B2C-, D2C- sowie B2B-Commerce. Die vielfältigen Einsatzgebiete sind möglich durch die Trennung der Benutzeroberfläche vom Backend sowie der flexiblen Gestaltungsmöglichkeit der gesamten Systemlandschaft durch die Schnittstellenanbindungen (API-first).

So eignet sich der Headless-Ansatz des Shopsystems als ideales Werkzeug für eine technische Implementierung von komplexeren Herausforderungen – beispielsweise bei Katalogdarstellungen auf der Website oder für die Präsentation sehr spezieller Produkte wie Subscription-Modelle. Die Notwendigkeit, das Backend zunächst mit einem Frontend zu verbinden, macht die Realisierung von Headless-Commerce-Lösungen jedoch technisch aufwendiger. Ein technischer Mehraufwand, den man auch tragen muss, wenn man nur einen einfachen Onlineshop umsetzen möchte.

Hier zeigt sich jedoch der große Vorteil von Shopware 6, das im Gegensatz zu anderen Shop-Systemen die Template-Engine beibehalten hat. Auf diese Weise verbindet es die Vorzüge der Headless-Architektur mit der Möglichkeit, auch einen einfachen Onlineshop mit Template umsetzen zu können.

Erfahre mehr zum Thema Headless Commerce und lade dir unser kostenloses Whitepaper herunter!

Über EXCONCEPT

EXCONCEPT unterstützt dich bei der Erstellung innovativer und zukunftsfähiger E-Commerce-Lösungen im B2C- und B2B-Umfeld. Mit vielfältigsten Leistungen von Beratung, Umsetzung bis zum technischen Support begleiten sie dich optimal durch den gesamten Lebenszyklus deines digitalen Projektes. Weitere Infos zu EXCONCEPT findest du hier. 

Das könnte dich auch interessieren:

Newsletter

Nichts mehr verpassen. Wir halten Dich per E-Mail auf dem Laufenden.

Zum Newsletter-Manager