Kopflose Webshops? Das steckt hinter Headless E-Commerce
Was ist eigentlich “Headless E-Commerce” und warum sollte jemand etwas Kopfloses haben wollen? Eines vorweg: Die Zukunft von Webshops liegt in Systemen, die flexibel sind. Dabei ist Headless ganz und gar nicht kopflos, sondern die Grundlage für unendliche Möglichkeiten.
Die Ansprüche an eine gute Experience beim Onlineshopping werden immer höher. Mit Standardfunktionen und einem schönen Design alleine beeindrucken Sie schon lange niemanden mehr. Wichtig sind vor allem Responsiveness, also die Usability auf verschiedenen Endgeräten, schnelle Ladezeiten sowie Personalisierung. Die online-affine Kundschaft von heute möchte alles perfekt auf sich zugeschnitten, und zwar jederzeit und überall.
Die immer schneller steigenden Ansprüche führen dazu, dass auch Änderungen und Ergänzungen am Webshop immer schneller vorgenommen werden müssen. Und genau bei diesem Punkt wird’s mit Headless E-Commerce richtig interessant.
Frontend und Backend sind voneinander getrennt
Der grosse Unterschied zwischen Headless und herkömmlichen E-Commerce-Systemen ist die Trennung von Frontend und Backend. Das bringt den wesentlichen Vorteil mit sich, dass man sie unabhängig voneinander (weiter-)entwickeln kann.
Würde man das Konzept “Headless” mit der menschlichen Anatomie vergleichen, würde das heissen: Das Frontend ist der Körper, das Backend der Kopf. Beide haben bestimmte Aufgaben und können diese unabhängig von einander ausführen.
Die Logiken und Prozesse des Kopfes etwa sind dem Körper völlig egal. Er hat nur eine einzige Aufgabe: Gut aussehen. Dafür dann gerne so richtig gut!
Der Kopf wiederum funktioniert ganz unabhängig von den Designentscheidungen des Körpers. Bausteine wie Bilder, Produktbeschreibungen und Preise sind zentral gespeichert und in welcher Form sie letztendlich ausgespielt werden macht für das Backend keinen Unterschied.
Damit ein Webshop seinen Zweck erfüllen kann, braucht es natürlich beides. Nur der Körper alleine gäbe es zwar ein UI Design, aber ohne Informationen und ohne Kaufprozess. Nur mit dem Kopf alleine wäre dies zwar alles da, aber für die User gar nicht sichtbar. In dieser Hinsicht sind Kopf und Körper dann doch wieder voneinander abhängig. Dennoch bringt die Tatsache, dass die beiden nicht aufeinander Rücksicht nehmen müssen, viel Flexibilität und viele zusätzliche Möglichkeiten mit sich.
Ein Kopf – unterschiedliche Kundenerlebnisse
Dadurch, dass der Kopf nur für Daten und der Körper nur für die äusserliche Erscheinung da ist, sind beide komplett austauschbar. Ein Kopf kann sogar mehrere Körper gleichzeitig mit Daten bespielen.
Setzen Sie Ihren Kopf etwa zusätzlich auf den Körper von einer bestimmten App, von anderen Shops wie Amazon oder von Sprachassistenten wie Siri und Alexa.
Auch in Sachen Devices sind Sie mit Headless sehr flexibel. Da alle Daten des Backends an einem zentralen Ort gespeichert sind, lassen sie sich mit jedem internetfähigen Gerät ausspielen. Egal ob Laptop, Handy oder smarter Kühlschrank – jedes Frontend holt sich aus dem Backend über APIs einfach jene Daten, die es gerade braucht.
Zudem eignet sich Headless E-Commerce perfekt für Personalisierung. Sie können damit mühelos neue Funktionen hinzufügen, die individuell auf die User zugeschnitten sind. Dadurch, dass alle Daten zentral sind, funktioniert dies nahtlos.
Progressive Web Apps für höhere Ladegeschwindigkeiten
Beim Stichwort Headless darf auch der Begriff “Progressive Web App (PWA)” nicht fehlen. PWAs bilden die Web-Oberfläche für die Inhalte von E-Commerce und haben Merkmale, die einst nativen Apps vorbehalten waren – unter anderem eine ausgezeichnete Performance.
So ermöglichen PWAs etwa die Offline-Fähigkeit im Webbrowser. Das funktioniert so: Sobald ein User einen Onlineshop zum ersten Mal besucht, werden Warenkorb, Kasse, Checkout und jede aufgerufene Seite direkt geladen und im Local Storage des Geräts abgelegt. Dadurch erreicht die Website eine deutlich höhere Ladegeschwindigkeit. Das verbessert übrigens nicht nur die User Experience, sondern führt auch zu besseren Rankings bei Suchmaschinen.
Nehmen wir an, ein User legt bei Ihrem Webshop ein Produkt in den Warenkorb und steigt in einen Aufzug ohne Internetverbindung, um 30 Stockwerke nach oben zu fahren. Bei einem herkömmlichen Webshop müsste er jetzt warten, bis sich die Türen wieder öffnen. Doch dank PWA und Headless E-Commerce kann der User während der Fahrt den Checkout-Prozess im Frontend fortführen – ganz ohne Internetverbindung. Sobald diese wieder besteht, wird die Bestellung im Backend registriert und verarbeitet, als wäre nichts gewesen.
Beispiele für Headless E-Commerce Systeme
Ein gutes Beispiel für einen gelungenen Webshop mit einem Headless System ist etwa der Butcher Shop The ASH. Bei diesem Projekt haben wir Backend und Admin Dashboard mit dem Framework Saleor programmiert, das wir sehr empfehlen können. Dank seiner Flexibilität ist der Webshop ein zukunftssicherer Grundstein für die Restaurantkette The ASH, um ihr digitales Ökosystem weiter auszubauen.
Auch beim Award-verdächtigen Bike-Konfigurator von Thömus haben wir mit Saleor gearbeitet. Um die komplexe Logik dieses 3D-Konfigurators in den bestehenden Webshop zu integrieren, waren ein paar spezielle Handgriffe und die Entwicklung einer eigenen API nötig. Herausgekommen ist eine ganze Digital Experience mit einem Headless E-Commerce als Herzstück.
So gesehen ist die Headless-Technologie wirklich alles andere als kopflos. Sie macht Webshops zukunftsfit für neue Herausforderungen und lässt dabei viel Spielraum für innovative Designs.
Die Ansprüche der Onlineshopper werden immer höher und Standardfunktionen reichen oft nicht mehr aus. Neben einem schönen Design geht es vor allem um die Usability mit verschiedenen Endgeräten. Die Programmierung eines Headless Onlineshops oder CMS kann hingegen ganz schön knifflig sein. Erfahrung ist klar von Vorteil, damit es “headless” und nicht “kopflos” wird.
