Zum Inhalt springen

Produktempfehlungen

Fügen Sie automatische Vorschläge für verwandte Produkte mit flexiblen Layout- und Karten-Gestaltungsoptionen hinzu.

Verwenden Sie diesen Abschnitt, um verwandte Produkte auf Produktseiten mit automatisch generierten Empfehlungen hervorzuheben. Er ist eine praktische Möglichkeit, Cross-Sells hinzuzufügen, ohne Produkte für jeden Artikel manuell zu kuratieren, und bietet Ihnen dennoch eine starke Kontrolle über Layout, Kartendarstellung und Abschnittsstyling.

Empfehlungen verbessern sich im Laufe der Zeit auf Grundlage von Produkt- und Bestelldaten und können auch über Search & Discovery beeinflusst werden. Weitere Informationen dazu, wie Shopify Empfehlungen behandelt, finden Sie in der Shopify-Dokumentation zu Produktempfehlungen. Sie können die Abschnittsreferenz in der Produktempfehlungen ansehen.

Die wichtigste Steuerung auf Abschnittsebene ist Number of items. Verwenden Sie sie, um die Anzahl der angezeigten empfohlenen Produkte zu begrenzen, oder setzen Sie sie auf 0, wenn der Abschnitt so viele verfügbare Artikel zurückgeben soll, wie vorhanden sind, bis zum integrierten Maximum.

Kleinere Anzahlen funktionieren in der Regel besser in kompakteren Layouts oder wenn der Abschnitt weiter unten auf der Seite erscheint. In größeren Layouts kann eine höhere Anzahl den Abschnitt vollständiger wirken lassen, insbesondere wenn Kundinnen und Kunden wahrscheinlich über die ersten wenigen Artikel hinaus stöbern.

Der Abschnitt kann weniger Produkte als Ihr Limit anzeigen, wenn nur eine kleinere Menge relevanter Empfehlungen verfügbar ist.

Diese Einstellungen steuern, wie empfohlene Produkte auf Desktop, Tablet und Mobilgerät angeordnet werden. Sie können pro Gerät zwischen Raster- und Diashow-Layouts wählen und dann die Spaltenanzahl für jede Bildschirmgröße festlegen.

Siehe Company XYZ-Dokumentation zu Layout-Einstellungen. Verwenden Sie im Allgemeinen mehr Spalten, wenn Karten visuell schlicht sind, und weniger Spalten, wenn sie längere Titel, Auszüge, Farbfelder oder eine stärkere Call-to-Action-Gestaltung enthalten.

Das Tablet kann die Spaltenanzahl des Desktops übernehmen, wenn es auf 0 gesetzt ist. Das ist nützlich, wenn Sie ein einfacheres Setup möchten, aber es lohnt sich, das Tablet sorgfältig zu prüfen, wenn Ihr Desktop-Layout bereits dicht ist.

Ein gängiges Muster ist ein Raster auf größeren Bildschirmen für einen schnellen Vergleich und eine Diashow auf Mobilgeräten für leichteres horizontales Stöbern. Wenn Sie auf Mobilgeräten ein Raster beibehalten, vermeiden Sie überladene Karten, damit Produktdetails leicht zu erfassen bleiben.

Wenn das Diashow-Layout auf einem Gerät aktiviert ist, steuern diese Einstellungen Bewegung, Autoplay, Schleifen, Navigation, Paginierung und Folienvorschauen. Damit können Sie entscheiden, ob der Abschnitt redaktioneller und rhythmischer oder direkter und durchstöberbar wirkt.

Siehe Company XYZ-Dokumentation zu Diashow-Steuerelementen. Verwenden Sie diese Einstellungen, um das Stöbern zu unterstützen, nicht um mit den Produkten selbst zu konkurrieren.

Die Animation Fade eignet sich am besten, wenn Sie jeweils ein Produkt hervorheben möchten. Da sie ein Einzelfolien-Layout erzwingt und einige Hinweise zum Stöbern über mehrere Karten entfernt, ist sie in der Regel weniger effektiv, wenn Kundinnen und Kunden mehrere Empfehlungen schnell vergleichen müssen.

Autoplay funktioniert am besten, wenn die Bewegung dezent ist und die Verzögerung den Käuferinnen und Käufern genug Zeit zum Lesen lässt. Auf dem Desktop ist das Pausieren beim Darüberfahren mit der Maus eine hilfreiche Sicherheitsfunktion, wenn Kundinnen und Kunden mit den Karten interagieren.

Paginierung ist am nützlichsten, wenn es genügend Folien gibt, um eine zusätzliche Orientierung zu rechtfertigen. Die Vorschau der nächsten Folie kann ebenfalls helfen zu signalisieren, dass weitere Empfehlungen verfügbar sind, ohne sich nur auf Pfeile oder Paginierung zu verlassen.

Diese Steuerelemente passen den Intro-Inhalt des Abschnitts an, einschließlich des Symbols, des Überschriftentexts und des Unterüberschriftentexts. Verwenden Sie sie, wenn dieser Abschnitt einen stärkeren Kontrast oder eine etwas andere Betonung als die umgebenden Inhalte benötigt.

Siehe Company XYZ-Dokumentation zu Farbeinstellungen. Das ist besonders nützlich, wenn Sie einen benutzerdefinierten Hintergrund hinzufügen und der Überschriftenbereich klar und gut lesbar bleiben soll.

