Kollektionliste

Ausgewählte Links

1. Shopify-Dokumentation zu Abschnitten und Blöcken
2. Company XYZ-Dokumentation zu Layout-Einstellungen
3. Company XYZ-Dokumentation zu Diashow-Steuerungseinstellungen
4. Company XYZ-Dokumentation zu Header-Einstellungen
5. Company XYZ-Dokumentation zu Karten-Einstellungen
6. Company XYZ-Dokumentation zu Abschnitts-Innenabstand-Einstellungen
7. Company XYZ-Dokumentation zu Abschnittshintergrund-Einstellungen
8. Shopify-Dokumentation zum Anpassen von Abschnitten
9. Company XYZ-Dokumentation zu Trennlinien-Einstellungen
10. Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen
11. 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

Verwenden Sie diesen Abschnitt, um ausgewählte Kollektionen als visuelle Karten zu präsentieren, die Kundinnen und Kunden beim Browsen nach Kategorien helfen. Er eignet sich besonders gut für Startseiten, Landingpages und Kampagnenseiten, auf denen Sie Menschen zum richtigen Bereich Ihres Katalogs führen möchten.

Grundeinstellungen

Beginnen Sie, indem Sie die Kollektionen auswählen, die Sie anzeigen möchten. Dieser Abschnitt eignet sich besser für die Entdeckung von Kollektionen und das Browsen nach Kategorien als für die Hervorhebung einzeln ausgewählter Produkte. Einen umfassenderen Überblick darüber, wie Abschnitte im Editor funktionieren, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken

Layout-Einstellungen

Verwenden Sie die Layout-Steuerelemente, um auszuwählen, wie viele Kollektion-Karten auf Desktop, Tablet und Mobilgerät angezeigt werden und ob jedes Gerät ein Raster oder eine Diashow verwendet. Siehe Layout-Einstellungen.

Die Tablet-Spalteneinstellung kann die Desktop-Spaltenanzahl übernehmen, wenn sie bei 0 bleibt, was nützlich ist, wenn Sie weniger gerätespezifische Anpassungen wünschen. Wenn Ihr Desktop-Layout auf mittelgroßen Bildschirmen zu dicht wirkt, legen Sie einen Tablet-Wert explizit fest, statt sich auf das übernommene Layout zu verlassen.

Ein Layout, das auf dem Desktop ausgewogen wirkt, kann auf kleineren Bildschirmen beengt erscheinen. Oft ist es besser, Spalten zu reduzieren oder Mobilgeräte für leichteres Browsen auf eine Diashow umzustellen.

Diashow-Einstellungen

Wenn ein Gerät das Diashow-Layout verwendet, steuern diese Einstellungen, wie sich der Abschnitt bewegt und wie Kundinnen und Kunden zwischen den Kollektion-Karten navigieren. Siehe Diashow-Steuerelemente.

Die Überblendungsanimation sorgt für eine einfachere, fokussiertere Darstellung, begrenzt das Layout jedoch auch auf jeweils einen sichtbaren Slide und zeigt keine Seitennavigation an. Verwenden Sie sie, wenn Sie einen klareren Werbeeffekt wünschen, nicht wenn das schnelle Durchsehen mehrerer Kollektionen wichtiger ist.

Autoplay kann Bewegung hinzufügen, sollte aber unterstützend und nicht ablenkend wirken. Das Pausieren bei Hover ist besonders auf dem Desktop nützlich, damit Kundinnen und Kunden die Bewegung anhalten können, während sie entscheiden, worauf sie klicken möchten.

Die Vorschau des nächsten Slides kann den Abschnitt interaktiver wirken lassen, besonders auf Touch-Geräten. Wenn Sie ein aufgeräumteres, kompakteres Layout wünschen, deaktivieren Sie diese Vorschau.

Karten-Farbeinstellungen

Verwenden Sie diese Einstellungen, um die Kartenfarben zu überschreiben, die im Theme andernorts verwendet werden, und zwar nur für diesen Abschnitt. Das ist hilfreich, wenn die Kollektionliste einen stärkeren Werbecharakter braucht oder wenn der umgebende Abschnittshintergrund einen anderen Kartenkontrast erfordert.

Die Steuerungen für das Banner-Overlay gelten nur, wenn Sie den Banner-Kartenstil verwenden. Konzentrieren Sie sich bei anderen Kartenstilen auf Hintergrund-, Rahmen-, Überschrift- und Textfarben, damit die Karten lesbar und visuell konsistent bleiben.

Farbeinstellungen

Diese Steuerelemente überschreiben die Symbol-, Überschrift- und unterstützende Textfarben des Abschnitts. Sie sind besonders nützlich, wenn Sie einen benutzerdefinierten Abschnittshintergrund hinzufügen und dafür sorgen müssen, dass der Header-Inhalt deutlicher hervorsticht.

Halten Sie den Textkontrast sowohl zum Abschnittshintergrund als auch zum Kartenbereich darunter stark. Kleine Anpassungen hier können den Abschnitt etwas ausgereifter wirken lassen, ohne das Kartendesign selbst zu verändern.

Standard-Abschnittseinstellungen

Header-Einstellungen

Verwenden Sie die gemeinsamen Header-Einstellungen, um oberhalb der Kollektion-Karten eine Einleitung hinzuzufügen, einschließlich Ausrichtung, Überschrift, Beschriftung, unterstützendem Text und einer optionalen Schaltfläche. Siehe Header-Einstellungen.

Dies ist ein guter Ort, um zu erklären, was die hervorgehobenen Kollektionen verbindet, etwa Saisonalität, Produkttyp oder die beabsichtigte Zielgruppe. Wenn Sie eine Schaltfläche hinzufügen, verwenden Sie sie für einen klaren nächsten Schritt, etwa das Anzeigen aller Kollektionen oder das Öffnen einer verwandten Landingpage.

