Die meisten Online-Shops sehen gleich aus. Ein Header mit Logo und Warenkorb, eine Produktliste mit Filtern, Produktkarten mit Bild und Preis. Austauschbar. Genau das war das Problem unseres Kunden: Ein Shopify-Shop mit 400 Produkten und einer Conversion-Rate von 0,9% -- deutlich unter dem Branchendurchschnitt von 2,5%. Der Shop funktionierte technisch, aber er verkaufte nicht.
In 18 Wochen haben wir den gesamten Shop auf eine Custom Next.js-Loesung migriert. Das Ergebnis nach 6 Monaten: 220% Umsatzsteigerung, eine Conversion-Rate von 2,88%, ein um 45% hoeherer durchschnittlicher Bestellwert und Ladezeiten, die den alten Shop um den Faktor 5 schlagen.
Die Herausforderung
Der bestehende Shopify-Shop hatte strukturelle Probleme, die mit Theme-Anpassungen nicht loesbar waren:
- Performance-Engpass: Shopify-Themes laden zahlreiche Drittanbieter-Scripts. Gesamtladezeit: 6,2 Sekunden auf Mobile. Google PageSpeed Score: 28/100.
- Begrenzte Personalisierung: Nur einfache Kunden-kauften-auch-Algorithmen. Cross-Selling und Upselling waren auf Shopify-Moeglichkeiten beschraenkt.
- Checkout-Abbrueche: 67% der Nutzer brachen im Checkout ab. Zu viele Schritte, keine Gastbestellung ohne Account, langsame Ladezeiten.
- Keine Markendifferenzierung: Generisches Premium-Theme ohne Wiedererkennungswert.
"Unser Shop hatte Traffic, aber keinen Charakter. Besucher kamen, schauten sich um und gingen zu Amazon." -- Geschaeftsfuehrung
Der Ansatz
Datengetriebene Redesign-Strategie
Vor dem Redesign haben wir vier Wochen lang Daten gesammelt und analysiert:
- Session Recordings: 500 aufgezeichnete Nutzersitzungen zeigten die drei haeufigsten Abbruchpunkte
- Heatmap-Analyse: Die Filterleiste links wurde von nur 12% der Nutzer verwendet, nahm aber 25% der Bildschirmflaeche ein
- Checkout-Funnel: Der groesste Drop-off passierte zwischen Warenkorb und erstem Checkout-Schritt (42% Verlust)
- Geraeteverteilung: 71% mobiler Traffic, aber mobile Conversion-Rate bei nur 0,4%
Custom Next.js statt Shopify
Die Entscheidung fuer eine Custom-Loesung basierte auf drei Faktoren: volle Performance-Kontrolle, eigene Empfehlungsalgorithmen und individueller Checkout-Flow. Shopify dient weiterhin als Backend fuer Produktverwaltung und Bestellabwicklung -- ein Headless-Commerce-Setup, das das Beste aus beiden Welten vereint.
Technische Umsetzung
Headless Commerce Architektur
Die Architektur trennt Frontend und Backend sauber:
- Frontend: Next.js 15 mit React 19, deployed als statisch generierte Seiten mit inkrementeller Regenerierung
- Backend: Shopify als Headless CMS fuer Produkte, Bestellungen und Inventar
- API-Layer: Custom GraphQL-API, die Shopify-Daten mit eigener Geschaeftslogik anreichert
- CDN: Statische Assets und Produktbilder ueber ein globales CDN
Produkt-Filterung und -Suche
Das alte Filtersystem wurde komplett neu gedacht:
- Predictive Search: Suchvorschlaege ab dem zweiten Buchstaben, mit Produktbildern und Preisen
- Facettierte Filterung: Alle Filter kombinierbar, Echtzeit-Zaehlung verfuegbarer Produkte
- URL-basierte Filter: Jede Kombination hat eine eigene URL -- wichtig fuer SEO
- Null-Ergebnis-Handling: Statt leerer Seite werden aehnliche Produkte vorgeschlagen
Die gesamte Filterlogik laeuft clientseitig. 48KB komprimiertes JSON fuer 400 Produkte. Filteraenderungen sind sofort -- ohne Netzwerk-Latenz.
One-Click Checkout
Der groesste Conversion-Hebel war die Checkout-Optimierung:
- Gastbestellung als Standard: Kein Account erforderlich
- Adress-Autovervollstaendigung: Google Places API, 70% weniger Eingabezeit
- One-Click Payment: Apple Pay, Google Pay und gespeicherte Kreditkarten
- Einstufiger Checkout: Alle Informationen auf einer einzigen Seite
Das Ergebnis: Die Checkout-Abbruchrate sank von 67% auf 31%.
KI-gestuetzte Produktempfehlungen
Eigenes System statt Shopify-Standard: verhaltensbasiert, warenkorbbasiert, saisonbasiert und kontinuierlich A/B-getestet. Der Beitrag der Empfehlungen zum Gesamtumsatz stieg von 8% auf 23%.
Performance-Optimierung
- Ladezeit Homepage: Von 6,2s auf 1,2 Sekunden (Mobile)
- Produktseiten: Durchschnittlich 0,8 Sekunden (SSG + ISR)
- Time to Interactive: Von 8,4s auf 1,5 Sekunden
- Google PageSpeed Score: Von 28 auf 94/100
Schluessel-Massnahmen: Eliminierung nicht verkaufsrelevanter Scripts, AVIF/WebP-Bildoptimierung, Route-Level Code-Splitting und Edge-Caching mit 60-Sekunden-Revalidierung.
Ergebnisse nach 6 Monaten
- 220% Umsatzsteigerung (indexiert auf gleichen Traffic)
- Conversion-Rate: Von 0,9% auf 2,88% (3,2x Verbesserung)
- Durchschnittlicher Bestellwert: +45% (von 68 auf 98,60 Euro)
- Ladezeit: Von 6,2s auf 1,2s (5x schneller)
- Checkout-Abbruchrate: Von 67% auf 31%
- Mobile Conversion: Von 0,4% auf 2,1% (5,25x Verbesserung)
- Wiederkehrende Kunden: +38% hoehere Rueckkehrrate
Revenue Breakdown
Die 220% Umsatzsteigerung setzt sich zusammen aus: hoehere Conversion-Rate (3,2x, ca. 60% des Wachstums), hoeherer Bestellwert (+45%, ca. 30%) und hoehere Rueckkehrrate (+38%, ca. 10%).
"Der neue Shop hat nicht nur den Umsatz gesteigert -- er hat die Marke veraendert." -- Geschaeftsfuehrung
Zentrale Erkenntnisse
1. Performance ist der groesste Conversion-Treiber. Die Reduktion der Ladezeit von 6,2 auf 1,2 Sekunden war fuer den groessten Teil der Steigerung verantwortlich.
2. Der Checkout entscheidet ueber Kauf oder Abbruch. Einstufiger Checkout ohne Registrierungszwang ist der staerkste Hebel.
3. Headless Commerce ist eine Architekturentscheidung. Shopify-Backend mit Custom-Frontend vereint Zuverlaessigkeit mit Flexibilitaet.
4. Personalisierte Empfehlungen steigern den Bestellwert. Sprung von 8% auf 23% Umsatzanteil zeigt das Potenzial.
5. Mobile Conversion braucht Mobile-First. 71% Mobile-Traffic erfordert kompromisslose Optimierung.
Fazit
Dieses Projekt beweist, dass ein Online-Shop-Redesign keine kosmetische Massnahme sein muss. Mit der richtigen Architektur und datengetriebenen Entscheidungen laesst sich der Umsatz in Monaten verdreifachen.
Das Live-Ergebnis ist unter shop.studiomeyer.io einsehbar. Wenn Ihr Online-Shop unter seinem Potenzial performt, zeigt StudioMeyer Ihnen gerne, wo die Hebel liegen.
