Ausgewählte Kollektion

Ausgewählte Links

1. Company XYZ-Dokumentation zu Layout-Einstellungen
2. Company XYZ-Dokumentation zu Diashow-Steuerungseinstellungen
3. Company XYZ-Dokumentation zu Header-Einstellungen
4. Company XYZ-Dokumentation zu Produktkarten-Einstellungen
5. Company XYZ-Dokumentation zu Abschnitts-Innenabstandseinstellungen
6. Company XYZ-Dokumentation zu Abschnittshintergrund-Einstellungen
7. Company XYZ-Dokumentation zu Trennlinien-Einstellungen
8. Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen
9. Company XYZ-Dokumentation zu Layout-Breiteneinstellungen
10. Shopify-Dokumentation zum Anpassen von Abschnitten

Hilfreiche Videos

Video der Shopify Academy: Ihren Shop anpassen

Video der Shopify Academy: Ihren Shop anpassen

Verwenden Sie diesen Abschnitt, um Produkte aus einer Kollektion in einem Gitter oder einer Diashow anzuzeigen, mit getrennter Layout-Steuerung für Desktop, Tablet und Mobilgeräte. Er eignet sich besonders für Produktreihen auf der Startseite, kuratierte Kategorie-Hervorhebungen und Werbe-Features für Kollektionen.

Grundeinstellungen

Wählen Sie zuerst die Kollektion aus, die Sie anzeigen möchten, und legen Sie dann fest, wie viele Produkte enthalten sein sollen. Wenn Sie die Artikelanzahl auf 0 setzen, werden alle verfügbaren Artikel aus dieser Kollektion bis zum Abschnittslimit angezeigt. Das ist für kleinere Kollektionen nützlich, kann den Abschnitt aber überladen wirken lassen, wenn der Karteninhalt detailliert ist.

Einzelheiten zur Einrichtung im Theme-Editor finden Sie in der Shopify-Dokumentation zum Anpassen von Abschnitten

Wenn Sie eine kompaktere, stärker kuratierte Darstellung wünschen, verwenden Sie eine kleinere Artikelanzahl und lassen Sie den Abschnitt als Vorschau fungieren. Wenn die Produktreihenfolge wichtig ist, stellen Sie sicher, dass die Kollektion selbst so angeordnet ist, wie Sie es möchten, bevor Sie sie hier verwenden.

Dieser Abschnitt zeigt Produkte aus einer Kollektion an, keine manuell ausgewählte Liste. Wenn Sie eine präzise manuelle Produktauswahl benötigen, verwenden Sie stattdessen einen Abschnitt, der für hervorgehobene Produkte erstellt wurde.

Layout-Einstellungen

Layout-Einstellungen steuern, wie viele Produktkarten angezeigt werden und ob sie auf jeder Gerätegröße als Gitter oder Diashow dargestellt werden. So können Sie auf größeren Bildschirmen leicht ein breites, vergleichsfreundliches Layout und auf kleineren Bildschirmen ein kompakteres Surferlebnis erstellen.

Tablet kann die Desktop-Spaltenanzahl übernehmen, wenn der Wert auf 0 belassen wird. Das ist nützlich, wenn beide Ansichten aufeinander abgestimmt bleiben sollen. Wenn Sie ein Gerät in den Diashow-Modus schalten, prüfen Sie, wie viele Karten gleichzeitig sichtbar bleiben, damit Text, Preise und Produktbilder weiterhin leicht zu erfassen sind.

Eine häufige Konfiguration ist ein mehrspaltiges Gitter auf Desktop und Tablet mit einer Diashow auf Mobilgeräten. Wenn Ihre Produktkarten mehr Text oder Variantenoptionen enthalten, wirken Gitterlayouts oft klarer als engere Karussells.

Diashow-Einstellungen

Diashow-Einstellungen gelten immer dann, wenn der Abschnitt auf einem Gerät den Diashow-Modus verwendet. Verwenden Sie sie, um Animationsstil, Geschwindigkeit, automatisches Abspielen, Navigation, Paginierung, Schleifenwiedergabe und die Anzeige eines Teils der nächsten Folie zu steuern.

Die Überblendung ist der wichtigste Entscheidungspunkt, da sie eine Einzelansicht erzwingt. Dadurch eignet sie sich besser, um jeweils ein Produkt hervorzuheben, als mehrere Produkte in derselben Reihe miteinander zu vergleichen.

Tipp

