Shopyy-Trikotshop: MMJerseys, Liganavigation und Modellauswahl

Projektübersicht

Für MMJerseys gliederten wir die Shopyy-Seiten nach Ligen und Trikotauswahl. Liga-Navigation, Katalogzugänge und Neuheiten stehen auf unterschiedlichen Ebenen für Besucher, die ein Team suchen oder Modelle erkunden. Weiße Produktraster, rote Navigationsakzente und schwarzer Text verbinden Kollektionen, Vergleiche und Einzelprodukte.

Gestalterische Herausforderung

Liga, Team, Saison und Modell beeinflussen die Auswahl gleichzeitig. Zunächst klärten wir die Kataloghierarchie; Fotos und Optionen unterstützen danach konkrete Entscheidungen. So landen Kategorien und Erklärungen nicht gedrängt auf einer Ebene.

Strategie: Ligakataloge und Trikotauswahl

Liga-Navigation, Katalogzugänge und Neuheiten liegen auf verschiedenen Ebenen für die Team- oder Modellsuche. Die Startseite orientiert, Kategorien ermöglichen Vergleiche und Produktseiten erklären Aussehen und Optionen. Navigation und Inhaltslinks verbinden diese Ebenen.

Arial und Helvetica strukturieren Titel, Navigation und Text; eine schmale Schrift betont das obere Aktionsband. Größe, Gewicht und Absatzbreite schaffen Hierarchie. Weiße Raster, rote Akzente und schwarzer Text setzen sich durch die Hauptseiten fort. Gruppen bleiben kompakt, Abschnitte erhalten mehr Abstand.

Bewegung und Funktionen unterstützen die Auswahl

Katalogmenüs öffnen beim Darüberfahren; Produktbereiche behalten Register und Modellminiaturen. Darunter folgen Größen, Nummern und Zusatzoptionen. Klare Auswahlzustände und Gruppenabstände verbinden Erkunden und Entscheiden, ohne zusätzliche Animationen gegen die Trikotbilder antreten zu lassen.

Startseitenprodukte: Erst Aussehen, dann Modellnamen vergleichen

New Arrivals und World Cup 2026 stehen über dem Raster, das hier Neuheiten zeigt. Jede Karte präsentiert die Vorderseite des Trikots, dann Name, Preis und Zusatzinformationen. Ähnliche Bildmaßstäbe erleichtern Farb- und Mustervergleiche.

Weißer Hintergrund und feiner schwarzer Text lassen Teamfarben wirken. Abstand trennt Register und Produkte; die Karten selbst bleiben kompakt. Besucher können erst eine Reihe überblicken, dann einen Namen lesen.

Ligakatalog: Teamlinks grenzen die Auswahl ein

Bei Premier League stehen Teamnamen als Textlinks über dem Raster. Seitentitel, Unterkategorien sowie Refine und Sort By haben eigene Ebenen und ordnen den umfangreichen Katalog.

Rot bleibt Navigation und Neuheitenmarkierungen vorbehalten; Produkte stehen auf hellem Grund. Große Fotos und gleich breite Karten unterstützen Vergleiche. Details bleiben auf Produktseiten, statt Listen durch zu viel Text zu verlängern.

Produktdetails: Foto neben Auswahlinformationen

Das große Trikotfoto steht links; rechts folgen Name, Preis, Aktion und Similar-Style-Verweise. Das blau-rot gestreifte Trikot dominiert, Miniaturen zeigen weitere Blickwinkel.

Kurze Textblöcke und Gruppenabstände ordnen die rechte Spalte; ein gelbes Aktionsband setzt einen Akzent. Definierte Bild- und Textbreiten erlauben das Prüfen des Aussehens während der weiteren Auswahl.

Optionen: Modelle und Personalisierung gruppieren

Foto und Miniaturen bleiben links. Rechts zeigen dichte, aber ausgerichtete Vorschaubilder verwandte Modelle, danach Größen und Personalisierung. Entscheidungen folgen aufeinander statt in einem langen Dropdown zusammenzufallen.

Kleine Bilder haben gleichmäßige Abstände, helle Rahmen und Freiraum gruppieren Textoptionen. Das Raster ordnet viele Modelle; Größe und Nummer bleiben nah an den Produktinformationen und vermeiden Suchen zwischen Bereichen.

Markenseite: Geschäftshintergrund in kurzen Absätzen

Ein zentrierter Titel und kurze Absätze stellen das Geschäft vor. Shop-Kopf und Footer bleiben erhalten. Die Seite ergänzt Hintergrund; anschließend führt die Navigation zurück zum Katalog.

Klare serifenlose Schrift, großzügige Zeilenabstände und Absatzpausen erleichtern das Lesen. Schwarz auf Weiß bleibt ohne zusätzliche Produktbanner und erzeugt einen anderen Rhythmus als Auswahlseiten.

Kontakt: Ein klarer Platz für Nachrichten

Kontaktinformationen stehen oben; eine blaue runde Nachrichtengrafik hebt den nächsten Schritt hervor. E-Mail, Hinweise und Zugang sind gruppiert, damit Besucher die Kanäle verstehen und dann ihre Kontaktform wählen.

Die weiße Inhaltsfläche bleibt schlicht. Der blaue Zugang unterscheidet sich von der roten Shop-Navigation. Die Seite führt zur Kommunikation; Produktkataloge und Preise bleiben auf ihren Seiten.

Mobile Startseite: Banner und zweispaltige Produkte

Auf schmalen Bildschirmen bleiben Aktionsband, Trikotbanner und Neuheiten erhalten; das Raster passt sich an. Das Banner setzt das Thema, die Liste führt direkt zu Modellen.

Titel und Produktnamen umbrechen entsprechend der Kartenbreite, Bilder bleiben groß genug. Vertikale Abstände trennen Banner, Register und Produkte bei unveränderter Inhaltsfolge.

Mobile Produktseite: Das große Bild zeigt das Modell

Mobil erscheinen zuerst Trikotfoto und Ansichtsminiaturen, dann Name, Preis und Aktion. Aus zwei Spalten wird eine vertikale Folge mit genügend Breite pro Gruppe.

Das Trikot bleibt prominent; linksbündiger Text und kontrollierte Abstände ordnen die Angaben. Modelle und Spezifikationen folgen weiter unten und verbinden Bilder, Namen und Auswahl.

Gestaltungsfazit: Thema und praktische Details verbinden

Bei MMJerseys führen Ligen und Trikotauswahl durch weiße Raster, rote Akzente und schwarzen Text auf Start-, Kategorie- und Produktseiten. Bilder vermitteln das Thema, Texte erklären Details und Katalog und Optionen ermöglichen den nächsten Schritt. Mobil bleibt die Folge für ein stimmiges visuelles und funktionales Erlebnis erhalten.

Planen Sie eine klare Shopyy-Website für Ihre Marke

Teilen Sie Ihre bestehende Website, Markenmaterialien und benötigten Seiten. Gemeinsam prüfen wir Produkte, Zielmarkt und Inhaltsprioritäten und planen passende Seiten, Gestaltung und Funktionen.