Shop-Webdesign für Muskelkater Sport

Vorher und Nachher

Vier Seiten im Vergleich. Der Regler blendet zwischen alt und neu um.

Startseite nach dem Umbau: ruhige Willkommensfläche mit Text links und einer Angebotskarte rechts.

Startseite vor dem Umbau: bunter Werbebanner über die volle Breite und ein dichtes Produktraster.

Startseite. Statt Werbebanner ein Satz, der den Laden beschreibt. Adresse, Öffnungszeiten und Telefon stehen jetzt oben.

Links: 1. August 2026, der letzte Tag des alten Shops. Rechts: 2. August 2026, der Tag der Umstellung.

Dunkelmodus

Kein Filter, sondern eigene dunkle Werte für jede Fläche, Linie und Schrift.

Dieselbe Startseite in der hellen Ansicht.

Startseite. Dunkelgrüner Grund, dazu ein helleres Markengrün.

Farben bleiben erhalten

Jede Farbe hat eine eigene dunkle Entsprechung.

Alle Kontraste geprüft

Jede Stelle erfüllt den Standard AA.

Bis in jeden Winkel

Auch Formulare, Tabellen, Overlays und der leere Warenkorb.

Kein weißes Aufblitzen

Die Wahl wird gespeichert und vor dem Laden angewendet.

Beschrifteter Schalter

Auch für Vorlesesoftware verständlich.

Seit dem Start weiterentwickelt

Der Shop wächst im laufenden Betrieb weiter. Stand Oktober 2026.

Startseite im Oktober 2026: links ein Satz zum Laden mit zwei Schaltflächen, rechts das Angebot der Woche als Kartenstapel. — **Startseite.** Ein Satz zum Laden, daneben die Angebote der Woche als Kartenstapel.

Produktseite eines Skisets: rechts die Kaufkarte mit Preis, Liefertermin, Restbestand, Skilänge und Bindungseinstellung. — **Kaufkarte.** Liefertermin, Restbestand und Bindungseinstellung auf einen Blick.

Längenberater in der Produktbeschreibung: Körpergröße 165 cm und Fahrkönnen Fortgeschritten ergeben eine Empfehlung von 155 bis 165 cm. — **Längenberater.** Körpergröße und Fahrkönnen ergeben eine passende Skilänge.

Neu seit August

Jahreszeiten. Vier eigene Startseiten, der Wechsel läuft automatisch.
Eigene Schrift. Im Theme eingebettet, ohne Abruf bei Dritten.
Handy-Ansicht. Kürzere Seiten, aufklappbare Fußzeile, Telefon direkt im Kopf. Pflichtangaben bleiben sichtbar.
Kaufkarte. Liefertermin nach Versandtag und Feiertagen, Hinweis bei Einzelstücken.
Längenberater. Empfehlung für Ski, abhängig von Körpergröße, Fahrkönnen und Skityp.
Passt dazu. Passendes Zubehör auf der Produktseite, etwa Helm und Brille zum Skiset.
Versandschwelle. Der Warenkorb zeigt, was bis zum kostenlosen Versand fehlt.
Markenband. Füllt sich selbst mit den Marken, die gerade am meisten Ware haben.
Produktbilder. Quadratische Galerie, nichts wird mehr abgeschnitten.

Die Änderungen im Einzelnen

Logo und Marke blieben. Geändert wurde alles zwischen Besucher und Ware.

Baustelle	Vorher	Nachher
Erster Eindruck	Werbebanner über die volle Breite, direkt danach Produkte	Ein Satz zum Laden, dazu Adresse, Öffnungszeiten und Telefon
Kopfnavigation	Flache Leiste, Unterkategorien erst nach mehreren Klicks	Acht Hauptpunkte mit Aufklappmenüs
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
Kaufknopf am Handy	Nicht erreichbar, nur mit der Maus sichtbar	Immer sichtbar
Rabattmarken	Ein bloßes „%“ ohne Zahl	Der echte Wert, etwa −45 %
Preisformat	„(45.01% gespart)“	„(45 % günstiger)“
Schrift	Angegeben, aber nie geladen	Eigene Schrift im Theme, ohne Abruf bei Dritten
Fußbereich	Vier Hintergrundflächen übereinander	Eine durchgehende Fläche, vier sortierte Spalten
Leerer Warenkorb	Eine Zeile Text	Zwei Wege zurück ins Sortiment
Dunkelmodus	Nicht vorhanden	Vollständig, alle Kontraste geprüft
Verleihpreise	Acht Preistabellen zum Durchsuchen	Ein Rechner mit wenigen Fragen

Auf dem Telefon seitlich verschiebbar.

Gemessene Kontraste

Alle Texte auf Start-, Kategorie- und Produktseite erfüllen den Standard WCAG AA, hell wie dunkel.

0Kontrastverstöße nach dem Umbau (vorher: 6)

1,04 → 18,2Kontrast der Reiter auf der Produktseite

0Schriftabrufe bei Google, die Schrift liegt im Theme

Umfang der eigenen Arbeit

Gestaltung und Programmierung stammen von Timo Britz, vom ersten Entwurf bis zum fertigen Theme. Sortiment, Preise, Produktbilder und Texte des Ladens blieben unverändert.

