Hannes Rœther

Der Hauptsitz von hannes roether ist eine umgebaute Brennerei, in der Altes und Neues ineinandergreifen. Der Shop konnte davon nichts. Moving Primates hat ihn headless neu gebaut, mit Kollektionsseiten, die sich gestalten lassen statt immer gleich auszusehen.

Eine Marke, die Retro und Modern vereint

Der Hauptsitz von hannes roether liegt in Pliening, in einer ehemaligen Kartoffel-Brennerei. Umgebaut statt abgerissen, das Bestehende sichtbar gelassen und mit Zeitgemäßem verbunden. Am deutlichsten zeigt das die Fassade, vor deren schwarzem Holz drei alte Stahltanks als Vordächer über den Fenstern hängen. Der Umbau durch bogevischs buero hat beim Architekturpreis “Über Oberbayern 2024” des BDA eine Anerkennung erhalten.

Dieses Prinzip ist nicht nur Architektur, es ist die Marke. Seit 2004 entwirft hannes roether Kleidung für Männer, seit 2007 ergänzt Nicky Wendt die Frauenlinie, und beide arbeiten mit derselben Spannung. Grobstrick, Kaschmir, Deutschleder und grobes Leinen im Winter, Feinstrick, Baumwoll-Seide und kühlendes Leinen im Sommer. Traditionelle, hochwertige Materialien, zeitlose Silhouetten, dazu überraschende Details. Altes und Neues, Retro und Modern, nicht nebeneinander gestellt, sondern ineinander verschränkt.

Ein Shop für diese Marke muss dasselbe leisten. Er muss Material zeigen auf einem Bildschirm, auf dem man nichts anfassen kann, und er darf dabei nicht aussehen wie jeder andere Modeshop.

Der alte Shop zeigte davon nichts

Er lag auf einer eigenen Subdomain, getrennt von der Markenseite. Der Katalog war flach, jede Kategorie hing gleichrangig unter `/collections/`, manche nur unter einer Nummer wie `/collections/251`, und eine Verschachtelung nach Damen, Oberteile, Blusen gab es nicht. Vor allem aber sah jede Kollektionsseite aus wie jede andere. Drei Spalten, jede Kachel gleich groß, ein Produkt neben dem nächsten, Zeile für Zeile bis zum Seitenende.

Für einen Discounter ist das richtig. Für eine Marke, deren ganzer Anspruch in Material und Komposition liegt, ist es das Gegenteil dessen, was sie im Laden tut. Dort hängt nicht alles gleich groß nebeneinander.

Angefangen hat es hinten

Der Relaunch ist nicht der Anfang der Zusammenarbeit, sondern die zweite Stufe. Seit 2024 läuft bei hannes roether unsere Middleware Hydropop im Hintergrund, angebunden an das Warenwirtschaftssystem ProMode, von wo aus sie die Verkaufskanäle mit Produkten, Varianten und Stammdaten versorgt. Für Kundinnen und Kunden war davon nichts zu sehen, und genau das war der Punkt. Ein Design, das den Anspruch einlöst.

Der alte Shop lief auf Debut, einem kostenlosen Standard-Theme von Shopify, das für hannes roether angepasst worden war. Die Typografie der Marke war dort schon angekommen, gesetzt in Serif Gothic, einer Schrift, die Herb Lubalin und Tony DiSpigna 1972 an Lubalins Avant Garde angelehnt haben. Der Rahmen darum blieb aber der eines Standard-Themes, und auf die Frage, wie man Kaschmir auf einem Bildschirm zeigt, hatte er keine Antwort.

Der Relaunch begann deshalb mit Workshops, aus denen ein Design für Desktop und Mobile entstand, das die Bildsprache der Marke ernst nimmt statt sie in ein Raster zu zwingen. Die Typografie geht dabei einen Schritt zurück zum Ursprung. Der neue Shop ist in ITC Avant Garde Gothic gesetzt, der geometrischen Schrift, die Lubalin und Tom Carnase 1970 aus seinem Titelschriftzug für das Magazin Avant Garde entwickelt haben. Siebziger Jahre in der Schrift, zeitgemäß in Fläche und Komposition, also dasselbe Prinzip wie im Hauptsitz. Und der Name erscheint im Shop wieder mit der Ligatur in Rœther, wie auf der früheren Markenseite, während der alte Shop ihn ohne geschrieben hat.

Mit dem Design kamen Regeln, die seitdem niemand mehr diskutiert, nämlich Produktbilder im Verhältnis 4:6, Freisteller auf einem festgelegten Hintergrundton mit 17 Prozent Abstand zum Motiv und Ausgangsmaterial mit rund 20 Megapixel. Zwanzig Megapixel klingen übertrieben für eine Website. Sie sind es nicht, wenn jemand auf einer Produktseite so weit hineinzoomen soll, dass er die Bindung des Strickstücks erkennt.

