Wie wir das xt:Commerce-System von GISY mit unserer Headless-PWA modernisierten und die mobile Conversion steigerten

hubble commerceProgressive Web App

Der historisch gewachsene xt:Commerce-Onlineshop des Schuhhändlers GISY bot keine zeitgemäße mobile User Experience, konnte aber wegen tiefer ERP-Verzahnungen nicht einfach abgelöst werden. Durch unsere konsequente Entkopplung des Frontends und die Einführung unserer Progressive Web App (PWA) „hubble“ haben wir das Altsystem „headless“ gemacht. Das Ergebnis: extrem schnelle Ladezeiten, native App-Features und eine drastische Steigerung der mobilen Nutzererfahrung für die Kunden – ohne dass das Backend kostenintensiv ausgetauscht werden musste.

Key Facts

Shopware-Version: Shopware 6
Branche/Kategorie: Schuhe (Kategorie: Fashion/ B2C Commerce)
Features: Click & Reserve für Filialabholung, komplexe Bestellabwicklung von Onlineshop und den Stores in einer Oberfläche, Sortiersystem für individuelle Anpassung des Angebots in der Storefront
Technische Merkmale: Shopware und eigene Middleware verbunden mit dem WaWi Appollon als leistungsstarkes Gesamtsystem, Middleware als zentraler Verarbeitungspunkt für alle Filialen und Bereiche

Projektübersicht

Kunde: GISY Schuhe GmbH & Co. KG
Branche: Einzelhandel / Fashion (Schuhe)
Plattform: hubble PWA (Frontend) & xt:Commerce (Backend)
Herausforderung: Veraltetes System, tiefgreifende Businesslogik blockierte einen Relaunch, schwache mobile Conversion
Lösung: Unser Microservice-Ansatz (Headless Commerce), API-Entwicklung für xt:Commerce, Implementierung unseres PWA-Frontends
Ergebnis: App-Feeling (inkl. Offline-Nutzung & Push-Nachrichten), massiver Performance-Boost, massiv eingespartes Relaunch-Budget

Ausgangssituation und Problem

GISY ist ein hannoversches Traditionsunternehmen, das seit 1934 Schuhe in höchster Qualität vertreibt. Eine Marktanalyse zeigte: Fast die Hälfte der Deutschen erledigt Einkäufe „oft“ oder „fast immer“ über das Smartphone. Um dieses enorme Potenzial zu nutzen, mussten wir den GISY-Onlineshop dringend für mobile Endgeräte optimieren.

Die größte Hürde für uns und unseren Kunden: Die bisherige Technologie basierte auf xt:Commerce.

Typische Probleme in dieser Ausgangslage:

Ein kompletter Relaunch (z. B. auf Shopware oder Magento) war unwirtschaftlich, da im XT-System mehr als eine Dekade an komplexer Businesslogik und tiefer ERP-Integration steckte.
Das Frontend war veraltet, langsam und nicht auf eine „Mobile First“-Bedienung ausgelegt.
Es fehlten moderne Mechanismen zur Kundenbindung, wie man sie aus nativen Apps kennt.
Das Risiko eines Totalausfalls beim Austausch des gesamten monolithischen Systems (Backend + Frontend) war schlichtweg zu groß.

Zielsetzung des Projekts

Unser Hauptziel war die signifikante Erhöhung der mobilen Conversion Rate bei gleichzeitiger Schonung des Kundenbudgets. Konkret haben wir uns folgende 5 Hauptfaktoren vorgenommen:

Entwicklung eines konsequenten Mobile-First User Interface Designs.
Optimierung der User Experience durch extrem schnelle Ladezeiten und Ausfallsicherheit.
Höhere Kundenbindung mobiler Nutzer durch App-Features (ohne eine teure native App programmieren zu müssen).
Erhalt der bestehenden Backend-Prozesse und der sensiblen Warenwirtschafts-Anbindung.
Drastische Erhöhung der Systemsicherheit.

Lösung und Architektur

Da ein „Rip and Replace“ (kompletter Austausch) des Systems ausgeschlossen war, wählten wir einen innovativen Weg: Die Weiterentwicklung und Entkopplung der monolithischen Software hin zu einem Microservice-Ansatz (Headless Commerce).

Wir haben die Architektur strikt in zwei Ebenen geteilt:

Das Backend (xt:Commerce): Bleibt als reiner Prozessrahmen bestehen. Es verwaltet unsichtbar Produkte, Kunden und Bestellungen, ist aber für den User (und Angreifer) nicht mehr direkt erreichbar. Das erhöht die Systemsicherheit fundamental.
Das Frontend (hubble PWA): Den gesamten User-Traffic wickeln wir nun über unsere Progressive Web App (PWA) hubble ab. Diese basiert auf modernsten Frontend-Technologien (Vue.js, Nuxt.js, Webpack) und verbindet die Reichweite einer klassischen Website mit der herausragenden Usability einer nativen Smartphone-App.

Umsetzung