Die Leistungen im Einzelnen

Gestaltungssystem. Farben, Schriftgrößen und Abstände als ein zusammenhängender Satz von Werten.
Eigenes Shopware-Theme. Wichtige Werte und Texte sind im Verwaltungsbereich einstellbar.
Navigation. Aufklappmenüs, eigenes Handymenü, Rubrikspalte. Neue Kategorien erscheinen von selbst.
Startseite. Die Reihenfolge der Bereiche ändert der Laden selbst.
Kaufbereich. Echte Rabattwerte und ein immer sichtbarer Kaufknopf.
Verleih-Rechner. Wenige Fragen statt acht Preistabellen.
Bausteine. Sechs fertige Blöcke, ohne Programmierkenntnisse einsetzbar.
Dunkelmodus. Ein eigenes, vollständiges Farbsystem.
Jahreszeiten. Aussehen, Navigation und Startseite wechseln mit der Jahreszeit.
Symbole. Als Vektorgrafik gezeichnet, in der Farbe des Themes.
Artikel-Umzug. Übernahme des Altbestands aus dem Vorgängershop.
Barrierefreiheit. Kontraste, Überschriften und Tastaturbedienung geprüft.

Ablauf des Umbaus

Vom ersten Entwurf am 21. Juli bis zur Umstellung am 2. August 2026. Gearbeitet wurde in einer getrennten Testumgebung, der laufende Shop war nie betroffen. Der Umbau ist abgeschlossen, der Umzug des Altbestands läuft.

Der Artikel-Umzug

Der Vorgängershop auf Magento ist abgeschaltet, sein Bestand aber noch vorhanden. Eigene Befehle übernehmen Artikel, Größen, Bilder und Hersteller daraus in Shopware.

Was dabei zu lösen war

Dubletten. Beide Systeme schreiben die Artikelnummer anders. Erst normiert passt der Abgleich.
Größen. Der alte Shop führte jede Größe als eigenen Artikel, Shopware führt sie als Variante.
Ähnliche Namen. Eine Prüfseite zeigt beide Fotos nebeneinander. Entschieden wird von Hand.
Hersteller. Vorhandene werden wiederverwendet statt doppelt angelegt.

Prüfungen

Auf fast jeden Schritt folgt eine Prüfseite, die alten und neuen Stand nebeneinanderstellt. Entschieden wird von Hand.

Was geprüft wurde

Dubletten. Verdachtsfälle mit beiden Fotos nebeneinander.
Preise. Abgleich mit der Herstellerliste, auch je Größe.
Kategorien. Alte Kategorien ohne Entsprechung kommen auf eine Liste.
Kontraste. Helle und dunkle Ansicht nach WCAG AA.
Datenschutz. Keine Verbindung nach außen vor der Einwilligung.

Verleih-Rechner zum Ausprobieren

Wenige Fragen statt acht Preistabellen. Derselbe Baustein wie im Shop.

1 Ausrüstung wählen

2 Für wen?

3 Welche Ausstattung?

4 Wie lange?

Mit Schuh

Preis

Ausrüstung links auswählen.

Verleih im Shop ansehen

Preisstand Juli 2026 · verbindlich sind die Preise im Shop

Alle Preise im Überblick anzeigen

Keine Datumsfelder. Gefragt wird nur die Dauer, das spart Eingaben.

Technischer Aufbau

Shopware 6 mit eigenem Theme aus Twig-Vorlagen und SCSS. Die Inhalte pflegt der Laden selbst im CMS.

Technische Einzelheiten

Eigenes Theme-Plugin. Statt eines Aufsatzes auf das gekaufte Theme.
Nur das Nötige überschrieben. Updates des Shopsystems bleiben möglich.
Navigation aus dem Kategoriebaum. Neue Kategorien erscheinen von selbst.
Container-Abfragen. Bausteine passen sich ihrer eigenen Breite an.
Schrift im Theme. Eingebettet, kein Abruf bei Dritten.
Rücknehmbar. Jeder Eingriff gesichert, gearbeitet in einer getrennten Testumgebung.

Zur Einordnung

Der Shop gehört Muskelkater Sport Köln. Der Umbau wird mit Zustimmung des Inhabers gezeigt.
Marken, Produktbilder und Preise in den Bildschirmfotos gehören dem Geschäft oder den Herstellern.
Verbindlich ist der Shop. Der Rechner zeigt den Preisstand von Juli 2026 und ist kein Angebot.
Eigener Anteil. Der Shop läuft auf Shopware 6 und einem gekauften Basis-Theme. Von Timo Britz stammen Gestaltung, Theme, Navigation, Startseite, Bausteine und Rechner.

Zum Shop Weitere Projekte

Kontakt

Für Fragen zur Bauweise, zu den zugrunde liegenden Entscheidungen oder zur Übertragbarkeit auf einen anderen Betrieb steht das folgende Formular bereit.

Ohne JavaScript lässt sich die Rechenaufgabe nicht laden. Anfragen bitte per E-Mail an info@timobritz.de.

Shop-Webdesign
für Muskelkater Sport Köln