Verwenden Sie die Standardanimation, wenn Sie mehrere Karten in einer wischbaren Reihe anzeigen möchten. Verwenden Sie die Überblendung, wenn Sie eine fokussiertere Darstellung mit jeweils einem Produkt wünschen.

Automatisches Abspielen kann bei einfachen, stark visuellen Produktreihen gut funktionieren, ist jedoch weniger effektiv, wenn Kundinnen und Kunden Zeit benötigen, um Produktdetails zu vergleichen. Eine Vorschau auf die nächste Folie kann signalisieren, dass weitere Produkte verfügbar sind, reduziert jedoch den Platz für die aktuelle Karte.

Farbeinstellungen

Diese Einstellungen überschreiben die Farben des Abschnitt-Headers für das Symbol, den Haupttext und die Zwischenüberschrift. Sie sind besonders nützlich, wenn sich dieser Abschnitt auf einem benutzerdefinierten Hintergrund befindet oder eine stärkere visuelle Abgrenzung zum umliegenden Inhalt benötigt.

Halten Sie die Header-Farben einfach, wenn die Produkte selbst im Mittelpunkt stehen sollen. Wenn Sie außerdem einen kräftigen Hintergrund oder einen Kartenstil im Werbe-Look verwenden, können zu viele Farbänderungen auf einmal den Abschnitt visuell überladen wirken lassen.

Standard-Abschnittseinstellungen

Header-Einstellungen

Header-Einstellungen steuern den einleitenden Inhalt über der Kollektion, einschließlich Ausrichtung, Symbol, Beschriftung, Überschrift, unterstützendem Text und einer optionalen Schaltfläche. In diesem Abschnitt ist der Header nützlich, um die Kollektion mit einer Kategoriebeschriftung, einer Kampagnenbotschaft oder einem Link zum weiteren Durchsuchen zu rahmen.

Verwenden Sie die Schaltfläche für einen klaren nächsten Schritt, etwa um die vollständige Kollektion anzuzeigen. Halten Sie die Beschriftung konkret und prüfen Sie die Position und Breite der Schaltfläche auf Mobilgeräten, wenn der Abschnitt visuell bereits viel enthält.

Karten-Einstellungen

Karten-Einstellungen ermöglichen es Ihnen, die Standarddarstellung der Produktkarte nur für diesen Abschnitt zu überschreiben. Sie können Kartenstil, Bildverhältnis, Textdarstellung, Call-to-Action-Stil, Textausrichtung und das optionale Verhalten des Variantenauswahl-Steuerelements anpassen.

Diese Überschreibungen sind hilfreich, wenn dieses Kollektion-Feature einen anderen Zweck als Ihre Standard-Produktlisten erfüllen soll. Eine Karte im Banner-Stil kann beispielsweise werblicher wirken, während ein einfacherer Stil für schnelles Überfliegen und Vergleichen besser geeignet sein kann.

Hinweis

Einige Kartenoptionen funktionieren am besten zusammen. Beispielsweise gilt die vertikale Textausrichtung in der Mitte nur für Karten im Banner-Stil, und auf Mobilgeräten wird für den Karten-Schaltflächenstil eine Produktaktion nur mit Symbol verwendet.

Padding-Einstellungen

Padding-Einstellungen steuern den Abstand oberhalb und unterhalb des Abschnitts auf Desktop und Mobilgeräten. In einer Kolonnenreihe beeinflusst der Abstand, ob der Abschnitt wie ein eigenständiges Feature oder wie Teil eines dichteren Browsing-Ablaufs wirkt.

Verwenden Sie geringere Innenabstände, wenn dieser Abschnitt zwischen anderen produktbezogenen Abschnitten steht. Erhöhen Sie den Abstand, wenn die Kollektion redaktioneller oder visuell stärker abgesetzt wirken soll.

Abschnittshintergrund-Einstellungen

Abschnittshintergrund-Einstellungen ermöglichen es Ihnen, eine Hintergrundfarbe, einen Farbverlauf, ein Bild oder ein Video hinter dem Abschnitt hinzuzufügen. So kann aus einer einfachen Produktreihe ein stärkeres Werbe-Feature werden, insbesondere in Kombination mit einem Header.

Wenn Sie Bild- oder Videohintergründe verwenden, stellen Sie sicher, dass Produktkarten und Text weiterhin gut lesbar bleiben. Overlays sind besonders hilfreich, wenn der Hintergrund starke Kontraste oder viele Details hat.

