Kollektionsliste - Main

Ausgewählte Links

1. Shopify-Dokumentation zu Vorlagen
2. Shopify-Dokumentation zu Abschnitten und Blöcken
3. Company XYZ-Dokumentation zu Header-Einstellungen
4. Company XYZ-Dokumentation zu Karten-Einstellungen
5. Company XYZ-Dokumentation zu Abschnitts-Innenabstand-Einstellungen
6. Company XYZ-Dokumentation zu Abschnittshintergrund-Einstellungen
7. Company XYZ-Dokumentation zu Trennlinien-Einstellungen
8. Company XYZ-Dokumentation zu Breiten-Einstellungen für Layouts

Hilfreiche Videos

Video der Shopify Academy: Ihren Shop anpassen

Video der Shopify Academy: Ihren Shop anpassen

Zeigen Sie jede verfügbare Kollektion in einem einzigen durchsuchbaren Layout an und gestalten Sie die Seite anschließend mit Kartenstil, Farb-Overrides sowie Abstands- und Breiten-Steuerelementen. Dieser Abschnitt eignet sich am besten, wenn Sie eine vollständige Landingpage für Kollektionen statt einer handverlesenen Auswahl hervorgehobener Kollektionen möchten. Einen allgemeineren Überblick über die Seitenstruktur finden Sie in der Shopify-Dokumentation zu Vorlagen

So funktioniert dieser Abschnitt

Dieser Abschnitt gibt die vollständige Kollektionsliste für die Seitenvorlage aus, die er unterstützt. Sie wählen hier keine einzelnen Kollektionen aus, daher hängt das Endergebnis stark davon ab, wie konsistent Ihre Kollektionstitel, Bilder und Beschreibungen sind. Details dazu, wie Theme-Abschnitte angeordnet sind, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken

Da alle Kollektionen automatisch angezeigt werden, fallen schwache oder inkonsistente Kollektionsbilder und -beschreibungen hier deutlich stärker auf als in kleineren Abschnitten mit hervorgehobenen Kollektionen.

Karten-Farbeinstellungen

Mit diesen Einstellungen können Sie die Standard-Kartenfarben nur für diesen Abschnitt überschreiben. Sie sind nützlich, wenn sich die Kollektionsseite optisch abheben soll, ohne Kollektionskarten im Rest der Website zu ändern.

Banner-Overlay-Steuerelemente sind nur relevant, wenn Sie den Kartenstil Banner verwenden. Nutzen Sie sie, um die Lesbarkeit von Text über Bildern zu verbessern, halten Sie das Overlay jedoch leicht genug, damit Kundinnen und Kunden weiterhin eine Kollektion klar von einer anderen unterscheiden können.

Bei Stilen ohne Banner helfen Ihnen die Farben für Hintergrund, Rahmen, Überschrift und Text dabei, Kontrast und visuelles Gewicht abzustimmen. Wenn Sie auch Kollektionsauszüge anzeigen, prüfen Sie, dass der Text sowohl vor dem Kartenhintergrund als auch vor dem umgebenden Abschnittshintergrund gut lesbar bleibt.

Farbeinstellungen

Diese Einstellungen steuern die Farben, die im Intro-Inhalt des Abschnitts verwendet werden, einschließlich Symbol, Haupttext und Unterüberschrift. Sie sind besonders nützlich, wenn Ihre Kollektionsseite einen benutzerdefinierten Abschnittshintergrund verwendet oder stärkeren Kontrast benötigt, als Ihre Standard-Textgestaltung bietet.

Versuchen Sie, die Gestaltung des Intros visuell mit der Kartenbehandlung darunter zu verbinden. Wenn der Überschriftsbereich deutlich auffälliger oder dekorativer wirkt als das Kollektionsraster, kann die Seite unausgewogen wirken.

Standard-Abschnittseinstellungen

Header-Einstellungen

Verwenden Sie die gemeinsamen Header-Einstellungen, um die Kollektionsseite mit einem optionalen Symbol, einer Beschriftung, einer Überschrift, unterstützendem Text und einer Schaltfläche einzuleiten. In diesem Abschnitt funktioniert eine kurze, klare Einführung in der Regel am besten, da Kundinnen und Kunden normalerweise schnell mit dem Browsen beginnen möchten.

Die optionale Schaltfläche ist am nützlichsten als sekundäre Aktion, etwa als Link zu einer saisonalen Kampagne oder einem Einkaufsratgeber. Wenn Sie eine reine Symbol-Schaltfläche verwenden, stellen Sie sicher, dass das Symbol die Aktion klar vermittelt, besonders auf Mobilgeräten.

Karten-Einstellungen

