Relaunch des Türklingel-Shops: Aus einem gewachsenen Onlineshop wird ein klares Einkaufserlebnis

Der Türklingel-Shop ist ein spezialisierter Onlineshop für Türklingeln, Funkklingeln, Briefkästen, Briefkastenanlagen, Hausnummern, Türgongs, Schilder und individuelle Lösungen für den Eingangsbereich.

Über viele Jahre war ein umfangreiches Sortiment mit zahlreichen Kategorien, Unterkategorien und erklärungsbedürftigen Produkten entstanden. Die fachliche Tiefe war vorhanden – sie wurde im bisherigen Shop jedoch nicht klar genug vermittelt. Unterschiedliche Inhaltsformate, historisch gewachsene Texte und uneinheitliche Seitengestaltungen erschwerten die Orientierung.

Ziel des Relaunchs war deshalb nicht nur ein moderneres Erscheinungsbild. Der gesamte Shop sollte übersichtlicher, hochwertiger und langfristig leichter zu pflegen werden.

Die Ausgangssituation

Ein gewachsener Onlineshop bringt häufig mehr mit als nur viele Produkte. Im Laufe der Jahre entstehen zusätzliche Texte, individuelle CSS-Anpassungen, neue Produktgruppen und verschiedene Darstellungsformen.

Beim Türklingel-Shop führte dies unter anderem zu:

• uneinheitlich gestalteten Kategorie- und Informationsseiten,
• langen SEO-Texten ohne klare visuelle Struktur,
• mehrfach vorhandenen oder konkurrierenden Überschriften,
• wenig Unterstützung bei der Produktauswahl,
• unterschiedlichen Abständen, Farben und Schriftgrößen,
• veralteten Bild- und Navigationsdarstellungen,
• schwer wartbaren Einzellösungen,
• fehlender visueller Trennung der Produktbereiche.

Hinzu kam eine besondere Herausforderung: Der laufende Shopbetrieb und die vorhandene Warenwirtschaft durften durch den Relaunch nicht beeinträchtigt werden.

Die strategische Grundlage

Statt jede Shopseite einzeln neu zu gestalten, entwickelte Pixiweb zunächst ein modulares Commerce Design System.

Dieses System definiert wiederverwendbare Gestaltungselemente für:

• Startseite,
• Hauptkategorien,
• Unterkategorien,
• Produktwelten,
• Beratungsbereiche,
• FAQ-Elemente,
• Service- und Vertrauensbausteine,
• Header und Navigation,
• Produktlisten,
• Blogbeiträge und Ratgeberinhalte.

So entstand keine Sammlung unabhängiger Einzelseiten, sondern ein zusammenhängendes System, das sich auf viele Bereiche des Shops übertragen lässt.

Die Warenwirtschaft bleibt dabei die zentrale Quelle für Produktdaten, Preise, Varianten und Verfügbarkeiten. Der Relaunch verändert die Darstellung und Nutzerführung – nicht die bestehende Produktlogik.

Entwicklung in einer kontrollierten Testumgebung

Um Risiken für den laufenden Türklingel-Shop zu vermeiden, wurde das neue System zunächst in einer separaten Testumgebung aufgebaut und geprüft.

Dort konnten Gestaltung, responsive Darstellung und wiederverwendbare Komponenten entwickelt werden, ohne in den produktiven Shopbetrieb einzugreifen.

Erst nach erfolgreichen Tests wurden die einzelnen Bausteine schrittweise in den Live-Shop übernommen. Dieses Vorgehen ermöglichte jederzeit eine klare Kontrolle darüber, welche Änderungen bereits aktiv waren und welche Bereiche weiterhin auf der bestehenden Shopdarstellung basierten.

Eine neue visuelle Identität

Das neue Erscheinungsbild verbindet technische Präzision mit einer warmen und hochwertigen Gestaltung.

Dunkelblau bildet die ruhige, vertrauensvolle Grundfarbe. Ein warmer Sandton lockert die Flächen auf und schafft einen passenden Rahmen für Produkte aus Edelstahl, Messing, Schiefer, Aluminium und beschichteten Oberflächen. Goldfarbene Akzente führen durch die Inhalte und markieren wichtige Elemente.