API-Entwicklung: Um die Kommunikation zwischen unserem neuen Frontend (hubble) und dem Alt-System (xt:Commerce) zu ermöglichen, programmierten wir einen maßgeschneiderten REST-Webservice für das XT-Backend.
Komponentenbasierte Architektur: Für das neue PWA-Frontend erstellten wir skalierbare Patterns und Code-Fragmente. Das garantiert ein konsistentes Design und beschleunigt künftige Weiterentwicklungen enorm.
SEO & Server-Side Rendering (SSR): Obwohl die PWA stark JavaScript-basiert ist (Vue.js), rendern wir das HTML serverseitig. Das stellt sicher, dass der Shop für Google-Crawler jederzeit perfekt lesbar bleibt.

Ergebnisse und KPIs

Wir haben den Shop für mobile Endgeräte radikal optimiert, ohne dass GISY sein bewährtes Backend verändern musste. Hohe Investitionen in neue Kern-IT-Systeme oder in die Entwicklung separater iOS/Android-Apps entfielen für unseren Kunden komplett.

Native App Experience: Nutzer können sich den GISY-Shop nun per Klick als Icon auf dem Homescreen speichern (Add-to-Homescreen) und wie eine echte App nutzen.
Offline-Verfügbarkeit: Kunden können das Sortiment sogar im Flugmodus durchstöbern und Bestellungen tätigen. Unsere App speichert diese im lokalen Cache und sendet sie automatisch ab, sobald das Netz zurück ist.
Push-Benachrichtigungen: GISY kann Nutzer proaktiv über Rabatte oder neue Kollektionen auf dem Sperrbildschirm informieren – ein massiver Conversion-Hebel.
Performance-Boost: Da die PWA Daten direkt und leichtgewichtig via API bezieht, stiegen die Google Lighthouse Scores und Ladezeiten drastisch an (ein entscheidender Faktor für Googles Mobile-First-Ranking).

«Mit der PWA hubble hat die digital.manufaktur für uns innerhalb kürzester Zeit ein hochmodernes Shop-Frontend gelauncht, mit dem wir sehr zufrieden sind. Ohne in ein neues Shopsystem investieren zu müssen, können wir unseren Nutzern nun auf allen Endgeräten ein einzigartiges Einkaufserlebnis bieten.»

Michael Schenkemeyer, Geschäftsführer GISY Schuhe GmbH & Co. KG

Mehr zu diesem Thema erfahren Sie in unserem Interview mit GISY-Geschäftführer Michael Schenkemeyer: Wie E-Commerce den stationären Einzelhandel stärken kann – Interview mit Michael Schenkemeyer von GISY

Learnings und Best Practices

Headless rettet Legacy-Systeme: Historisch gewachsene Backends mit tiefer ERP-Logik müssen nicht zwingend abgelöst werden. Aus unserer Erfahrung spart die Entkopplung des Frontends (Headless) enorme Budgets und minimiert das Projektrisiko für den Händler nahezu auf null.
PWA statt nativer App: Progressive Web Apps machen teure App-Entwicklungen für iOS und Android oft überflüssig. Sie umgehen die App-Stores, binden keine Speicherressourcen auf dem Kunden-Handy und bieten dennoch starke Features wie Push-Nachrichten und Offline-Fähigkeit.
Sicherheit durch Unsichtbarkeit: Wenn wir das alte Shop-Backend (wie hier xt:Commerce) vom direkten Webtraffic abkapseln und nur noch per API ansprechen, sinkt die Angriffsfläche für Hacker drastisch.

FAQ: Progressive Web Apps (PWA) & Headless Commerce

Was ist eine Progressive Web App (PWA)?

Eine PWA ist für uns die perfekte technologische Mischform aus einer klassischen Website und einer nativen App. Sie wird im normalen Browser aufgerufen, kann aber auf dem Homescreen des Nutzers installiert werden, sendet Push-Nachrichten und funktioniert dank intelligentem Caching (Service Worker) auch bei schlechter oder fehlender Internetverbindung.

Können wir ein veraltetes System wie xt:Commerce "headless" machen?

Ja, absolut. Wenn ein Relaunch zu teuer oder riskant ist, "köpfen" wir das alte System. Das bedeutet, wir entfernen das alte visuelle Frontend (Theme) und programmieren stattdessen eine API (Schnittstelle). Unser modernes Frontend-Framework (wie hubble) zieht sich dann nur noch die reinen Daten über diese Schnittstelle.

Wie wirkt sich unsere PWA auf die SEO-Sichtbarkeit aus?

Sehr positiv, da wir sie konsequent für Suchmaschinen optimieren. Da PWAs primär auf JavaScript basieren, ist unser "Server-Side Rendering" (SSR) entscheidend. Dabei bauen wir die Seite für Suchmaschinen-Crawler bereits auf dem Server fertig. In Kombination mit den extrem schnellen Ladezeiten unserer PWA führt das oft zu deutlichen Ranking-Sprüngen im Google Mobile-Index.

Fazit

Unser Projekt für das Traditionsunternehmen GISY ist ein Paradebeispiel für intelligente E-Commerce-Modernisierung. Anstatt den Kunden in einen langwierigen und extrem teuren Backend-Relaunch zu stürzen, haben wir das Problem exakt dort gelöst, wo es bestand: direkt beim Nutzer. Durch unseren Headless-Ansatz und die Implementierung unserer hubble PWA verfügt GISY nun über ein rasantes, app-ähnliches Frontend, das die mobile Conversion Rate massiv treibt – während die über ein Jahrzehnt gereifte Businesslogik im xt:Commerce-Backend sicher und ungestört im Hintergrund weiterarbeitet.