Verwenden Sie die gemeinsamen Header-Steuerelemente, um oberhalb der Empfehlungen eine optionale Einleitung hinzuzufügen, einschließlich Ausrichtung, Symbol, Beschriftung, Überschrift, Unterüberschrift und einer optionalen Schaltfläche. Mehr erfahren in der Company XYZ-Dokumentation zu Header-Einstellungen.

Ein Header ist nützlich, wenn der Abschnitt Kontext benötigt, etwa um die Produkte als verwandte Artikel oder ergänzende Auswahl zu rahmen. Die optionale Schaltfläche eignet sich gut, um auf eine breitere Produktliste zu verlinken, solange das Ziel eindeutig zu den angezeigten Empfehlungen passt.

Verwenden Sie die gemeinsamen Karten-Steuerelemente, um die standardmäßige Darstellung der Produktkarte nur für diesen Abschnitt zu überschreiben. Mehr erfahren in der Company XYZ-Dokumentation zu Produktkarten-Einstellungen.

Hier können Sie Empfehlungskarten je nach Bedeutung des Abschnitts auf der Seite visueller, kompakter oder textbetonter gestalten. Wenn Sie einen Variantenauswähler aktivieren, stellen Sie sicher, dass Ihr Variantensetup den gewählten Darstellungsstil unterstützt; Hinweise zum Variantenauswähler finden Sie in der Company XYZ-Dokumentation zu Produktvarianten.

Verwenden Sie die gemeinsamen Padding-Steuerelemente, um den Abstand oberhalb und unterhalb des Abschnitts anzupassen. Mehr erfahren in der Company XYZ-Dokumentation zu Abschnitt-Padding.

Vergrößern Sie den Abstand, wenn die Empfehlungen wie ein eigenständiger Inhaltsblock wirken sollen. Verringern Sie ihn, wenn der Abschnitt eng mit den benachbarten Produktseiteninhalten verbunden bleiben soll.

Verwenden Sie die gemeinsamen Hintergrund-Steuerelemente, um einen Farbverlauf, ein Bild oder ein Video hinter dem Abschnitt hinzuzufügen. Mehr erfahren in der Company XYZ-Dokumentation zu Abschnitt-Hintergründen.

Hintergründe können helfen, die Empfehlungen vom Rest der Seite zu trennen, fügen aber auch visuelles Gewicht hinzu. Wenn Sie einen stärkeren Hintergrund verwenden, prüfen Sie, ob Karteninhalt und Überschriftentext weiterhin klar hervorstechen.

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

Trennlinien sind hilfreich, wenn dieser Abschnitt zwischen dichten Seitenbereichen liegt und eine klarere Abgrenzung benötigt. Dezente Trennlinien-Stile reichen für Produktseiten-Layouts meist aus.

Verwenden Sie die gemeinsamen Sichtbarkeits-Steuerelemente, um festzulegen, ob dieser Abschnitt auf allen Geräten oder nur auf Desktop oder Mobilgerät erscheint. Mehr erfahren in der Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen.

Das ist nützlich, wenn Sie je nach Gerät unterschiedliche Empfehlungserlebnisse wünschen, etwa ein breiteres Desktop-Raster und eine einfachere mobile Darstellung. Wenn Sie getrennte Versionen erstellen, stellen Sie sicher, dass sie nicht redundant wirken.

Verwenden Sie die gemeinsamen Breiten-Steuerelemente, um sowohl die Inhaltsbreite als auch die äußere Abschnittsbreite zu verwalten. Mehr erfahren in der Company XYZ-Dokumentation zu Layout-Breiten.

Breitere Breiten können mehr Produkte auf einmal anzeigen, während schmalere Breiten oft Fokus und Lesbarkeit verbessern. Prüfen Sie Breitenänderungen sowohl im Live-Storefront als auch im Editor, da sich die Layoutgröße unterschiedlich anfühlen kann.

  1. Planen Sie für fehlende Ergebnisse. Empfehlungen werden nur angezeigt, wenn ein passender Produktkontext und genügend zurückgegebene Artikel vorhanden sind, daher kann der Abschnitt bei einigen Produkten leichter wirken als erwartet.
  2. Prüfen Sie beide Ansichten. Desktop- und Mobil-Layouts können sich unterschiedlich verhalten, insbesondere bei Schiebereglern, Steuerelementen und Medien. Prüfen Sie daher vor der Veröffentlichung immer beide Größen.
  3. Verwenden Sie Überschreibungen bewusst. Leere oder standardartige Auswahlmöglichkeiten bewahren in der Regel das Fallback-Styling des Themes, während explizite Farben, Verläufe oder benutzerdefinierte Medien den Abschnitt unabhängiger vom Rest der Seite wirken lassen.
  4. Halten Sie Medien lesbar. Wenn Sie separate Desktop- und Mobil-Medien verwenden, prüfen Sie Zuschnitt, Ladeverhalten und Textkontrast, damit der Abschnitt auf jedem Gerät klar bleibt.
  5. Machen Sie Zustände leicht lesbar. Wenn der Abschnitt eine formularähnliche Interaktion oder Validierungsmeldungen enthält, halten Sie Erfolgs- und Fehlerzustände einfach und gut lesbar, damit Käuferinnen und Käufer schnell reagieren können.