Shopdesign & VirtueMart
Bei Philathek mussten rund 23.700 Produkte, Kategorien, Preise und technische Zustände in eine verständliche Shopoberfläche übersetzt werden. Der Praxisfall zeigt, warum Gestaltung bei VirtueMart mit Datenstruktur, Navigation und Bestellablauf beginnt.
Ausgangspunkt: Gestaltung beginnt bei der Produktstruktur
Der neue Shop entstand nicht auf einer leeren Datenbasis. Rund 23.700 Produkte, historisch gewachsene Kategorien, Preise, Sonderpreise und Steuersätze mussten aus einem älteren VirtueMart-System übernommen werden. Fehlerhafte Zeichenkodierung und beschädigte HTML-Anweisungen in Produktbeschreibungen verhinderten eine direkte Migration.
Damit wurde die Datenbereinigung selbst zu einer gestalterischen Voraussetzung. Erst korrekt lesbare Produktnamen, Beschreibungen, Preise und Kategorien ermöglichen eine verlässliche visuelle Hierarchie. Eine aufgeräumte Oberfläche kann strukturelle Fehler in den Inhalten nicht ausgleichen.
Navigation als gestalterisches Grundgerüst
Die Produktkategorien wurden nicht nur importiert, sondern als Shopnavigation in Joomla und VirtueMart eingebunden. Für die responsive Darstellung entstand eine eigene Anpassung, damit die umfangreiche Struktur auch auf kleinen Displays bedienbar bleibt.
Zusätzlich wurden PDF-Kataloge aus Produktkategorien erzeugt und eine eigene Downloadseite aufgebaut. Navigation, Kategorieansicht und Katalogausgabe greifen damit auf dieselbe Produktordnung zurück, übersetzen sie aber in unterschiedliche Nutzungssituationen.
Ein Gestaltungssystem für verschiedene Seitentypen
Auf Basis von Gantry 5 entstand ein individuelles responsives Website-Template. Die Startseite erhielt eigene Bereiche für Markttermine, Bestseller und Sonderangebote. Für Produktkategorien und Produktdetails wurden separate VirtueMart-Templates entwickelt.
Diese Ansichten brauchten eine gemeinsame visuelle Sprache, aber keine identische Anordnung. Auf der Startseite steht Orientierung im Vordergrund, in der Kategorie der Vergleich und auf der Produktdetailseite die eindeutige Zuordnung von Bild, Artikelnummer, Beschreibung, Preis und Kaufoption.
Warenkorb, E-Mail und Rechnung gehören zum Shopdesign
Die Gestaltung endete nicht an der Produktseite. Warenkorb, Bestellbestätigung, E-Mail und PDF-Rechnung wurden projektspezifisch angepasst. Zahlungs- und Versandarten sowie spätere Funktionen wie „Preis auf Anfrage“ erzeugten weitere Zustände, die verständlich dargestellt werden mussten.
Im Januar 2025 wurde auch das Logo überarbeitet und in Website, Bestätigungsmails und PDF-Rechnung integriert. Dadurch blieb die visuelle Zuordnung über Browser, Nachricht und Dokument hinweg erhalten.
Der Launch prüft das gesamte Gestaltungssystem
Vor der Liveschaltung wurden aktuelle Preise erneut importiert, Produktbilder korrigiert, Suche und Warenkorb angepasst und Bestellabläufe getestet. Die responsive Warenkorbdarstellung, Länderauswahl, Zahlungsarten und die Ausgabe zusätzlicher Produktinformationen wurden schrittweise kontrolliert.
Am 22. Februar 2025 wurde der neue Shop auf den Kundenserver übertragen. Der alte Shop blieb ausschließlich für historische Vorgänge erreichbar; die neue Oberfläche konnte unabhängig davon in Betrieb gehen.
Was sich aus dem Projekt ableiten lässt
- Datenstruktur vor Oberfläche: Kategorien, Produktdaten und Preislogik bestimmen, welche Navigation und Seitentypen benötigt werden.
- Shopzustände vollständig gestalten: Produkt, Warenkorb, Zahlung, E-Mail und Rechnung bilden eine zusammenhängende Nutzungskette.
- Markengestaltung medienübergreifend einsetzen: Logo und visuelle Zuordnung müssen auch in Bestätigungen und Dokumenten funktionieren.
- Responsive Verhalten nach Aufgabe entwickeln: Navigation, Kategorie, Produktdetail und Warenkorb brauchen jeweils eine passende mobile Anordnung.
- Migrationsqualität ist auch Gestaltungsqualität: Fehlerhafte Zeichen, HTML-Reste und unklare Zuordnungen werden im Frontend unmittelbar sichtbar.
Von der Produktdatenbasis zur zusammenhängenden Shopoberfläche
Bei Philathek entstand das Shopdesign aus dem Zusammenspiel von Datenbereinigung, Informationsarchitektur, responsivem Gantry-Template und individuellen VirtueMart-Ansichten. Die Gestaltung ordnet nicht nur Motive und Farben, sondern macht einen umfangreichen Produktbestand navigierbar und begleitet den gesamten Bestellprozess.
Der vollständige Projektverlauf ist in der Fallstudie Philathek zusammengefasst.