Verwenden Sie die gemeinsamen Karten-Einstellungen, um zu steuern, wie jede Kollektion in der Liste erscheint. In diesem Abschnitt leisten Kartenstil, Bildverhältnis, Textsichtbarkeit, Ausrichtung und die Behandlung der Karten-Schaltfläche den größten Beitrag dazu, wie schnell Kundinnen und Kunden die Seite erfassen können.

Karten im Banner-Stil sorgen für einen stärker bildgeführten Look, während einfachere Stile mit Innenabstand oder ohne Bild oft besser sind, wenn die Kollektionsbilder inkonsistent sind. Ein festes Bildverhältnis lässt das Raster in der Regel geordneter wirken, kann Bilder aber so zuschneiden, dass wichtige Blickfänge verborgen werden.

Tipp

Wenn die Seite zu unruhig wirkt, vereinfachen Sie zuerst die Karten. Weniger Kartentext oder ausgeblendete Karten-Schaltflächen verbessern die schnelle Erfassbarkeit oft schneller als Änderungen an Abstand oder Breite.

Padding-Einstellungen

Verwenden Sie die gemeinsamen Padding-Einstellungen, um den Abstand über und unter dem Abschnitt zu steuern. Auf einer Kollektionsseite hilft Padding dabei, das Intro von benachbarten Inhalten zu trennen, ohne das Raster isoliert wirken zu lassen.

Abschnittshintergrund-Einstellungen

Verwenden Sie die gemeinsamen Abschnittshintergrund-Einstellungen, um hinter dem Abschnitt eine Farbe, einen Verlauf, ein Bild oder ein Video hinzuzufügen. Dadurch kann ein stärkerer markengerechter Rahmen für die Kollektionsseite entstehen, besonders wenn das umgebende Layout ansonsten minimal ist.

Hintergründe erfordern in bildlastigen Kollektionsrastern besondere Sorgfalt. Wenn die Karten bereits auf starke Bildsprache setzen, halten Sie den Abschnittshintergrund dezent, damit die Seite nicht überladen wirkt.

Trennlinien-Einstellungen

Verwenden Sie die gemeinsamen Trennlinien-Einstellungen, um oberhalb oder unterhalb des Abschnitts eine Linie hinzuzufügen. Sie funktionieren gut, wenn Sie eine klarere visuelle Abgrenzung möchten, ohne sich nur auf zusätzlichen Abstand zu verlassen.

Breiten-Einstellungen

Verwenden Sie die gemeinsamen Breiten-Einstellungen, um die Inhaltsbreite und die äußere Abschnittsbreite zu steuern. Breitere Einstellungen können große Kollektionsraster effizienter durchsuchbar machen, während schmalere Einstellungen die Seite kuratierter und leichter lesbar wirken lassen können, wenn Sie ein stärkeres Intro verwenden.

Breitenentscheidungen fallen stärker auf, wenn Sie zusätzlich einen Hintergrund, ein Bild oder ein Video verwenden. Es lohnt sich, diese Änderungen in der Live-Seitenansicht in der Vorschau zu prüfen, da die Rahmung im Editor Breitenunterschiede schwerer genau beurteilen lassen kann.

Nutzungshinweise

1. Halten Sie den Kollektionsinhalt konsistent. Dieser Abschnitt sieht am besten aus, wenn Kollektionstitel, Bilder und Beschreibungen einer ähnlichen Qualität und einem ähnlichen Stil folgen.
2. Wählen Sie Kartenstile basierend auf der Bildstärke. Verwenden Sie Banner- oder bildgeführte Layouts nur dann, wenn Ihre Kollektionsbilder klar, gut erkennbar und konsistent zugeschnitten sind.
3. Halten Sie das Intro kurz. Eine prägnante Überschrift und kurzer unterstützender Text helfen Kundinnen und Kunden auf einer zuerst zum Browsen gedachten Seite in der Regel mehr als eine lange Erklärung.
4. Prüfen Sie das mobile Layout sorgfältig. Kontrollieren Sie Platzierung von Schaltflächen, Bildverhältnisse und Textlänge auf kleineren Bildschirmen, damit das Kollektionsraster leicht zu erfassen bleibt.
5. Testen Sie den Kontrast mit echten Inhalten. Wenn Sie Overlays, benutzerdefinierte Kartenfarben oder Abschnittshintergründe verwenden, stellen Sie sicher, dass Text über verschiedene Kollektionsbilder hinweg lesbar bleibt.
6. Vergleichen Sie beide Viewports. Desktop- und Mobil-Steuerelemente können sich unterschiedlich verhalten, prüfen Sie daher jede Bildschirmgröße in der Vorschau, bevor Sie veröffentlichen.
7. Setzen Sie explizite Overrides gezielt ein. Leere oder standardartige Werte behalten in der Regel das Fallback-Styling bei, während benutzerdefinierte Farben, Verläufe oder separate Medienauswahlen diesen Abschnitt unabhängiger vom Rest der Seite machen.