Muskelkater Sport in Köln-Zollstock verkauft Fahrräder, Ski und Tennisschläger – und das seit Jahren auch online. Der Shop lief technisch sauber, sah aber aus wie ein Baukasten von der Stange. Ich habe die Oberfläche komplett neu gebaut: eigenes Theme, neue Navigation, neue Startseite, ein Verleih-Rechner und ein Dunkelmodus. Seit August läuft das im echten Shop. Danach kam der zweite Teil – den Warenbestand des Vorgängershops herüberholen. Zieh den Regler und sieh selbst.
Vier Seiten aus demselben Shop: links der Stand, der bis zum Umschalten online war, rechts der, der jetzt dort steht. Zieh den Regler, tippe irgendwo ins Bild oder nimm die Pfeiltasten.
Startseite. Der Werbebanner über die volle Breite weicht einer Willkommensfläche, die in einem Satz sagt, worum es geht: online kaufen, im Laden beraten werden. Adresse, Öffnungszeiten und Telefonnummer stehen jetzt oben statt ganz unten. Darunter folgen Angebote, Sortiment, Werkstatt und Verleih in einer festen Reihenfolge – statt einer langen Kette gleich aussehender Produktzeilen.
Kategorie. Vorher stand in der Seitenspalte der gesamte Kategoriebaum ab der Wurzel – also die Kopfnavigation ein zweites Mal. Jetzt zeigt sie nur die geöffnete Rubrik samt ihrer Nachbarn, berechnet aus der aktiven Kategorie statt aus einer gepflegten Liste. Dazu eine Überschrift, die sagt, wo man ist, Rabatte als echter Prozentwert (−45 % statt eines nackten Prozentzeichens) und ein Kaufknopf, der dauerhaft sichtbar ist.
Produktseite. Alles, was zum Kaufen gehört – Preis, Größe, Verfügbarkeit, Leasingrate –, steht jetzt zusammen in einer abgesetzten Karte statt verteilt im Fließtext. Die Beschreibung bekommt eine lesbare Zeilenlänge, und der Brotkrumenpfad ist als Pfad erkennbar, statt in derselben Farbe wie der Hintergrund zu verschwinden.
Am Handy. Rund zwei Drittel der Besucher kommen mit dem Telefon. Vorher füllten Werbebanner und Markenkarussell den ganzen ersten Blick, ohne ein Wort darüber, was der Laden eigentlich macht. Jetzt steht das im ersten Bildschirm, mit zwei Schaltflächen in Daumenreichweite.
Links: 1. August 2026, der letzte Tag des alten Shops. Rechts: 2. August 2026, aufgenommen am Tag des Umschaltens direkt von der Live-Seite. Beide im selben Browser und in derselben Fensterbreite, damit der Vergleich trägt.
Die linke Seite gibt es im Netz nicht mehr. Sie liegt nur noch als Sicherung bei mir – und genau deshalb steht sie hier.
Der bequeme Weg wäre gewesen, alle Helligkeiten umzudrehen: ein Filter über die Seite, fertig. Das Ergebnis kennt man – graue Fotos, ausgewaschene Farben und Text, der auf halbem Weg zwischen Vorder- und Hintergrund hängen bleibt. Stattdessen hat jede Fläche, jede Linie und jede Textfarbe einen eigenen Dunkelwert bekommen. Zieh den Regler.
Startseite. Der Grund wird nicht schwarz, sondern sehr dunkel grün – dieselbe Familie wie die Marke, nur ganz unten in der Skala. Das Markengrün geht dafür den umgekehrten Weg und wird heller, sonst verschwände es im Hintergrund.
Produktseite. Der interessanteste Fall: Produktfotos sind freigestellt, ihr Hintergrund ist also weiß. Dreht man die Seite stumpf um, schwimmen die Räder in einem hellen Kasten, der nichts mit dem Rest zu tun hat. Deshalb behalten Bildflächen ihre helle Karte – sie sind jetzt bewusst gesetzte Elemente statt Überbleibsel.
Grund, Karten, Linien, Text, Marke, Warnfarben: für jeden Wert gibt es eine eigene dunkle Entsprechung. Das ist mehr Arbeit als ein Filter – und der einzige Weg, bei dem Farben Farben bleiben.
Der erste Durchlauf ergab 42 Stellen unter dem Standard AA. Sie ließen sich auf neun Ursachen zurückführen – wer die behebt, behebt alle 42.
Freigestellte Produktbilder behalten ihre helle Fläche. Ein Rad vor weißem Grund sieht auf einer dunklen Seite sonst aus wie ein vergessener Ausschnitt.
Formulare, Tabellen, Auswahlfelder, Overlays, Hinweisleisten, der leere Warenkorb: die Stellen, an die im Dunkeln zuletzt jemand denkt, und an denen es zuerst auffällt.
Ein Umschalter oben rechts, mehr braucht es nicht. Die Entscheidung wird gemerkt und beim nächsten Besuch angewendet, bevor die Seite gezeichnet wird – deshalb blitzt beim Laden nichts weiß auf.
Ein Mondsymbol allein sagt einer Vorlesesoftware nichts. Der Umschalter trägt eine Beschriftung, die auch dann trägt, wenn niemand das Symbol sieht.
Kein neues Logo, keine neue Marke – die Substanz des Ladens bleibt. Was sich geändert hat, ist alles, was zwischen Besucher und Ware steht.
| Baustelle | Vorher | Nachher |
|---|---|---|
| Erster Eindruck | Werbebanner über die volle Breite, direkt danach Produkte | Ein Satz, der den Laden erklärt, plus Adresse, Zeiten und Telefon |
| Kopfnavigation | Flache Leiste, Unterkategorien erst nach mehreren Klicks | Acht Hauptpunkte mit sieben Aufklappmenüs, gebaut aus dem echten Kategoriebaum |
| Menü am Handy | Dieselben Punkte mehrfach, Service versteckt | Schnellzugriff, Service zum Aufklappen, Ladeninfo am Ende |
| Seitenspalte in Kategorien | Der komplette Kategoriebaum ab der Wurzel | Nur die geöffnete Rubrik – aus der aktiven Kategorie berechnet |
| Kaufknopf am Handy | Nicht erreichbar – erschien nur beim Überfahren mit der Maus | Dauerhaft sichtbar, ohne den Preis zu verdecken |
| Rabattmarken | Ein nacktes „%“ ohne Zahl | Der echte Wert aus den Preisdaten, etwa −45 % |
| Preisformat | „(45.01% gespart)“ | „(45 % günstiger)“ |
| Schrift | 73-mal im Stylesheet genannt – und nie geladen | Definierter Systemschrift-Stapel: sofort da, kein Abruf bei Dritten |
| Fußbereich | Vier Hintergrundflächen übereinander | Eine durchgehende Fläche, vier sortierte Spalten |
| Leerer Warenkorb | Eine Zeile Text | Überschrift, Erklärung und zwei Wege zurück ins Sortiment |
| Dunkelmodus | Nicht vorhanden | Vollständig, mit gemessenen Kontrasten |
| Verleihpreise | Acht Preistabellen zum Durchsuchen | Drei Fragen, ein Preis – der Rechner weiter unten |
Die Tabelle hat drei Spalten – am Telefon lässt sie sich seitlich wischen.
Gestaltung lässt sich streiten, Kontrast nicht. Alle sichtbaren Textelemente auf Start-, Kategorie- und Produktseite wurden gegen den WCAG-Standard AA gemessen – vorher wie nachher, mit demselben Skript.
Auch ein Ergebnis: Vier der gefundenen Fehler waren gar keine Designfragen, sondern lagen schon vorher im Shop – der auf Touchgeräten unerreichbare Kaufknopf, weißer Text auf hellem Grün, der vierfach gestapelte Fußbereich und eine Suchlupe ohne Größenangabe, die auf 300 × 150 Pixel aufging. Gefunden habe ich sie, weil ich beim Messen nicht nach meinen eigenen Änderungen gesucht habe, sondern nach allem.
Und noch eins: Mein erstes Messskript hat selbst danebengelegen. Es suchte den Hintergrund im Elternbaum und traf im Fußbereich und bei Schaltflächen die falsche Fläche – gemeldet wurden 1,15:1, tatsächlich waren es 9,6:1. Wer misst, muss auch die Messung prüfen.
Gestaltung und Programmierung sind von mir – vom ersten Entwurf bis zu den Twig-Vorlagen, die im Shop laufen. Was ich nicht angefasst habe: Sortiment, Preise, Produktbilder und Texte des Ladens.
Farben, Schriftgrößen, Radien, Schatten und Abstände als ein zusammenhängender Satz Werte – nicht als Sammlung von Einzelfällen. Jede Farbe ist gegen ihren Hintergrund durchgerechnet.
Als eigenständiges Theme-Plugin gebaut, mit Twig-Vorlagen und SCSS. Die wichtigsten Werte und Texte sind im Verwaltungsbereich einstellbar, damit später niemand Code anfassen muss.
Aufklappmenüs für den Rechner, ein eigenes Menü fürs Handy und eine Rubrikspalte, die sich aus der aktiven Kategorie ergibt. Ohne feste Kennungen und ohne Namensliste – neue Kategorien erscheinen von allein.
Willkommensfläche, Sortimentskacheln, Vertrauensleiste, Angebote, Werkstatt und Verleih, Standort. Aufgebaut als CMS-Inhalt, damit der Laden die Reihenfolge selbst ändern kann.
Neue Kachel fürs Raster, neuer Kaufbereich auf der Produktseite, echte Rabattwerte, lesbares Preisformat, sichtbarer Kaufknopf.
Acht Preistabellen zu drei Fragen zusammengefasst. Reines JavaScript, ohne Bibliothek, als CMS-Baustein einsetzbar. Läuft weiter unten auf dieser Seite.
Sechs fertige Blöcke – Vorteile, Service, Produkte, Verleihpreise, Fragen und Antworten, Standort –, die sich ohne Programmierkenntnisse in jede Seite einsetzen lassen. Sie richten sich nach ihrer eigenen Breite, nicht nach der des Fensters.
Ein zweites, vollständiges Farbsystem statt umgedrehter Helligkeiten – inklusive der Stellen, an die im Dunkeln sonst niemand denkt: Formulare, Tabellen, Overlays, Hinweisleisten.
Symbolsatz und Illustrationen als Vektorgrafik gezeichnet: scharf auf jedem Bildschirm, wenige Kilobyte, in der Farbe des Themes.
Bevor irgendetwas am Shop passiert ist, gab es den kompletten Entwurf als eine einzige HTML-Datei zum Doppelklicken – ohne Installation, ohne Internet. So konnte mein Vater vorher sehen, worauf er sich einlässt.
Eigene Konsolenbefehle, die Artikel, Varianten, Bilder, Hersteller und Kategorien aus dem Datenbankabzug des Vorgängershops in Shopware anlegen – samt der Prüfseiten, die vorher zeigen, was dabei herauskäme.
Technisches Konzept für Onlinereservierung mit Anzahlung: Zeitraum, Verfügbarkeit, Rüstzeit, Statusverlauf – plus ein PHP-Gerüst mit austauschbarem Anschluss an die Warenwirtschaft und Tests.
Kontraste gemessen, Überschriftenordnung geprüft, Schaltflächen ohne Namen benannt, Klickflächen entzerrt, Tastaturbedienung getestet.
Erst zeigen, dann bauen, dann einschalten – und jeder Schritt so, dass er sich einzeln zurücknehmen lässt. Der laufende Shop war zu keinem Zeitpunkt betroffen; gearbeitet wurde durchgehend in einer getrennten Testumgebung.
Der komplette Shop als klickbarer Entwurf in einer Datei: Startseite, Navigation, Kategorie, Produktseite, Bannermotive. Zum Doppelklicken, ohne Installation – die Grundlage für alles Weitere.
Sechs einbettbare Blöcke, die der Laden selbst platzieren kann. Jeder reagiert auf seine eigene Breite – dieselbe Datei sieht in der schmalen Spalte anders aus als über die volle Seite.
Die neue Startseite und acht Service-Seiten – Werkstatt, Bikeleasing, E-Bike-, Ski- und Snowboardverleih, Skiservice, Bootfitting, Tennis-Besaitung – mit den echten Preisen. Dazu der Verleih-Rechner.
Farben, Schriften und Radien im Theme, dazu ein eigener Stilbereich, der sich mit einem Haken wieder abschalten lässt. Vorher von jedem betroffenen Bereich eine Sicherung gezogen.
Ein Aufsatz auf das gekaufte Standard-Theme erbt dessen Einstellungen nicht – Ankündigungsleiste, Vertrauensleiste und Fußspalten wären dabei verschwunden. Also ein eigenständiges Theme, in dem Navigation, Startseite, Produktkachel und Fußbereich tatsächlich mir gehören.
Der Durchgang, in dem aus „sieht gut aus“ „funktioniert überall“ wird: Dunkelmodus durchgemessen, Klickflächen entzerrt, doppelte Menüpunkte entfernt, leerer Warenkorb, Rubrikspalte, Rabattmarken aus echten Preisdaten.
Der Umbau läuft auf dem echten Shop. Vor dem Umschalten wurden die Ecken noch einmal zurückgenommen – die Schaltflächen im Kopfbereich sind jetzt kantiger als im Testsystem. Der Vergleich oben zeigt seit diesem Tag links etwas, das es im Netz nicht mehr gibt.
Aus dem Vorgängershop liegt noch ein vollständiger Datenbankabzug auf der Platte. Ich habe ihn gelesen und ausgezählt, statt zu schätzen: 7.410 Artikel, 17.158 Bilder, 88 Hersteller. Was davon wirklich neu wäre und was längst im Shop steht, steht weiter unten.
Kein Import von 6.000 Artikeln ohne Probe. Vierzig Stück angelegt, mit 204 Größen und 172 Bildern – im echten Shop, aber mit Bestand null, damit sie in keiner Liste auftauchen, bevor jemand sie freigibt.
Aus den 40 werden rund 1.400. Drei Fragen gehören vorher beantwortet, sonst räumt der nächste Abgleich alles wieder weg – auch dazu unten mehr.
Der Umbau selbst ist abgeschlossen. Der Shop läuft seit dem 2. August 2026 mit dem neuen Theme, und was danach noch kam – der Umzug des Artikelbestands – ist Pflege daran, kein offener Punkt am Bau.
Vor dem Shopware-Shop stand ein Magento-Shop. Der läuft nicht mehr, aber sein Datenbankabzug liegt noch auf der Platte – zusammen mit 660.666 Bilddateien. Darin stecken Artikel, die im neuen Shop nie angelegt wurden. Die Frage klingt einfach: Wie viele sind das? Sie zu beantworten hat mehr Arbeit gemacht als der Import selbst.
40 Artikel mit 204 Größen, im echten Shop angelegt, Bestand überall null. Damit sind sie über ihre Adresse erreichbar, tauchen aber in keiner Kategorie und keiner Suche auf. Sobald die Warenwirtschaft eine Menge liefert, erscheinen sie von selbst.
172 Bilder, alle 40 Artikel bebildert, kein Fehler. Der Kniff: Der alte Shop hängt die Galerie an den Elternartikel und an jede Größe – und erst über die Größen lässt sich sagen, welches Foto zu welcher Farbe gehört.
Sieben der acht Marken im Testlauf gab es schon, nur eine war neu. Der Importer hat sie wiederverwendet statt „Adidas“ ein zweites Mal anzulegen – die Sorte Fehler, die man erst Monate später bemerkt.
Eins zu eins geht nicht. Die Gerüstebenen des alten Shops („Damen“, „Sale“) fallen weg – das ist Navigation, keine Warengruppe. Was namentlich passt, wird zugeordnet; die 37 Bezeichnungen ohne Entsprechung landen auf einer Liste, statt still zu verschwinden.
Bewusst nicht angelegt. Kein Artikel bliebe ohne Zuordnung, und eine Kategorie von Hand in den Baum zu schreiben – mit Pfad, Ebene und Zählern – ist genau der Eingriff, der einen Kategoriebaum still inkonsistent macht.
Der Katalog wird täglich vollständig von außen überschrieben. Werden Artikel nur im Shop angelegt, ohne dass die Warenwirtschaft sie kennt, verschwinden sie beim nächsten Abgleich wieder. Diese Frage steht vor dem Import, nicht danach.
Der Fehler, der mich am meisten gelehrt hat. Der Importer hat die Größengruppen aus den Namen des Altsystems benannt, statt zu prüfen, ob es sie längst gibt. Ergebnis: „Größe“ neben „Textilgröße“, „Schuhgröße EU“ neben „Euro-Größe“ – vier neue Gruppen für Werte, die schon an über 1.600 Artikeln hingen.
Beim Zusammenführen ging dann kurz die Größenauswahl im Shop verloren. Der Grund: Shopware hält an jedem Artikel eine zwischengespeicherte Kopie der Merkmalskennungen, und die zeigte nach dem Eingriff noch auf gelöschte Werte. Erst ein vollständiger Neuaufbau des Artikelindex – 6 Minuten 23 Sekunden für 16.432 Artikel – hat sie richtiggestellt. Die Lehre: Wer über die Datenschicht anlegt, bekommt den Index geschenkt. Wer bestehende Daten direkt umhängt, muss ihn selbst anstoßen.
Bei einem Laden, der von seinem Shop lebt, ist eine falsche Zahl teurer als ein hässlicher Knopf. Deshalb steht hinter fast jedem Schritt eine eigene Prüfung – meistens als kleine Seite, die zwei Datenstände nebeneinanderlegt und mich entscheiden lässt, statt selbst zu entscheiden.
| Prüfung | Umfang | Was dabei herauskam |
|---|---|---|
| Dublettenprüfung | 775 Verdachtsfälle, je Zeile beide Fotos nebeneinander | Zu entscheiden blieben 138 – der Rest waren Größen desselben Artikels |
| Preisabgleich | 989 Artikel gegen die Herstellerliste | 153 Abweichungen, davon 9 Ausreißer mit auffälligem Faktor |
| Preise je Größe | alle Varianten einzeln | Eigene Prüfseite, weil ein Artikel je Größe unterschiedlich kosten kann |
| Kategorien | 902 alte gegen 224 neue | 37 ohne Entsprechung – als Liste zum Nachtragen, nicht stillschweigend verworfen |
| Farben aus Artikelnamen | Namen ohne eigenes Farbfeld | 11 Vorschläge mit Sicherheitsangabe, jeder einzeln zu bestätigen |
| Bildabgleich | 4.000 Bildverweise stichprobenartig | 4.000 Dateien vorhanden – Trefferquote 100 % |
| Kontraste | 2.276 Textelemente allein auf der Startseite | Sechs Verstöße, alle schon vor dem Umbau vorhanden, alle behoben |
| Dunkelmodus | alle Flächen und Texte gemessen | 42 Fehler, zurückgeführt auf neun Ursachen |
| Datenschutz | Seite als Erstbesucher geladen, Verbindungen mitgeschnitten | Keine Verbindung nach außen vor der Einwilligung – so gehört es sich |
Die Tabelle hat drei Spalten – am Telefon lässt sie sich seitlich wischen.
Zweimal hat die Prüfung selbst danebengelegen – und beide Male war das der eigentliche Fund.
Mein erstes Kontrastskript suchte den Hintergrund im Elternbaum und traf im Fußbereich die falsche Fläche: gemeldet wurden 1,15:1, tatsächlich waren es 9,6:1.
Und beim E-Mail-Versand hatte ich zwei Fehler in der Namensauskunft als Ursache dafür genannt, dass Post nicht ankommt. Falsch. Mein Testbefehl hatte ohne Absenderangabe eine reservierte Beispieldomain eingesetzt, deren Post jeder Empfänger verwirft. Mit dem echten Absender kam alles an. Beide Befunde bleiben bestehen und kosten Zustellbarkeit. Sie sind im Bericht als wichtig, aber nicht dringend eingestuft.
Ski, Snowboard und E-Bike haben zusammen acht Preistabellen mit über siebzig Zeilen. Wer nur wissen will, was eine Woche Ski für ein Kind kostet, will die nicht lesen. Also drei Fragen statt acht Tabellen – derselbe Baustein wie im Shop, nur hier ohne Bestellstrecke.
1 Was möchtest du leihen?
2 Für wen?
3 Welche Ausstattung?
4 Wie lange?
–
Wähle links deine Ausrüstung.
Preisstand Juli 2026 · verbindlich sind die Preise im Shop
Keine Datumsfelder. Gesucht wird der Preis, nicht ein Kalendertag. Der Zeitraum geht in den Preis ohnehin nur als Stufenwert ein – 4 bis 7 oder 8 bis 14 Tage. Zwei Kacheln statt zweier Kalender sparen im Schnitt drei Eingaben.
Der Shop läuft auf Shopware 6. Die Oberfläche kommt aus Twig-Vorlagen und SCSS, die Inhalte aus dem CMS des Systems. Was hier steht, ist der Aufbau – Zugangsdaten, Serverpfade und Kundendaten gehören nicht auf eine Projektseite und stehen hier auch nicht.
Kein Aufsatz auf das gekaufte Theme, sondern ein eigenes Theme-Plugin. Grund: Ein Aufsatz erbt dessen rund 1.400 Einstellungsfelder nicht – 26 bleiben übrig, und mit ihnen verschwinden halbe Seitenbereiche.
Überschrieben wird nur, was sich ändern soll; der Rest kommt weiter aus dem Basis-Theme. Das hält Aktualisierungen des Shopsystems einspielbar, statt sie zu blockieren.
Eine eigene Twig-Erweiterung baut Kopf-, Handy- und Rubriknavigation aus der Kategoriestruktur. Keine fest eingetragenen Kennungen, keine gepflegte Namensliste – neue Kategorien erscheinen von selbst.
Startseite und Service-Seiten liegen als CMS-Inhalt, nicht im Code. Bilder, Reihenfolge und Texte kann der Laden selbst ändern, ohne dass jemand etwas veröffentlichen muss.
Farben, Ankündigungstext, Vertrauenspunkte und die Texte der Willkommensfläche sind Felder im Verwaltungsbereich. Wer sie ändert, braucht kein Programm und keinen Termin.
Vor jedem Eingriff eine Sicherung des betroffenen Bereichs. Der zusätzliche Stilbereich lässt sich mit einem Haken abschalten, die Theme-Werte aus der Sicherung zurückschreiben.
Gearbeitet wurde durchgehend in einer eigenen Umgebung neben dem laufenden Shop. Nachgemessen: Der Live-Shop trug während des gesamten Umbaus unverändert seine Originalwerte.
Die Bausteine richten sich nach ihrer eigenen Breite statt nach der des Fensters. Derselbe Block funktioniert dadurch in der schmalen Spalte genauso wie über die volle Seite.
Ein definierter Systemschrift-Stapel statt einer Webschrift: sofort da, kein Abruf bei einem Dritten – und damit auch keine Diskussion über Schriften aus fremden Rechenzentren.
Zwei Blocknamen, die es in dieser Version nicht mehr gibt und die still nichts rendern. Ein SCSS-Übersetzer, der an einer Kurzschreibweise abbricht. Beides steht dokumentiert im Projekt, damit es niemanden ein zweites Mal kostet.
Ein kurzer Absatz, damit klar ist, was hier wem gehört.
Ein eigenständiges Folgeprojekt mit eigenem Umfang. Konzept und Gerüst stehen; über einen Teil der offenen Fragen entscheidet der Betrieb.
Ski, Skischuhe und Snowboards online für einen Zeitraum reservieren. Verbindlich wird die Reservierung mit einer Anzahlung, weil der Laden dafür Material zurückhält.
Das technische Konzept samt Datenmodell und Statusverlauf, dazu ein lauffähiges Gerüst: Verfügbarkeit über Zeitraum-Überschneidung, Rüstzeit nach der Rückgabe, Anzahlungsrechnung, Tests.
Woher der Bestand kommt, ist bewusst offen gehalten. Ob dahinter die Warenwirtschaft steckt, ein nächtlicher Export oder anfangs eine Liste – die übrige Logik merkt davon nichts.
Ist die Anzahlung bei Storno erstattbar, und ab wann nicht mehr? Wie wird sie steuerlich behandelt? Greift das Widerrufsrecht bei einer Miete mit festem Termin? Das sind keine Programmierfragen – da gehört ein Steuerberater und ein Blick vom Anwalt drauf.
Warum es in Schritten kommt. Schon ein Anfrageformular ohne Zahlung wäre vor der Wintersaison ein Gewinn und trägt kein Technikrisiko. Alles auf einmal live zu nehmen – kurz vor Weihnachten, der Stoßzeit des Ladens – wäre der falsche Zeitpunkt für den ersten Härtetest.
Wie etwas gebaut ist, warum es so gebaut ist, ob es sich auf einen anderen Fall übertragen lässt – schreib einfach. Die Nachricht geht als E-Mail an mich, sonst passiert damit nichts.