Erfolgreich
Ergänzende Produkte
Heben Sie relevante Zusatzartikel mit responsiven Layouts und flexiblem Styling für Produktkarten hervor.
- Shopify-Dokumentation zu Abschnitten und Blöcken
- Company XYZ-Dokumentation zu Layout-Einstellungen
- Company XYZ-Dokumentation zu Diashow-Steuerungseinstellungen
- Company XYZ-Dokumentation zu Header-Einstellungen
- Company XYZ-Dokumentation zu Produktkarten-Einstellungen
- Company XYZ-Dokumentation zu Karten-Einstellungen
- Company XYZ-Dokumentation zu Einstellungen für den Abschnitts-Innenabstand
- Company XYZ-Dokumentation zu Abschnittshintergrund-Einstellungen
- Company XYZ-Dokumentation zu Trennlinien-Einstellungen
- Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen
- Company XYZ-Dokumentation zu Einstellungen für Layout-Breiten
Verwenden Sie diesen Abschnitt, um Produkte anzuzeigen, die gut zum aktuellen Produkt passen, z. B. Zubehör, Bundles oder Nachfüllartikel. Er eignet sich am besten, wenn Sie Zusatzkäufe steigern möchten, ohne den eigentlichen Kaufablauf zu unterbrechen. Einen umfassenderen Überblick darüber, wie Theme-Abschnitte funktionieren, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken
Dieser Abschnitt zeigt nur Produkte an, die in der Search & Discovery-App als ergänzende Empfehlungen eingerichtet wurden.
Produkte, die nicht vorrätig sind oder sich bereits im Warenkorb befinden, werden automatisch aus der Liste ausgeschlossen.
Grundeinstellungen
Abschnitt betitelt „Grundeinstellungen“Verwenden Sie Number of items, um festzulegen, wie viele Empfehlungen angezeigt werden. Wenn der Abschnitt den vollständigen verfügbaren Satz zurückgeben soll, verwenden Sie 0, um alle passenden Artikel bis zum Abschnittslimit zuzulassen.
Eine kleinere Produktanzahl hält den Bereich nahe dem Kaufformular kompakt. Eine größere Anzahl ist sinnvoller, wenn Sie ein ausführlicheres Browserlebnis in einem breiteren Raster oder einer Diashow wünschen.
Layout-Einstellungen
Abschnitt betitelt „Layout-Einstellungen“Diese Einstellungen steuern, wie Empfehlungen auf Desktop, Tablet und Mobile angeordnet werden. Einen Überblick über das gemeinsame Layout-Verhalten finden Sie in der Referenz der Layout-Einstellungen.
Sie können pro Gerät ein separates Layout wählen. Das ist nützlich, wenn Sie auf größeren Bildschirmen ein vergleichsfreundliches Raster und auf kleineren Geräten eine wischfreundliche Diashow wünschen. Spalteneinstellungen helfen dabei, die Kartengröße mit der Anzahl der Produkte auszubalancieren, die Kunden auf einmal sehen können.
Wenn Sie kein separates Tablet-Layout benötigen, lassen Sie das Tablet dem Desktop-Setup folgen, damit der Abschnitt leichter zu verwalten ist.
Diashow-Einstellungen
Abschnitt betitelt „Diashow-Einstellungen“Wenn auf einem Gerät ein Diashow-Layout verwendet wird, steuern diese Einstellungen, wie Kunden durch die Empfehlungen navigieren. Informationen zu gemeinsamen Interaktionsoptionen finden Sie in der Referenz der Diashow-Steuerelemente.
Die Standardanimation ist die flexibelste Wahl für das Durchblättern mehrerer Karten. Fade sorgt für eine einfachere Darstellung mit nur einem Element nach dem anderen, die ruhiger wirkt, aber weniger Inhalt auf einmal zeigt.
Autoplay kann Bewegung hinzufügen, sollte bei Produktempfehlungen aber in der Regel mit Bedacht eingesetzt werden. Wenn Sie es aktivieren, wählen Sie eine Verzögerung, die genug Zeit bietet, um Produktnamen und Preise zu lesen.
Navigation, Pagination und Vorschauen der nächsten Folie helfen dabei zu signalisieren, dass weitere Produkte verfügbar sind. Die Vorschau der nächsten Folie ist auf Touch-Geräten besonders hilfreich, gilt jedoch nicht, wenn die Fade-Animation verwendet wird.
Die Fade-Animation erzwingt eine Darstellung mit nur einer Folie. Außerdem werden Pagination und Vorschauen der nächsten Folie deaktiviert.
Standard-Abschnittseinstellungen
Abschnitt betitelt „Standard-Abschnittseinstellungen“Header-Einstellungen
Abschnitt betitelt „Header-Einstellungen“Die Referenz der Header-Einstellungen deckt die hier verwendeten gemeinsamen Header-Steuerelemente ab. In diesem Abschnitt führt der Header den Empfehlungsbereich mit einem Titel, einer optionalen Beschriftung, unterstützendem Text und einer optionalen Schaltfläche ein.
Halten Sie die Überschrift kurz, damit die Produkte im Fokus bleiben. Fügen Sie eine Schaltfläche nur hinzu, wenn sie einen klaren nächsten Schritt bietet, z. B. das Durchstöbern einer größeren verwandten Kollektion.
Karten-Einstellungen
Abschnitt betitelt „Karten-Einstellungen“Die Referenz der Produktkarten-Einstellungen und die Referenz der Karten-Einstellungen erklären die hier verwendeten gemeinsamen Steuerelemente. Mit diesen Einstellungen können Sie die übliche Darstellung der Produktkarte nur für diesen Abschnitt überschreiben.
Verwenden Sie sie, um ergänzende Produkte einfacher, kompakter oder werblicher wirken zu lassen als Karten an anderer Stelle. Einheitliche Bildverhältnisse liefern in der Regel das sauberste Ergebnis, besonders wenn mehrere Produkte nebeneinander angezeigt werden.
Die Auswahl für CTA und Variantenauswahl verändert, wie viele Aktionen direkt im Abschnitt stattfinden. Wenn Sie die Variantenauswahl aktivieren, stellen Sie sicher, dass die Optionen auf einen Blick verständlich sind.
Farben für das Banner-Overlay sind nur relevant, wenn der Kartenstil auf Banner gesetzt ist. Prüfen Sie bei allen Farbänderungen die Kontraste sorgfältig, damit Titel, Preise und Aktionen gut lesbar bleiben.
Padding-Einstellungen
Abschnitt betitelt „Padding-Einstellungen“Die Referenz der Padding-Einstellungen deckt die hier verwendeten gemeinsamen Abstandssteuerelemente ab. Verwenden Sie Padding, um zu steuern, wie nah die Empfehlungen an umliegenden Produktinhalten sitzen.
Engere Abstände helfen dabei, dass der Abschnitt enger mit dem Hauptproduktbereich verbunden wirkt. Größere Abstände funktionieren besser, wenn er als separater Inhaltsblock wahrgenommen werden soll.
Abschnittshintergrund-Einstellungen
Abschnitt betitelt „Abschnittshintergrund-Einstellungen“Die Referenz der Abschnittshintergrund-Einstellungen erklärt die hier verwendeten gemeinsamen Hintergrundoptionen. Sie können eine Farbe, einen Farbverlauf, ein Bild oder ein Video hinzufügen, um den Empfehlungsbereich hervorzuheben.
Das funktioniert am besten, wenn Sie eine stärkere visuelle Abgrenzung vom Rest der Produktseite wünschen. Wenn Sie ein Hintergrundbild oder Video hinzufügen, sorgen Sie dafür, dass die Karten gut lesbar bleiben, und vermeiden Sie Hintergründe, die mit Produktbildern konkurrieren.
Trennlinien-Einstellungen
Abschnitt betitelt „Trennlinien-Einstellungen“Die Referenz der Trennlinien-Einstellungen deckt die hier verwendeten gemeinsamen Liniensteuerelemente ab. Trennlinien oben und unten geben dem Abschnitt mehr Struktur, ohne eine vollständige Hintergrundgestaltung hinzuzufügen.
Das ist eine gute Option, wenn die Seite bereits genügend visuellen Kontrast hat und nur eine leichte Abgrenzung um die Empfehlungen benötigt.
Sichtbarkeitseinstellungen
Abschnitt betitelt „Sichtbarkeitseinstellungen“Die Referenz der Sichtbarkeitseinstellungen erklärt die gemeinsamen responsiven Anzeige-Steuerelemente. In diesem Abschnitt sind sie besonders nützlich, wenn Sie auf Desktop und Mobile unterschiedliche Empfehlungsstrategien verwenden möchten.
Setzen Sie dies mit Bedacht ein, damit Kunden auf den Geräten, die für Ihren Shop am wichtigsten sind, keinen Zugang zu nützlichen Zusatzvorschlägen verlieren.
Breiten-Einstellungen
Abschnitt betitelt „Breiten-Einstellungen“Die Referenz der Breiten-Einstellungen deckt die hier verwendeten gemeinsamen Breitensteuerelemente ab. Die Inhaltsbreite beeinflusst, wie viele Karten bequem in eine Zeile passen, während die Abschnittsbreite vor allem dann wichtig ist, wenn Sie einen Hintergrund verwenden oder eine breitere visuelle Gestaltung wünschen.
Breitere Layouts eignen sich in der Regel für größere Produktmengen und mehrspaltige Raster. Schmalere Breiten können helfen, die Aufmerksamkeit auf eine kleinere Anzahl von Empfehlungen zu lenken.
Nutzungshinweise
Abschnitt betitelt „Nutzungshinweise“- Richten Sie zuerst Empfehlungen ein. Wenn der Abschnitt leer erscheint, bestätigen Sie, dass ergänzende Produkte in der Search & Discovery-App zugewiesen wurden. Wenn keine geeigneten Empfehlungen verfügbar sind, erzwingt der Abschnitt keine vollständige leere Zustandsdarstellung.
- Wählen Sie das Layout nach Gerät. Prüfen Sie sowohl Desktop- als auch Mobile-Layouts, da Raster- und Diashow-Steuerelemente Ausrichtung, Sichtbarkeit, Navigation und die gleichzeitig angezeigte Inhaltsmenge verändern können.
- Lassen Sie die Standardwerte stehen, wenn Sie ein Fallback-Styling wünschen. Lassen Sie Hintergrundfarben, Verläufe und Medien unverändert, wenn der Abschnitt ein schlichteres Erscheinungsbild übernehmen soll. Explizite Überschreibungen machen den Bereich eigenständiger.
- Prüfen Sie Medien sorgfältig. Wenn Sie unterschiedliche Medien für Desktop und Mobile verwenden, überprüfen Sie Zuschnitt, Lesbarkeit und Ladeverhalten, damit die Produktkarten auf beiden Viewports klar bleiben.
- Mit echten Produkten in der Vorschau prüfen. Testen Sie den Abschnitt mit Produkten, für die mehrere Empfehlungen vorhanden sind, um Abstände, Anzahlen und das Verhalten der Diashow zu bestätigen.