Eine Collection Page sollte Kunden helfen, ein Sortiment einzugrenzen und die verbleibenden Produkte zu vergleichen. Diese Beispiele umfassen kleine visuelle Kataloge und größere Sortimente mit technischen Filtern. Wähle Controls, die sich an den Unterschieden orientieren, die Shopper verstehen müssen.
FINEX trennt weiße Product Cards von einem dunklen, texturierten Hintergrund, mit Kategorie-Links oben und Handwerks-Content unten. Die Silhouetten des Kochgeschirrs bleiben leicht erkennbar. Ein kleines, verwandtes Sortiment lässt sich im Grid ohne aufwendiges Filtern vergleichen.
Für deinen Shop
Mach die Produkte leicht vergleichbar, auch wenn die Seite eine starke visuelle Identität hat.
Jinx kombiniert visuelle Shortcuts mit Kategorie-, Protein- und Lebensphasen-Filtern. Product Cards sitzen unter gut lesbaren Kategorie-Überschriften. Die Controls und Überschriften nutzen dieselbe Struktur und helfen Kunden, das Tiernahrungs-Sortiment anhand konkreter Produktunterschiede einzugrenzen.
Für deinen Shop
Wähle Filter anhand der Unterscheidungsmerkmale, die Kunden für ihre Entscheidung nutzen.
Ritual platziert Kategorie-Pills nach dem Collection-Titel und der Beschreibung. Eine Promo-Kachel taucht zwischen den Product Cards auf, und breitere Kategorie-Links sitzen weiter unten. Die Promo braucht eine klare visuelle Abgrenzung, damit Shopper sie von den Artikeln unterscheiden können, die sie gerade vergleichen.
Für deinen Shop
Trenne Navigation, Produktvergleich und Promos innerhalb des Grids.
GSI Outdoors platziert eine Desktop-Filter-Sidebar neben vier Produktspalten. Quadratische Fotos, prominente Titel, Preise und einheitliche Buttons wiederholen sich auf den Cards. Übereinstimmende Informationen und Abstände machen das kompakte Grid leichter scannbar.
Für deinen Shop
Standardisiere die Informationen und Abstände, die Shopper über die Cards hinweg vergleichen.
Unit Editions präsentiert seine Bücher unter einem kurzen Collection-Titel mit wenig konkurrierendem Interface. Die Cover liefern die meiste Farbe und visuelle Information. Das Sortiment kann direkt gescannt werden; ein größerer oder schwerer unterscheidbarer Katalog bräuchte eventuell zusätzliche Controls.
Für deinen Shop
Nutze die einfachste Struktur, die das Sortiment verständlich macht.
Café du Cycliste behält angewendete Filter-Pills neben 'Filter & Sort' über seinem Kleidungs-Grid. Der Drawer enthält Optionen für Größe, Typ und Fahrstil. Sichtbare Auswahlen erklären, warum die aktuellen Ergebnisse nur einen Teil des Sortiments zeigen.
Für deinen Shop
Zeige aktive Filter neben den Ergebnissen, wenn der Filter-Drawer geschlossen ist.
CW&T trennt ein eng angeordnetes Bilder-Grid mit dünnen Linien unter einer schwarzen Titelleiste. Kompakte Badges liefern Produktinformationen. Einheitliche Zuschnitte und gut lesbare Labels halten die einzelnen Objekte innerhalb des reduzierten Layouts identifizierbar.
Für deinen Shop
Nutze einheitliche Bildausschnitte und klare Labels, um ein reduziertes Interface zu unterstützen.
Intelligentsia platziert Filterung und Sortierung über dem Grid, was sich auf Mobile in einen Filters-Button und einen Sortierungs-Selector ändert. Der aufgezeichnete Besuch enthielt auch Promo-Overlays. Prüfe, ob Erstbesucher die Controls ohne mehrere Unterbrechungen erreichen können.
Für deinen Shop
Platziere Filter in der Nähe des Grids und prüfe, ob Promo-Overlays den Zugriff blockieren.
Heart Coffee Roasters gibt seiner Bohnen-Kollektion einen zurückhaltenden Titel, sticky Präsentations-Controls und Product Cards auf pastellfarbenen oder neutralen Hintergründen. Die Toolbar bleibt verfügbar, während die Fotos und Namen die meiste Arbeit leisten, um die Kaffeesorten zu unterscheiden.
Für deinen Shop
Passe die Komplexität der Controls an die Komplexität des Sortiments an.
Helinox bietet Filter für Sitztyp, Packgewicht, Gewichtslimit, Modell und Farbe. Cards zeigen Swatches und Verfügbarkeit. Diese Attribute lassen Besucher praktische Grenzen prüfen, während sie das Aussehen vergleichen, besonders wenn ein Stuhl zu einem bestimmten Trip oder Tragelimit passen muss.
Für deinen Shop
Biete Filter für die Maße und Limits an, die beeinflussen, wie das Produkt genutzt werden kann.
TRNK öffnet eine Desktop-Sidebar aus einer kompakten Toolbar und passt das Möbel-Grid daneben an. Besucher können von der Kategorie-Einleitung in die detaillierte Filterung wechseln. Klare Labels und ein umkehrbarer Layout-Wechsel helfen, die Übersicht zu behalten.
Für deinen Shop
Halte das Produkt-Grid lesbar, wenn sich Filter öffnen, und mach die Sidebar leicht zu schließen.
Smith Teamaker lässt auf das Kategoriefoto eine persistente Toolbar folgen. Editorial-Kacheln tauchen zwischen den Produkten auf, und 'Load More' erweitert die Liste. Kunden können eine lange Auswahl verfeinern, ohne nach oben zurückzukehren, vorausgesetzt, der zusätzliche Content bleibt von den Tee-Cards unterscheidbar.
Für deinen Shop
Halte nützliche Controls in Reichweite, ohne dass sie den Katalog dominieren.
Borough Kitchen stellt das Kochgeschirr kurz vor, mit einem Link zu ausführlicheren Kaufberatungen unter den Produkten. Filter, Sortierung und Produktanzahl bleiben in der Nähe des Grids. 'Load More' zeigt Fortschritt an, sodass kaufbereite Kunden stöbern können, bevor sie den detaillierten Guide lesen.
Für deinen Shop
Biete detaillierte Kaufberatung, ohne den Zugang zu den Produkten zu verzögern.
Momentous bietet auf dem Desktop Kategorie- und Ziel-Navigation, wo nötig mit verschachtelten Optionen. Auf Mobile liegt die Verfeinerung hinter 'Sort & Filters'. Die beiden Routen brauchen klare, verständliche Auswahlen, damit ein Besucher entweder mit Produktwissen oder einem Ziel beginnen kann.
Für deinen Shop
Nutze parallele Browsing-Routen nur, wenn sie unterschiedliche Kundenfragen beantworten.
Athletic Brewing gruppiert Verfügbarkeit, Bierstil, Geschmack, Saison und Größe in einem mobilen 'Filter and Sort'-Drawer. Die Produktanzahl steht ganz oben, Sortierung und 'Apply' darunter. Klare Reset- und Zurück-Controls sind wichtig, wenn man ein dichtes Sortiment auf einem kleinen Bildschirm verfeinert.
Für deinen Shop
Gruppiere Mobile-Filter übersichtlich und mach das Anwenden oder Löschen unkompliziert.
Eine Kategorie fasst Produkte zusammen, damit Kunden sich ein Sortiment ansehen können, bevor sie eine einzelne Produktseite öffnen. In Shopify kannst du Produkte manuell hinzufügen oder passende Produkte durch Bedingungen automatisch aufnehmen lassen. Die Zugehörigkeit zur Kategorie und das Seitenlayout sind zwei separate Dinge. Die Shopify-Dokumentation zu Kategorien erklärt dir die Einrichtung.
Organisiere das Sortiment danach, wie deine Kunden auswählen. Jinx nutzt Proteinquellen und Lebensphasen, während Momentous Routen nach Kategorie und Zielen anbietet. Eine nützliche Kategorie hat einen erkennbaren Zweck. Wenn zwei Gruppen fast dieselben Produkte enthalten, gib den Käufern einen klaren Grund, sich für eine davon zu entscheiden, anstatt sie bei ähnlichen Namen raten zu lassen.
Der beste Filter für eine Kategorie kann für eine andere völlig irrelevant sein. Bei Helinox können Käufer Stühle nach physischen Eigenschaften eingrenzen; Intelligentsia platziert Kaffee-Filter über seinem Sortiment. Beginne mit den Eigenschaften, die Kunden nutzen, um Produkte ein- oder auszuschließen, und zeige dann dieselben Begriffe auf den Produktkarten, damit Vergleiche verständlich bleiben.
Auf Mobilgeräten solltest du angewandte Filter sichtbar machen, nachdem sich der Drawer schließt, so wie es Café du Cycliste macht. Prüfe, was bei null Treffern, mehreren aktiven Filtern und bei der Rückkehr von einer Produktseite passiert. Ein kleines Sortiment benötigt vielleicht nur eine sinnvolle Sortierung und einheitliche Produktkarten. Für größere Kataloge zeigen die Filter-Beispiele Wege auf, wie man das Eingrenzen und Zurücksetzen einer Auswahl klarer gestalten kann.
Wenn das Sortiment schwer zu überblicken ist und seine Eigenschaften sinnvolle Möglichkeiten zur Eingrenzung bieten. Eine kleine Kategorie benötigt oft nur übersichtliche Karten und eine nützliche Sortierung.
Eine kurze Einleitung kann über den Produkten stehen. Platziere längere Erklärungen unter dem Grid oder hinter einem klaren Link, damit Kunden selbst entscheiden können, wann sie diese lesen möchten.
Beides kann funktionieren. Prüfe die Tastaturbedienbarkeit, Fortschrittsanzeigen, den Zugang zum Footer und ob die Position des Käufers beim Zurückkehren von einem Produkt erhalten bleibt.
Wähle eine Gruppierung, die Kunden erkennen, und ordne die Produkte dann nach dem Zweck dieser Kategorie. Halte wichtige Fakten für den Vergleich auf den Karten einheitlich. Filter sollten nach bedeutsamen Unterschieden wie Größe, Kompatibilität oder Verwendungszweck eingrenzen.
Du kannst Produkte manuell hinzufügen oder sie über Bedingungen einschließen. Eine Kategorie kann auch Produkte aus anderen Kategorien oder App-Quellen enthalten. Diese Entscheidungen steuern die Zugehörigkeit; dein Theme-Template steuert, wie Kunden das Sortiment sehen und durchstöbern.
Gib Fudge ein Ziel und eine Referenz. Das Tool schlägt Änderungen für deinen Shop vor, erstellt einen Entwurf in deinem Shopify-Theme und gibt dir Rückmeldung. Du überprüfst jede Änderung, bevor sie live geht.
Sieh dir an, wie der Shop-Editor funktioniert