Vorgestellte Produkte

Ausgewählte Links

1. Shopify-Dokumentation zu Abschnitten und Blöcken
2. Company XYZ-Dokumentation zu Layout-Einstellungen
3. Company XYZ-Dokumentation zu Diashow-Steuerelementen
4. Company XYZ-Dokumentation zu Header-Einstellungen
5. Company XYZ-Dokumentation zu Produktkarten-Einstellungen
6. Company XYZ-Dokumentation zu Produktvarianten
7. Company XYZ-Dokumentation zu Einstellungen für den Abschnitts-Innenabstand
8. Company XYZ-Dokumentation zu Einstellungen für Abschnittshintergründe
9. Company XYZ-Dokumentation zu Trennlinien-Einstellungen
10. Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen
11. Company XYZ-Dokumentation zu Einstellungen für Layout-Breiten

Hilfreiche Videos

Video der Shopify Academy: Ihren Shop anpassen

Video der Shopify Academy: Ihren Shop anpassen

Verwenden Sie Vorgestellte Produkte, um eine bestimmte Auswahl an Artikeln an beliebiger Stelle auf der Seite hervorzuheben. Dies eignet sich am besten für kuratierte Bearbeitungen wie Neuheiten, saisonale Auswahl, Geschenkführer oder Kampagnenhinweise, bei denen Sie die volle Kontrolle darüber haben möchten, welche Produkte angezeigt werden. Einen breiteren Überblick darüber, wie Abschnitte und Blöcke funktionieren, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken

Grundeinstellungen

Wählen Sie zunächst die Produkte aus, die Sie hervorheben möchten. Da dieser Abschnitt manuell kuratiert wird, eignet er sich am besten, wenn Sie eine gezielte Produktmischung und keinen automatisch wechselnden Feed wünschen.

Tipp

Verwenden Sie diesen Abschnitt, wenn die genaue Produktzusammenstellung wichtig ist. Wenn sich Produkte automatisch aktualisieren sollen, sobald sich eine Kollektion ändert, verwenden Sie stattdessen einen kollektionsbasierten Abschnitt.

Layout-Einstellungen

Die Layout-Einstellungen steuern, wie viele Produktkarten auf Desktop, Tablet und Mobilgeräten angezeigt werden und ob jedes Gerät ein Raster- oder Diashow-Layout verwendet. Dadurch haben Sie viel Flexibilität, wenn Sie auf größeren Bildschirmen vergleichsfreundliche Reihen und auf kleineren Bildschirmen per Swipe durchsuchbare Ansichten wünschen. Details zur Layout-Steuerung finden Sie in der Company XYZ-Dokumentation zu Layout-Einstellungen.

Tablet-Spalten können der Desktop-Einstellung folgen, wenn der Tablet-Wert auf 0 gesetzt ist. Das ist nützlich, wenn Sie ein einheitliches Layout für große Bildschirme wünschen, ohne eine separate Tablet-Spaltenzahl zu verwalten.

Wählen Sie die Spaltenanzahl danach, wie viele Produktdetails jede Karte aufnehmen muss. Weniger Spalten lassen mehr Raum für Produktbilder, Titel und Aktionen, während höhere Zahlen ein dichteres Merchandising-Layout erzeugen.

Wenn Sie mehr Kartendetails anzeigen, sollten Sie die Spaltenzahl nicht zu hoch ansetzen. Dichte Layouts können Produktinformationen und Aktionen schwerer erfassbar machen, insbesondere auf Tablet und Mobilgeräten.

Diashow-Einstellungen

Die Diashow-Einstellungen steuern Bewegung, automatisches Abspielen, Endlosschleife, Navigation, Pagination und das Verhalten der Folienvorschau, wenn auf einem Gerät das Diashow-Layout aktiviert ist. Diese Einstellungen sind am nützlichsten, wenn Sie ein geführteres Durchsuchen als mit einem festen Produktraster wünschen. Details zur Diashow-Steuerung finden Sie in der Company XYZ-Dokumentation zu Diashow-Steuerelementen.

Der Animationsstil ist der wichtigste Entscheidungsfaktor. Verblassen erzeugt eine klarere Darstellung mit jeweils einem Element, während die Standardanimation besser ist, wenn mehrere Produkte im selben Karussellfluss sichtbar sein sollen.

Automatisches Abspielen kann Bewegung hinzufügen, sollte die Produktentdeckung jedoch nicht überstürzen. Eine langsamere Verzögerung für das automatische Abspielen funktioniert in der Regel besser, wenn Karten Produkttitel, Auszüge oder Variantenoptionen enthalten.