Karten-Einstellungen

Verwenden Sie die gemeinsamen Karten-Einstellungen, um das Erscheinungsbild jeder Kollektion-Karte zu steuern, einschließlich Stil, Bildverhältnis, Textanzeige, Ausrichtung und Schaltflächenbehandlung. Siehe Karten-Einstellungen.

Diese Einstellungen überschreiben nur für diesen Abschnitt die übergreifenden Standardwerte des Themes, was nützlich ist, wenn hervorgehobene Kollektionen eine andere Darstellung als der Rest der Website benötigen. Banner-Karten wirken eindrucksvoller, während einfachere gepolsterte Stile in größeren Rastern oft leichter zu überblicken sind.

Hinweis

Die vertikale Textausrichtung wirkt sich nur auf Karten aus, wenn der Banner-Kartenstil verwendet wird.

Padding-Einstellungen

Verwenden Sie die gemeinsamen Padding-Einstellungen, um den Abstand oberhalb und unterhalb des Abschnitts anzupassen. Siehe Padding-Einstellungen.

Mehr Padding lässt die Kollektionliste wie einen eigenen Browsing-Bereich wirken, während engere Abstände besser funktionieren, wenn sie benachbarte Inhalte unterstützen. Prüfen Sie die Abstände sowohl auf Desktop als auch auf Mobilgeräten, damit der Abschnitt im Kontext ausgewogen wirkt.

Abschnittshintergrund-Einstellungen

Verwenden Sie die gemeinsamen Abschnittshintergrund-Einstellungen, um einen Farbverlauf, ein Bild oder ein Video hinter dem Abschnitt hinzuzufügen. Siehe Abschnittshintergrund-Einstellungen.

Hintergründe können den Abschnitt redaktioneller oder kampagnenorientierter wirken lassen, beeinflussen aber auch die Lesbarkeit und die wahrgenommene Abstandswirkung. Wenn Sie einen Bild- oder Videohintergrund verwenden, stellen Sie sicher, dass der Header-Text weiterhin genügend Kontrast hat, und verwenden Sie bei Bedarf Overlays. Details zur Einrichtung auf Editor-Ebene finden Sie in der Shopify-Dokumentation zum Anpassen von Abschnitten

Trennlinien-Einstellungen

Verwenden Sie die gemeinsamen Trennlinien-Einstellungen, um eine Linie am oberen oder unteren Rand des Abschnitts hinzuzufügen. Siehe Trennlinien-Einstellungen.

Trennlinien helfen, wenn dieser Abschnitt zwischen visuell ähnlichen Inhaltsbereichen steht und eine klarere Abgrenzung benötigt. Halten Sie sie dezent, es sei denn, Sie möchten einen stärkeren strukturellen Bruch.

Sichtbarkeitseinstellungen

Verwenden Sie die gemeinsamen Sichtbarkeitseinstellungen, um zu steuern, ob der Abschnitt auf Desktop, Mobilgeräten oder auf beiden angezeigt wird. Siehe Sichtbarkeitseinstellungen.

Das ist nützlich, wenn Sie getrennte Versionen des Abschnitts für verschiedene Geräte erstellen möchten, etwa ein großes Desktop-Raster und einen einfacheren mobilen Slider. Wenn Sie gerätespezifische Versionen erstellen, halten Sie die hervorgehobenen Kollektionen und die Botschaft aufeinander abgestimmt.

Breiten-Einstellungen

Verwenden Sie die gemeinsamen Breiten-Einstellungen, um die Inhaltsbreite und die äußere Abschnittsbreite des Abschnitts zu steuern. Siehe Breiten-Einstellungen.

Breitere Breiten unterstützen größere Raster und mehr Spalten, während schmalere Breiten eine kleinere Auswahl an Kollektionen kuratierter wirken lassen können. Wenn Sie einen Hintergrund verwenden, prüfen Sie Breitenänderungen in der Live-Storefront, da die Rahmen im Editor die Abstände anders wirken lassen können als auf der Seite.

Nutzungshinweise

1. Gruppieren Sie Kollektionen gezielt. Wählen Sie Kollektionen aus, die ein klares Thema teilen, damit der Abschnitt kuratiert und nicht wie ein Verzeichnis wirkt.
2. Passen Sie das Layout an das Ziel an. Verwenden Sie ein Raster für den schnellen Vergleich mehrerer Kollektionen, und nutzen Sie eine Diashow, wenn der Platz begrenzt ist oder Touch-freundliches Browsen wichtiger ist.
3. Halten Sie Karten gut lesbar. Starke Overlays, benutzerdefinierte Farben und Banner-Stile funktionieren am besten, wenn der Text über den Kollektion-Bildern klar bleibt.
4. Fügen Sie hilfreichen Header-Kontext hinzu. Eine kurze Überschrift und knapper unterstützender Text können die hervorgehobenen Kollektionen auf einen Blick verständlicher machen.
5. Prüfen Sie jede Bildschirmgröße. Spalten, Diashow-Verhalten und Breitenwahl können sich auf Desktop, Tablet und Mobilgeräten sehr unterschiedlich anfühlen.
6. Überprüfen Sie gerätespezifische Medien sorgfältig. Getrennte Desktop- und Mobilbilder können Zuschnitt, Ladeverhalten, Fallback-Verhalten und Lesbarkeit verändern.
7. Betrachten Sie Navigationsinhalte als Kundenfluss. Neu angeordnete, ausgeblendete oder nur auf Mobilgeräten sichtbare Links können verändern, worauf Kundinnen und Kunden vom Abschnitt aus zugreifen können.