Großzügige Abstände, klar gegliederte Inhalte und eine einheitliche Typografie sorgen dafür, dass der Shop trotz seines umfangreichen Sortiments ruhig und übersichtlich wirkt.

Auch Header, Hauptnavigation und Mega-Menüs wurden gestalterisch an das neue System angepasst. Die Unterkategorien erscheinen nun als klar erkennbare Bildkacheln und ermöglichen einen wesentlich schnelleren Einstieg in das Sortiment.

Die neue Startseite

Die Startseite wurde von einer allgemeinen Shopübersicht zu einem klar aufgebauten Einstieg in die wichtigsten Produktwelten weiterentwickelt.

Ein kompakter Hero-Bereich vermittelt unmittelbar, welche Lösungen der Türklingel-Shop anbietet. Das großformatige Anwendungsbild zeigt die Produkte in einem realistischen Eingangsbereich und verbindet Sortiment und Gestaltungsidee miteinander.

Darunter führen strukturierte Produktwelten gezielt zu:

• Türklingeln und Funkklingeln,
• Briefkästen und Briefkastenanlagen,
• Hausnummern und Türgongs,
• Firmenschildern und Hinweisschildern,
• LIRA-Komponenten und Drucktastern.

Die einzelnen Bereiche bleiben kompakt und bilden dennoch eine nachvollziehbare Orientierung durch das umfangreiche Angebot.

Ergänzt wird die Startseite durch Kaufvorteile, Beratungsangebote, Ratgeberbeiträge und vertrauensbildende Inhalte.

Kategorie-Seiten mit echter Auswahlhilfe

Ein wichtiger Teil des Projekts war die Überarbeitung der Haupt- und Unterkategorien.

Für zahlreiche Kategorien wurden neue Hero-Bereiche entwickelt. Sie erklären bereits im oberen Seitenbereich:

• welche Produkte angeboten werden,
• für welche Einbausituation sie geeignet sind,
• welche Materialien und Ausstattungen zur Auswahl stehen,
• worauf vor der Bestellung geachtet werden sollte.

Die neuen Inhalte ersetzen unstrukturierte Textblöcke durch kurze, verständliche Informationen und konkrete Entscheidungshilfen.

Im unteren Bereich der Kategorien folgen kompakte Beratungsabschnitte, Praxistipps und häufig gestellte Fragen. Nutzer erhalten dadurch nicht nur eine Produktliste, sondern Unterstützung bei der Auswahl.

Unterschiedliche Produktbereiche, ein gemeinsames System

Ob Türklingeln, Briefkästen, Hausnummern oder Firmenschilder: Alle Bereiche gehören zum Eingangsbereich, besitzen aber jeweils einen eigenen Charakter.

Deshalb wurde das Designsystem so aufgebaut, dass die Grundstruktur erhalten bleibt, einzelne Produktwelten jedoch optisch differenziert werden können.

Der Briefkastenbereich verwendet beispielsweise einen etwas zurückhaltenderen, materialnahen Farbton. Technische Komponenten werden klarer und funktionaler inszeniert. Individuell gestaltbare Produkte erhalten mehr Raum für Material, Beschriftung und Personalisierung.

So bleibt der Shop als Marke konsistent, ohne dass alle Seiten identisch wirken.

SEO, strukturierte Daten und GEO

Die neue Inhaltsstruktur wurde von Beginn an mit Blick auf Suchmaschinen und moderne KI-Suchsysteme entwickelt.

Dazu gehören:

• eindeutige H1- und H2-Strukturen,
• thematisch klar aufgebaute Kategorieinhalte,
• verständliche Fragen und Antworten,
• interne Verknüpfungen zwischen passenden Produktbereichen,
• strukturierte FAQ-Daten nach Schema.org,
• globale Organisations- und WebSite-Daten,
• kategorienbezogene Beschreibungen und Beratungstexte,
• semantisch verständliche Inhalte für klassische und generative Suchsysteme.

Bestehende, über die Warenwirtschaft eingebundene Alttexte wurden gezielt ausgeblendet, wenn sie mit den neuen Inhalten konkurrierten oder doppelte Überschriften erzeugten.