Navigation und Pagination helfen Nutzern zu verstehen, wie viel Inhalt verfügbar ist. Die Vorschau der nächsten Folie kann das Karussell interaktiver wirken lassen, ist jedoch bei der Verblassen-Animation nicht verfügbar.

Die Verblassen-Animation erzwingt ein Einzelfolien-Layout und blendet einige Diashow-Funktionen wie Pagination und Folienvorschauen aus. Verwenden Sie die Standardanimation, wenn Sie ein traditionelleres Karussell mit mehreren Karten wünschen.

Karten-Farbeinstellungen

Verwenden Sie diese Einstellungen, um Kartenfarben nur für diesen Abschnitt zu überschreiben. Sie sind hilfreich, wenn vorgestellte Produkte einen kampagnenspezifischen Look benötigen, ohne die Produktkarten im restlichen Store zu ändern.

Die Banner-Overlay-Einstellungen gelten nur, wenn der Kartenstil auf Banner gesetzt ist. Konzentrieren Sie sich bei anderen Kartenstilen auf Kartenhintergrund, Rahmen, Überschriften- und Textfarben, damit Produktdetails klar und gut lesbar bleiben.

Achtung

Prüfen Sie nach Änderungen an Kartenhintergründen oder Overlays den Kontrast von Titel und Text über verschiedene Produktbilder hinweg, damit die Karten weiterhin gut lesbar bleiben.

Farbeinstellungen

Diese Einstellungen steuern die Farben für das Symbol, die Überschrift und die Unterüberschrift auf Abschnittsebene. Verwenden Sie sie, wenn der Einleitungstext zu einer Kampagnenpalette passen oder sich von der Standard-Textdarstellung abheben soll.

Wenn Sie auch ein Abschnittshintergrundbild, einen Verlauf oder ein Video verwenden, überprüfen Sie diese Textfarben erneut, nachdem der Hintergrund festgelegt wurde. Ein Kontrast, der auf einem einfarbigen Hintergrund gut aussieht, muss mit hinzugefügten Medien nicht mehr funktionieren.

Standard-Abschnittseinstellungen

Header-Einstellungen

Verwenden Sie die gemeinsamen Header-Steuerelemente, um mit einem optionalen Symbol, einer Beschriftung, einer Überschrift, unterstützendem Text und einer Schaltfläche Struktur und Kontext hinzuzufügen. Das kann die Klarheit verbessern und dazu beitragen, dass sich die Produktgruppe bewusster kuratiert anfühlt, insbesondere in redaktionellen oder werblichen Layouts. Details zu den Header-Steuerelementen finden Sie in der Shopify-Dokumentation zu Headern.

Die Header-Schaltfläche kann oberhalb oder unterhalb des Textes platziert werden, mit getrennter Positionierung auf Mobilgeräten und einer optionalen vollbreiten mobilen Darstellung. Halten Sie die Schaltfläche auf einen klaren nächsten Schritt fokussiert, etwa das Anzeigen eines breiteren Produktsortiments.

Karten-Einstellungen

Verwenden Sie die gemeinsamen Karten-Steuerelemente, um die Standarddarstellung Ihrer Produktkarten nur für diesen Abschnitt zu überschreiben. Sie können den Kartenstil, das Bildverhältnis, die Textdichte, die Schaltflächen-Darstellung, die Textausrichtung und das Verhalten des Variantenauswahlfelds anpassen. Details zu Produktkarten finden Sie in der Shopify-Dokumentation zu Produktkarten.

Hier geht es vor allem darum, visuelles Merchandising und Produktdetails auszubalancieren. Wenn der Abschnitt bildorientiert ist, vereinfachen Sie Text und Aktionen; wenn der Abschnitt vergleichsorientiert ist, halten Sie Titel und Handlungsaufforderungen konsistent und leicht erfassbar.

Die Anzeige des Variantenauswahlfelds erfordert zusätzliche Einrichtung, damit sie ordnungsgemäß funktioniert. Details zur Einrichtung finden Sie in der Company XYZ-Dokumentation zu Produktvarianten.

Padding-Einstellungen

Verwenden Sie die gemeinsamen Padding-Steuerelemente, um den Platz oberhalb und unterhalb des Abschnitts auf Desktop und Mobilgeräten anzupassen. Details zur Padding-Steuerung finden Sie in der Company XYZ-Dokumentation zu Abschnitts-Padding.

