Kollektion

Erstellen Sie ein anpassbares Kollektionsraster mit Filtern, Sortierung, Kartenstil und Werbebannern im Raster.

Ausgewählte Links

Hilfreiche Videos

Video der Shopify Academy: Ihren Shop anpassen

Shopify-Video: So optimieren Sie Ihren Store für höhere Conversions

Verwenden Sie diesen Abschnitt, um die aktuelle Kollektion in ein flexibles Produktgitter mit Browsing-Steuerelementen, Anzeigeoptionen für Karten und optionalen Werbebannern innerhalb des Rasters zu verwandeln. Er eignet sich besonders für Kollektionsseiten, auf denen Kundinnen und Kunden Produkte schnell überblicken, Ergebnisse verfeinern und hervorgehobene Inhalte sehen sollen, ohne die Auflistung zu verlassen.

Grundeinstellungen

Dieser Abschnitt zieht immer Daten aus der aktiven Kollektion. Ihre erste wichtige Entscheidung ist, wie mit nicht verfügbaren Produkten verfahren werden soll, da sich dies sowohl auf die Übersichtlichkeit des Browsings als auch auf die Sichtbarkeit der Produkte auswirkt.

Das Ausblenden nicht verfügbarer Produkte hält das Raster auf das fokussiert, was jetzt gekauft werden kann. Sie an das Ende zu verschieben ist oft die bessere Wahl, wenn Nachlieferungen häufig vorkommen oder wenn Kundinnen und Kunden dennoch das gesamte Sortiment entdecken sollen.

Wenn Kundinnen und Kunden regelmäßig auf Nachlieferungen warten, funktioniert es in der Regel besser, nicht verfügbare Produkte am Ende anzuzeigen, statt sie vollständig auszublenden.

Einstellungen der Rasteroberfläche

Diese Einstellungen steuern das Standard-Layout des Desktop- und Mobil-Rasters sowie, ob Kundinnen und Kunden das Raster selbst anpassen können. Mehr dazu in den Einstellungen der Rasteroberfläche.

Wählen Sie die Standardanzahl der Spalten basierend darauf, wie viel visueller Platz jedes Produkt benötigt. Größere Karten eignen sich besser für bildstarke Produkte, während dichtere Raster großen Katalogen helfen, sich schneller durchsuchen zu lassen.

Durch das Aktivieren der Oberfläche für die Rastergröße erhalten Käuferinnen und Käufer mehr Kontrolle darüber, wie sie browsen. Die festgeklebte Oberfläche hält diese Steuerelemente beim Scrollen sichtbar, was besonders auf langen Kollektionsseiten nützlich ist. Einen breiteren Überblick über das Abschnittsverhalten im Editor finden Sie in der Shopify-Dokumentation zum Anpassen von Abschnitten

Filtereinstellungen

Diese Einstellungen fügen Filter- und Sortiersteuerungen hinzu, damit Kundinnen und Kunden Ergebnisse eingrenzen und neu anordnen können. Filter benötigen eine zusätzliche Einrichtung, bevor sie nützlich werden, und der Leitfaden zur Filtereinrichtung des Themes ist verfügbar.

Aktivieren Sie Filter, wenn eine Kollektion so umfangreich ist, dass Kundinnen und Kunden vom Eingrenzen nach gemeinsamen Attributen profitieren. Bei kleineren oder stark kuratierten Kollektionen können Filter mehr Oberfläche als Nutzen hinzufügen.

Der Verfügbarkeitsfilter funktioniert am besten, wenn der Lagerstatus für das Einkaufsverhalten relevant ist. Sortierung ist für die meisten Kollektionen eine starke Standardeinstellung, aber Filter standardmäßig geöffnet zu lassen, ist am hilfreichsten, wenn die Verfeinerung sofort genutzt werden soll.

Farbeinstellungen

Diese Abschnitts-spezifischen Farbüberschreibungen gelten für den eigenen Header-Inhalt des Abschnitts, etwa Symbol, Text und Unterüberschrift. Verwenden Sie sie, wenn diese Kollektionsseite ein eigenes Erscheinungsbild benötigt, ohne die breiteren Theme-Farben zu ändern.

Halten Sie Überschreibungen bewusst und gut lesbar. Wenn Sie außerdem einen benutzerdefinierten Abschnittshintergrund verwenden, prüfen Sie den Kontrast sorgfältig, damit der Header-Inhalt klar bleibt.

Unterstützte Blocktypen

Kollektionsbanner

Kollektionsbanner

Verwenden Sie Kollektionsbanner-Blöcke, um Werbeinhalte direkt im Produktgitter zu platzieren. Mehr zum Kollektionsbanner-Block erfahren Sie hier.

Dieser Block eignet sich gut für Einführungen, saisonale Kampagnen, kuratierte Bearbeitungen oder kollektionsspezifische Nachrichten. Sie können bis zu zwei Banner hinzufügen, aber es wird nur ein Banner jeder Größe angezeigt.

Die Sichtbarkeit des Banners hängt von der Größe der Kollektion ab. Ein großes Banner benötigt mindestens 6 Produkte, und ein kleines Banner benötigt mindestens 11 Produkte.

Wenn die Kollektion zu klein für die ausgewählte Bannergröße ist, wird das Banner nicht angezeigt.

Verwenden Sie Hintergrundbild oder Video mit Bedacht, damit die Werbebotschaft lesbar bleibt. Separate Mobilmedien sind hilfreich, wenn Desktop-Zuschnitte auf kleineren Bildschirmen nicht gut funktionieren.

Der Vordergrundinhalt kann Text, Schaltflächen, Symbole und unterstützende Medien wie ein Logo oder ein Werbebild enthalten. Wenn Sie einen Linkstil für den gesamten Block wählen, werden Links innerhalb des Unterüberschrift-Texts entfernt.

