Fallstudie · 2025 · Web
Am Montag noch ShopRenter-Vorlage.Ein eigener Premium-Webshop in fünf Tagen. Schneller, mobil zuerst, mehr Bestellungen ab der ersten Woche.
GeekCorner kam mit einer Mystery-Box-Marke auf einer Standard-ShopRenter-Vorlage. Wir haben die Ladenfront gegen ein eigenes, animiertes, mobil-zuerst gedachtes Design getauscht, derselbe Checkout, derselbe Produkt-Feed, aber eine völlig andere Bildsprache. Die Conversion stieg messbar in der ersten Woche mit echtem Datenverkehr.
- ShopRenter
- Vanilla CSS
- Vanilla JS
Im Einsatz
Überblick
- Up
- Anstieg der Conversion
- 1
- Sprint bis live
- 100%
- Eigenbau · kein Theme
- 1st
- Einzigartig in der ungarischen Nische
Wir haben den Standard-ShopRenter-Shop einer ungarischen Mystery-Box- und Geek-Marke durch ein eigenes, animiertes, modernes Design ersetzt. Für diese Nische in Ungarn war es der erste wirklich vorne mitspielende Shop · und die Conversion-Rate sprang nach oben.
Was ausgeliefert wurde
Was es tut
- Eigenbau auf ShopRenter (keine Vorlage)
- Animierter Shop, der auch mobil gut aussieht
- Erstes Design seiner Art in der ungarischen Nische
- Messbarer Anstieg der Conversion
Das Problem
- Kunden springen bei Vorlagen-Shops in 3 Sekunden ab
- Der Wert der Marke war optisch nicht sichtbar
- Wiederkehrende Käufer wurden keine Gemeinschaft
Warum es zählt
- Die Marke sieht so aus, wie sie sich verhält · Premium
- Mehr Besucher werden zu Käufern
- Nichts sonst in der Nische sieht so aus
Wie es entstand
- 01 · BRIEF
Prüfung der laufenden ShopRenter-Vorlage.
Den laufenden Shop mit dem Gründer durchgegangen, die sieben reibungsstärksten Stellen kartiert (Hero, Mystery-Box-Enthüllung, Produktkarte, Warenkorb, Checkout, mobile Navigation, nach dem Kauf). Kein Lastenheft · Screenshots und Sprachnotizen.
- 02 · BRAND
Schrift, Palette, Bewegungssprache.
Display-Serife für den Hero-Claim, Mono für Artikelnummern, zweifarbige Palette in Violett und Schwarz. Bewegungssprache: Kartendrehung beim Hover, Mikro-Haptik beim Warenkorb-Hinzufügen, keine theatralische Hero-Animation, die den LCP blockieren würde.
- 03 · ARCHITECTURE
Reines CSS und JS, damit die nächste Person frei arbeiten kann.
Entscheidungsdokument: kein Framework, keine Build-Pipeline über Minifizierung hinaus, kein Asset-Bundler. Die Ladenfront ist ein Ordner mit Dateien, den das eigene Team vom ersten Tag an lesen kann. Produkt-Feed und Checkout von ShopRenter bleiben unangetastet · wir liefern ein Frontend, keinen Plattformwechsel.
- 04 · BUILD
Ladenfront, Bewegung, mobil zuerst über zwei Sprints.
Sprint 1: Hero, Produktraster, Produktdetail, Warenkorb-Schublade · alles responsiv, mit Container-Queries je Komponente. Sprint 2: Kartendrehung beim Hover, Mikro-Haptik beim Warenkorb-Hinzufügen, Zusatzangebot nach dem Kauf. PSI über 95 auf Mobil in beiden Sprints.
- 05 · POLISH
SEO, strukturierte Daten, Analytik verdrahtet.
JSON-LD für Product, Organization und WebSite, dynamisches OG-Bild in 1200×630, kanonische URLs. GA4 und Plausible decken Conversion, Warenkorb-Hinzufügen, Scrolltiefe und Warenkorbabbruch ab · der Start liefert die Messung gleich mit, statt sie als Folgeprojekt nachzurüsten.
- 06 · SHIP
Live, mit gemessener Conversion ab Tag 1.
Umstellung an einem Freitag, das Redaktionsteam arbeitete für neue Texte weiter in der ShopRenter-Oberfläche. Der Anstieg der Conversion war binnen der ersten Woche sichtbar · kein Theater, kein „sanfter Start“ · einfach eine steigende Zahl.
Stack
Ladenfront
Eigene Ladenfront auf ShopRenter-Basis
Reines HTML, CSS, JS · der zugrunde liegende Produkt-Feed und Checkout von ShopRenter bleiben unangetastet. Keine Framework-Bindung für die nächste Person.
Bewegung
Kartendrehung beim Hover, Mikro-Haptik beim Warenkorb-Hinzufügen
Bewegung mit 60 fps auf gewöhnlicher Hardware · keine LCP-blockierende Hero-Animation · prefers-reduced-motion wird beachtet.
Mobile
Mobil zuerst, ohne wie ein „mobiltauglicher Desktop“ auszusehen
Container-Queries auf jeder Komponente · im Hochformat stapeln sich die Funktionen, überflüssiger Text verschwindet, Abstände passen sich neu an. PSI über 95 auf Mobil.
SEO
Strukturierte Daten, kanonische URL, OG-Bild
JSON-LD für Product, Organization und WebSite, dynamisch erzeugtes OG-Bild in 1200×630, kanonische URLs · die Vorschaukarte in der Suche passt.
Analytics
GA4 und Plausible · Trichter für Warenkorbabbruch ab Tag 1
Conversion, Warenkorb-Hinzufügen, Scrolltiefe und Warenkorbabbruch waren vor der Umstellung verdrahtet · keine Schuld nach dem Motto „später messen“.
Übergabe
Vom Team selbst bearbeitbar · kein Entwickler für neue Texte nötig
Alle Hero-Texte und Produktbeschreibungen lassen sich direkt in ShopRenter bearbeiten · kein Umweg über Markdown, kein Pull-Request für einen Tippfehler.
Fallstudie
“Den GeekCorner-Webshop von Grund auf neu gestaltet · eigenes Design, animiert, mobil zuerst. Messbarer Anstieg der Conversion binnen der ersten Woche. Klare Kommunikation, pünktlich geliefert.”
Mehr Arbeiten
Nächstes Projekt
North Star Creator