Mehr Padding kann dazu beitragen, dass sich eine Gruppe vorgestellter Produkte hochwertiger oder in sich geschlossener anfühlt, während engere Abstände gut funktionieren, wenn dieser Abschnitt benachbarte Inhalte unterstützt. Getrenntes Padding für Mobilgeräte ist nützlich, wenn gestapelte Karten oder Diashow-Layouts den Abschnitt zu hoch erscheinen lassen.

Abschnittshintergrund-Einstellungen

Verwenden Sie die gemeinsamen Hintergrund-Steuerelemente, um eine Farbe, einen Verlauf, ein Bild oder ein Video hinter dem Abschnitt hinzuzufügen. Details zur Hintergrundsteuerung finden Sie in der Company XYZ-Dokumentation zu Abschnittshintergründen.

Hintergrundmedien können dem Abschnitt einen redaktionelleren Eindruck verleihen, wirken sich aber auch auf die Lesbarkeit aus. Setzen Sie Overlays mit Bedacht ein und prüfen Sie, ob Überschriftstext und Produktkarten sich weiterhin klar vom Hintergrund abheben.

Trennlinien-Einstellungen

Verwenden Sie die gemeinsamen Trennlinien-Steuerelemente, um oberhalb oder unterhalb des Abschnitts eine Trennlinie hinzuzufügen. Details zur Trennlinien-Steuerung finden Sie in der Company XYZ-Dokumentation zu Trennlinien.

Trennlinien sind nützlich, wenn dieser Abschnitt zwischen visuell ähnlichen Inhalten steht und eine klarere Abgrenzung benötigt. Halten Sie sie dezent, wenn Ihre Karten oder Hintergründe bereits eine starke visuelle Trennung erzeugen.

Sichtbarkeitseinstellungen

Verwenden Sie die gemeinsamen Sichtbarkeits-Steuerelemente, um den Abschnitt je nach Gerätegröße ein- oder auszublenden. Details zur Sichtbarkeitssteuerung finden Sie in der Company XYZ-Dokumentation zu Sichtbarkeit.

Das ist hilfreich, wenn sich Ihre Merchandising-Strategie je nach Bildschirmgröße unterscheidet. Wenn Sie den Abschnitt für einen Gerätebereich ausblenden, stellen Sie sicher, dass dieselben Produkte dort an passender Stelle weiterhin angezeigt werden.

Breiten-Einstellungen

Verwenden Sie die gemeinsamen Breiten-Steuerelemente, um sowohl die Inhaltsbreite als auch die äußere Abschnittsbreite zu verwalten. Details zur Breitensteuerung finden Sie in der Company XYZ-Dokumentation zu Layoutbreiten.

Die Inhaltsbreite beeinflusst, wie breit der Produktbereich werden kann, während die Abschnittsbreite vor allem dann wichtig ist, wenn Sie Hintergründe verwenden oder möchten, dass der äußere Rahmen weiter reicht. Breitenänderungen lassen sich am einfachsten in der Live-Seitenansicht beurteilen, wo Abstände und das Verhalten von Rand zu Rand genauer sind.

Nutzungshinweise

1. Kuratiere Sie eine klare Produktgeschichte. Wählen Sie Produkte, die nach Thema, Zielgruppe oder Anwendungsfall zusammengehören, damit der Abschnitt bewusst gestaltet wirkt.
2. Passen Sie das Layout an das Ziel an. Verwenden Sie Raster für einfacheren Vergleich und Diashow-Layouts für ein stärker geführtes, swipefreundliches Durchsuchen.
3. Prüfen Sie beide Geräteansichten. Desktop und Mobilgeräte können sich bei Layout, Ausrichtung, Navigation und Medienverhalten unterscheiden. Prüfen Sie daher nach Änderungen jeden Haltepunkt.
4. Gehen Sie mit Medienüberschreibungen sorgfältig um. Getrennte Medienauswahlen für Desktop und Mobilgeräte können Zuschnitt, Laden, Fallback-Verhalten und Lesbarkeit verändern, insbesondere wenn Hintergründe oder Overlays beteiligt sind.
5. Halten Sie den Karteninhalt proportional. Je mehr Spalten Sie anzeigen, desto einfacher sollte jede Karte sein, damit Titel, Preise und Aktionen leicht erfassbar bleiben.
6. Prüfen Sie Commerce-Aktionen im Kontext. Produktdetails, ausgewählte Varianten, Menge, Verfügbarkeit und konfigurierte Warenkorb-Aktionen können alle beeinflussen, was Kunden aus dem Abschnitt hinzufügen oder tun können.