Achtung

Starke Hintergründe können mit Produktbildern konkurrieren. Wenn Kundinnen und Kunden mehr Aufwand beim Erfassen der Produkte haben, vereinfachen Sie den Hintergrund oder reduzieren Sie seine Intensität.

Trennlinien-Einstellungen

Trennlinien-Einstellungen fügen oberhalb oder unterhalb des Abschnitts eine optionale Linie hinzu. Sie sind nützlich, wenn Sie eine subtile Grenze zwischen diesem Kollektion-Feature und benachbartem Inhalt wünschen.

Verwenden Sie Trennlinien sparsam, wenn der Abschnitt bereits einen starken Hintergrund oder einen markanten Kartenstil hat. Ein einfacher Trenner reicht in der Regel aus, um die Struktur zu verbessern, ohne visuelles Rauschen hinzuzufügen.

Sichtbarkeitseinstellungen

Sichtbarkeitseinstellungen steuern, ob der Abschnitt auf Desktop, Mobilgeräten oder auf beiden angezeigt wird. Das ist hilfreich, wenn Ihr Ansatz für die Warenpräsentation auf Mobilgeräten sich deutlich von Ihrem Desktop-Layout unterscheiden muss.

Verwenden Sie dies für bewusst alternative Layouts statt für kleine visuelle Anpassungen. Wenn der Inhalt auf beiden Varianten im Wesentlichen gleich ist, ist es in der Regel einfacher, einen gut abgestimmten responsiven Abschnitt zu pflegen.

Breiten-Einstellungen

Breiten-Einstellungen steuern die maximale Inhaltsbreite und die äußere Abschnittsbreite. In diesem Abschnitt wirken sich Breitenänderungen auf die Kartendichte, den Freiraum der Diashow und darauf aus, wie präsent die Kollektion auf größeren Bildschirmen wirkt.

Breitere Layouts können mehr Spalten oder größere Produktkarten unterstützen, während schmalere Layouts eine kuratierte Kollektion fokussierter wirken lassen können. Wenn Sie einen Abschnittshintergrund in voller Breite oder Full-bleed verwenden, sehen Sie sich das Ergebnis im live Storefront an, da die Einfassung im Editor Breitenänderungen irreführend erscheinen lassen kann.

Nutzungshinweise

1. Passen Sie das Layout an das Ziel an. Verwenden Sie ein Gitter für einen einfachen Produktvergleich und eine Diashow für eine kompaktere oder redaktionellere Darstellung.
2. Begrenzen Sie die Produktanzahl bei Bedarf. Eine kleinere Auswahl erzeugt in der Regel eine klarere hervorgehobene Reihe, als alle verfügbaren Artikel anzuzeigen.
3. Verwenden Sie Kartenüberschreibungen gezielt. Überschreiben Sie den Kartenstil nur dann, wenn sich diese Kollektion deutlich von Ihren Standard-Produktlisten unterscheiden soll.
4. Betrachten Sie die Überblendung als Spotlight-Modus. Überblendung eignet sich am besten, wenn sich Kundinnen und Kunden jeweils auf eine Produktkarte konzentrieren sollen, statt mehrere gleichzeitig zu durchsuchen.
5. Prüfen Sie jede Gerätegröße. Überprüfen Sie Spaltenanzahl, Diashow-Verhalten und Position der Header-Schaltfläche gemeinsam, damit der Abschnitt auf Desktop, Tablet und Mobilgeräten ausgewogen wirkt.
6. Prüfen Sie Medien- und Farboptionen gemeinsam. Getrennte Medien für Desktop und Mobilgeräte, explizite Farbüberschreibungen und Hintergrundmedien können Zuschnitt, Lesbarkeit und Fallback-Styling verändern. Testen Sie den Abschnitt daher auf beiden Viewport-Größen.
7. Halten Sie Navigationsinhalte bewusst. Wenn der Header oder zugehörige Steuerelemente Kundinnen und Kunden zu Menüs, Drawern oder verschachtelten Links führen, stellen Sie sicher, dass neu angeordnete oder ausgeblendete Elemente den von Ihnen erwarteten Pfad nicht blockieren.
8. Testen Sie Commerce-Aktionen im Kontext. Produktauswahl, Variantenwahl, Menge und Verfügbarkeit können beeinflussen, was Kundinnen und Kunden von der Karte aus tun können. Prüfen Sie daher das Ergebnis mit den Produkten, die Sie hervorheben möchten.