Als 2025 der Relaunch dazukam, stand die Datenschicht damit bereits. Das Design musste nicht auf eine Schnittstelle warten, und das neue Frontend ließ sich vom ersten Tag an mit echten Produktdaten bauen statt mit Platzhaltern. Was sonst die erste Projekthälfte kostet, war hier schon erledigt.

Der ERP-Anschluss

ProMode ist das führende System für die Stammdaten von hannes roether. Dort entstehen Artikel, Varianten, Farben und Größen. Hydropop bringt diesen Katalog nach Shopify und legt Produkte und Varianten an, mit ihren Optionen, Metafields und Verkaufskanälen. Sanity erhält pro Produkt ein Stammdaten-Dokument. Kommt ein neues Produkt hinzu, legt ein Befehl in Sanity die Produktseite an, übernimmt den Namen, erzeugt die URL, verknüpft die Seite mit dem Stammdatensatz und veröffentlicht sie, einzeln oder für alle neuen Produkte auf einmal.

Mit dem Katalog kommen die erweiterten Daten, die der Shop für seine Funktionen braucht. Ein Beispiel ist der Farbfilter. ProMode liefert zu jeder Farbe drei Angaben, den Hexwert, den Verkaufsnamen und die Farbgruppe. Der Verkaufsname lautet in der Praxis tornado/tornado, die Farbgruppe dagegen dklblau. Für einen Filter ist der Verkaufsname unbrauchbar, weil niemand nach Tornado sucht. Hydropop verarbeitet beides und stellt die Farbgruppen bereit, aus denen sich der Filter aufbaut, während der Farbpunkt exakt den Hexwert aus dem ERP trägt statt einer im Frontend nachgebauten Annäherung.

Auch der laufende Betrieb hängt an dieser Verbindung. Über Hydropop laufen Bestellungen, Fulfillment, Lagerbestände, Rückerstattungen und Rechnungen, sodass Shop und Warenwirtschaft nicht nur beim Katalog denselben Stand haben.

Ein Shop, der zur Marke gehört

Das Design wurde als eigenes Frontend in Next.js umgesetzt und läuft auf Vercel. Shopify bleibt im Hintergrund für Warenkorb, Checkout und Orders, die gesamte Darstellung kommt aus dem eigenen Frontend-Build.

Für die Marke heißt das zuerst einmal, dass der Shop wieder Teil der Hauptdomain ist. Kunden wechseln beim Klick auf ein Produkt nicht mehr auf eine fremde Subdomain. Und die Struktur folgt endlich der Navigation. Blusen liegen unter /frauen/oberteile/blusen, ein Hemd unter /maenner/oberteile/hemden/vi29site-3072. Was der Kunde in der Menüführung sieht, steht auch in der Adresszeile.

Schluss mit dem gleichförmigen Raster

Hier liegt der Kern des Projekts. Eine Kollektionsseite ist bei den meisten Shops eine Ausgabeliste. Produkte kommen in der Reihenfolge, die das System vorgibt, jede Kachel gleich groß, jedes Bild im selben Zuschnitt. Wer daran etwas ändern will, braucht einen Entwickler.

Bei hannes roether ist die Kollektionsseite eine Gestaltungsfläche in Sanity, und darunter liegt ein festes Grid-System. Auf dem Desktop hat es vier Spalten, auf dem Smartphone zwei. Eine Kachel belegt eine Spalte, zwei Spalten und zwei Reihen oder auf dem Desktop die volle Breite, und in jeder dieser Größen bleibt das Bild im Verhältnis 4:6. Die Redaktion entscheidet, welches Bild in welcher Größe an welcher Stelle steht, die Proportionen hält das System.

Ein Modelshot lässt sich so groß stellen und bestimmt dann den Rhythmus der Seite, während ein Freisteller daneben klein bleibt. Produkte lassen sich frei anordnen statt in der Reihenfolge des Katalogs, und wo ein Bild fehlt, wird es an Ort und Stelle hochgeladen. So entsteht eine Seite, die einer Auslage näher ist als einer Liste, am deutlichsten auf der Einstiegsseite für Frauen. Genau der Unterschied, den die Marke im Laden macht und den sie online bisher nicht machen konnte.

Bilder einmal machen statt immer wieder

Gestaltungsfreiheit erzeugt ein Folgeproblem. Sobald ein Bild mal groß, mal klein, mal quer und mal hoch erscheint, passt nicht mehr jedes Foto überall. Bisher hieß das für die Marke, für jedes neue Format neu zu fotografieren.

Deshalb tragen die Bilder ihre Verwendungsmöglichkeit selbst. Beim Upload wird hinterlegt, für welche Formate und Verwendungen ein Motiv geeignet ist, und die Bildpipeline rechnet es anschließend automatisch herunter und skaliert es auf das jeweils richtige Bildformat. Hochgeladen wird jedes Bild nur einmal, in voller Auflösung.