Responsive bis ins Detail

Die neuen Bereiche wurden nicht nur für große Bildschirme gestaltet. Hero-Elemente, Produktwelten, FAQ-Bereiche, Navigation und Inhaltskarten wurden für Desktop, Tablet und Smartphone angepasst.

Besonderes Augenmerk lag auf kritischen Übergangsgrößen, in denen klassische Shop-Templates häufig Probleme verursachen.

Dazu gehörten unter anderem:

• Wechsel zwischen Desktop- und Mobilnavigation,
• Bildproportionen in Hero-Bereichen,
• Abstände und Schriftgrößen auf kleinen Displays,
• Darstellung der Mega-Menüs,
• Lesbarkeit längerer Überschriften,
• Offcanvas-Navigation und Warenkorb,
• gleichmäßige Kartenhöhen und flexible Inhaltsmengen.

Ein Relaunch ohne unnötige Systemwechsel

Für den neuen Auftritt war weder ein Plattformwechsel noch der vollständige Austausch der vorhandenen Shoplogik notwendig.

Pixiweb nutzte bewusst die bestehenden Möglichkeiten von JTL-Shop, Snackys, Warenwirtschaft und OnPage Composer. Neue Funktionen wurden nur dort ergänzt, wo sie einen klaren Mehrwert für Nutzer, Pflege oder Darstellung bieten.

Dadurch bleibt der Shop:

• aktualisierbar,
• erweiterbar,
• für das bestehende Team bedienbar,
• mit der Warenwirtschaft verbunden,
• unabhängig von einer Vielzahl zusätzlicher Plugins,
• langfristig wirtschaftlich wartbar.

Das Ergebnis

Der Türklingel-Shop präsentiert sich heute wesentlich ruhiger, hochwertiger und strukturierter.

Besucher erkennen schneller:

• welche Produktbereiche angeboten werden,
• welche Lösung zu ihrem Gebäude passt,
• worin sich Materialien und Montagearten unterscheiden,
• welche technischen Voraussetzungen zu beachten sind,
• welche Produkte personalisiert werden können,
• wo sie bei Fragen Unterstützung erhalten.

Gleichzeitig entstand im Hintergrund ein skalierbares System. Neue Kategorien und Inhalte können auf Basis vorhandener Komponenten aufgebaut werden, ohne jedes Mal ein neues Layout entwickeln zu müssen.

Der Relaunch verbindet damit modernes Design, verständliche Beratung, technische Stabilität und langfristige Wartbarkeit.

Leistungen von Pixiweb

• Analyse der bestehenden Shop- und Inhaltsstruktur
• Konzeption des neuen Einkaufserlebnisses
• Entwicklung eines modularen Commerce Design Systems
• Neugestaltung von Startseite und Produktwelten
• Überarbeitung von Header, Navigation und Mega-Menüs
• Entwicklung wiederverwendbarer Kategorie-Blueprints
• Responsive Optimierung für Desktop, Tablet und Smartphone
• Strukturierung von Beratungs- und FAQ-Inhalten
• SEO-, GEO- und Schema.org-Konzeption
• Bereinigung und Konsolidierung bestehender CSS-Anpassungen
• Kontrollierte Entwicklung in einer Testumgebung
• Stufenweiser Rollout in den laufenden JTL-Shop
• Qualitätskontrolle über verschiedene Browser und Bildschirmgrößen

Sie betreiben einen gewachsenen Onlineshop?

Ein erfolgreicher Relaunch muss nicht zwangsläufig mit einem vollständigen Systemwechsel beginnen.

Oft liegt das größte Potenzial in einer klareren Struktur, einer besseren Nutzerführung und einem Gestaltungssystem, das vorhandene Technik sinnvoll weiterverwendet.

Pixiweb entwickelt individuelle Relaunch-Konzepte für bestehende Onlineshops – mit Blick auf Design, Bedienbarkeit, Sichtbarkeit und langfristige Pflege.

Lassen Sie uns gemeinsam prüfen, wie aus Ihrem gewachsenen Shop ein übersichtliches und überzeugendes Einkaufserlebnis werden kann.