Der Block enthält außerdem eine eigene Sichtbarkeitssteuerung, die nützlich ist, wenn Sie möchten, dass ein Banner nur auf dem Desktop oder nur auf Mobilgeräten angezeigt wird.

Standard-Abschnittseinstellungen

Header-Einstellungen

Verwenden Sie die gemeinsame Referenz für Header-Einstellungen. In diesem Abschnitt stellt der Header die Kollektion mit optionalem Symbol, Beschriftung, Überschrift, unterstützendem Text und Schaltflächeninhalt vor.

Dies ist ein guter Ort, um Kontext hinzuzufügen, wenn der Kollektionstitel allein zu kurz ist. Eine Schaltfläche eignet sich am besten als sekundäre Aktion, etwa als Verweis auf eine verwandte Kollektion oder einen hilfreichen Einkaufsleitfaden.

Karten-Einstellungen

Verwenden Sie die gemeinsame Referenz für Karten-Einstellungen. Diese Einstellungen überschreiben die Standarddarstellung der Produktkarte für diesen Abschnitt, einschließlich Stil, Bildverhältnis, Textdichte, CTA-Stil, Ausrichtung und Variantendarstellung.

Nutzen Sie diese Überschreibungen, um sie an das Einkaufsverhalten der Kollektion anzupassen. Visuelle Kategorien profitieren oft von stärkeren Bildern und weniger Text, während technische oder stark vergleichende Kategorien in der Regel klarere Titel, Auszüge und Variantensignale benötigen.

Einige Einstellungen sind bei bestimmten Kartenstilen wichtiger. So gilt die mittlere vertikale Ausrichtung nur vollständig für das Kartenlayout im Banner-Stil, und Variantenauswahlen funktionieren am besten, wenn die Produktoptionsdaten bereits konsistent sind.

Padding-Einstellungen

Verwenden Sie die gemeinsame Referenz für Padding-Einstellungen. Diese Steuerelemente passen den Abstand oberhalb und unterhalb des Kollektion-Abschnitts an.

Engerer Abstand hilft produktlastigen Seiten, effizient zu wirken. Großzügigere Abstände funktionieren gut, wenn der Header des Abschnitts oder die Hintergrundgestaltung Teil der visuellen Geschichte ist.

Abschnittshintergrund-Einstellungen

Verwenden Sie die gemeinsame Referenz für Abschnittshintergrund-Einstellungen. Diese Einstellungen ermöglichen es Ihnen, eine Farbe, einen Farbverlauf, ein Bild oder ein Video hinter dem Abschnitt hinzuzufügen.

Hintergrundgestaltungen können eine Kollektion editorialer oder kampagnenorientierter wirken lassen, besonders in Kombination mit benutzerdefinierten Header- oder Kartenfarben. Da sie das visuelle Gewicht der Seite verändern können, sollten Sie sie vor der Veröffentlichung in verschiedenen Bildschirmgrößen prüfen.

Trennlinien-Einstellungen

Verwenden Sie die gemeinsame Referenz für Trennlinien-Einstellungen. Obere und untere Trennlinien helfen dabei, den Abschnitt zu definieren, wenn er zwischen ähnlichen Inhaltsbereichen steht.

Eine dezente Trennlinie reicht in der Regel aus. Verwenden Sie stärkere Linienstile nur dann, wenn die Seite klarere visuelle Grenzen benötigt.

Breiten-Einstellungen

Verwenden Sie die gemeinsame Referenz für Breiten-Einstellungen. Diese Einstellungen steuern die maximale Inhaltsbreite und die Außenbreite des Abschnitts.

Breitere Layouts können mehr Produkte pro Zeile anzeigen und das Scrollen verringern. Schmalere Layouts können kuratierter wirken und den Header-Inhalt leichter lesbar machen, besonders wenn Hintergründe oder Werbegestaltungen wichtig sind.

Der Editor bildet Breitenänderungen möglicherweise nicht vollständig ab. Prüfen Sie daher die tatsächliche Seite, bevor Sie Layouts mit voller Breite oder Full-bleed abschließen.

Nutzungshinweise

Passen Sie die Rasternach Dichte an die Produkte an. Verwenden Sie weniger Spalten für bildstarke Produkte und dichtere Raster für große Kataloge, bei denen schnelles Überfliegen wichtig ist.
Schalten Sie Filter nur ein, wenn sie helfen. Filtern bietet den größten Nutzen bei breiten Kollektionen mit aussagekräftigen gemeinsamen Attributen.
Nutzen Sie Karten-Überschreibungen strategisch. Passen Sie Bildverhältnis, Text und CTA-Stil an, um zu unterstützen, wie Kundinnen und Kunden Produkte in dieser Kollektion vergleichen.
Prüfen Sie die Banneranforderungen vor der Veröffentlichung. Stellen Sie sicher, dass die Kollektion genug Produkte für die ausgewählte Bannergröße hat, damit Werbeblöcke tatsächlich erscheinen.
Prüfen Sie Desktop und Mobilgeräte getrennt. Rasternach Dichte, Medienzuschnitte und Banner-Sichtbarkeit können sich je nach Viewport unterscheiden. Bestätigen Sie daher beide Layouts vor der Veröffentlichung.
Halten Sie Farben und Hintergründe lesbar. Standardmäßige Werte erhalten den Grundlook, während stärkere Überschreibungen den Abschnitt eigenständiger machen und immer auf Kontrast geprüft werden sollten.
Sehen Sie sich das Live-Layout in der Vorschau an. Breitenänderungen, festgeklebte Steuerelemente und Hintergrundmedien wirken auf der tatsächlichen Seite oft anders als im Editor.

Align v2.0