Drei Rollen sind fest vergeben. Eine für Warenkorb, Checkout und Bestellmails, wo ein anderes Motiv wirkt als auf der Produktseite. Ein Modelshot für die Darstellung im Raster. Und eine eigene Galerie für die Produktseite, die pro Variante abweichen darf. Wo nichts hinterlegt ist, greift die Standardzuordnung, sodass nie eine leere Stelle entsteht.

Der Bestand wird damit wiederverwendbar statt einmalig. Eine neue Kampagnenseite braucht keine neue Produktion, sondern eine andere Auswahl aus dem, was ohnehin vorhanden ist.

Die Steuerung zwischen ERP und Bild

Damit das trägt, müssen Warenwirtschaft und Bildebene sauber getrennt und trotzdem verbunden sein. Die Bilder laufen über dieselbe Verbindung wie der Katalog, gehören aber nicht dem ERP. Sie liegen in Hydropop, werden dort im Stapel oder direkt am Produkt hochgeladen, bekommen ihre Alt-Texte und ihre Rollen, und die Bildpipeline skaliert sie für jede Auflösung und jede Zoomstufe. Eine Änderung in der Warenwirtschaft überschreibt keine Bildzuordnung, und wer ein Bild austauscht, fasst keine Stammdaten an.

Aus dem Import von ProMode entsteht zunächst eine Bildstruktur, die für die Warenwirtschaft sinnvoll ist, für einen Shop aber nicht. Im Asset-Konfigurator von Hydropop wird sie einmalig durch eine Dimension ersetzt, die ihre Werte aus den Produktdaten des ERP bezieht, bei hannes roether die Farbe. Die Stellen für die Bilder ergeben sich damit aus den Varianten, die ProMode liefert, statt von Hand angelegt zu werden. Wo eine einzelne Variante abweichen soll, wird sie gesondert belegt, und das System zeigt an, dass sie von ihrer Gruppe abweicht.

Für eine neue Kollektion heißt das, dass niemand mehr Bild für Bild hochladen und eintragen muss. Über den Asset Importer lädt die Redaktion einen ganzen Ordner in Hydropop, und Hydropop pflegt die Bilder selbst ein.

Redaktion ohne Entwickler

Alles, was um die Produkte herum passiert, liegt in Sanity. Für hannes roether haben wir dreizehn eigene Bausteine gebaut, darunter ein Banner-Grid für Kampagneneinstiege, ein Collection-Teaser, ein Split-Layout mit mitlaufender Spalte, ein Content-Grid, der Store Locator mit Karte, eine FAQ mit Sprungmarken und ein Klaviyo-Formular. Wiederkehrende Blöcke liegen zentral, sodass eine Änderung überall dort greift, wo der Block eingebunden ist.

Gearbeitet wird per Visual Editing direkt in der Vorschau. Ein Klick auf ein Element im Shop öffnet die passende Maske, Änderungen erscheinen sofort im Entwurf und bleiben bis zur Veröffentlichung intern sichtbar. Das funktioniert auch auf der Live-Seite selbst, denn wer in Sanity angemeldet ist, sieht dort die bearbeitbaren Elemente und springt mit einem Klick in die passende Maske. Wer nichts von Content-Modellen versteht, sieht trotzdem, was er tut, und eine Historie hält fest, wer wann welches Feld geändert hat. Apropo Historie - in Sanity gibt es ebenso die Zukunft in Form von Content Releases, damit Mitarbeiter nicht an Feiertragen oder Wochenenden Inhalte freischalten müssen. Der neueste Clou unseres Sanity Setups: Ein serverseitiges A/B-Testing inklusive Analytics-Daten.

Umzug bei laufendem Betrieb

Der Shop zog von der Subdomain auf die Hauptdomain, und dabei änderte sich jede einzelne URL, Kategorien etwa von /collections/blusen nach /frauen/oberteile/blusen. Für den Bestand haben wir ein vollständiges Redirect-Mapping aufgebaut und im CMS hinterlegt, wo die Redaktion es selbst pflegen kann, während die alte Subdomain in Shopify die primäre Domain für den Checkout bleibt. Sitemap und robots.txt entstehen ebenfalls aus dem CMS, Inhalte auf No-Index fallen automatisch heraus.

Was der Shop heute kann

Eine Kollektionsseite bauen, die nicht aussieht wie eine Liste. Einen Modelshot groß stellen und den Freisteller daneben klein. Ein vorhandenes Bild in einem neuen Format verwenden, ohne neu zu fotografieren. Die Bilder einer neuen Kollektion als einen Ordner hochladen. Nach Farbe und Größe filtern, ins Gewebe zoomen, etwas auf die Wunschliste legen, den nächsten Laden auf der Karte finden.

Altes Haus, neue Nutzung. Für den Shop gilt jetzt dasselbe wie für die Brennerei, und seit dem 10. August 2026 läuft er unter www.hannesroether.de.