# Bereich Verwandte Produkte > **Was Sie lernen werden** > > * Wie man verwandte Produkte mit einem horizontal scrollenden Karussell anzeigt > * Erweiterte Anpassungsoptionen für Layout, Typografie und Abstände > * Wie man Produktempfehlungen und Navigation konfiguriert > * Beste Praktiken zur Verbesserung von Cross-Selling und Upselling *** ## 🎯 Was ist der Bereich „Verwandte Produkte"? Die **Bereich Verwandte Produkte** ist ein dynamisches Produktempfehlungs-Karussell, das auf Produktseiten erscheint, um verwandte, ergänzende oder ähnliche Produkte zu präsentieren. Dieser Abschnitt verwendet Shopifys integrierte Produktempfehlungs-Engine, um Kunden automatisch relevante Produkte vorzuschlagen, wodurch der durchschnittliche Bestellwert erhöht und das Einkaufserlebnis verbessert wird. **Hauptfunktionen:** * Automatische Produktempfehlungen basierend auf Shopifys Algorithmus * Horizontal scrollendes Karussell mit Navigationspfeilen * Anpassbare Produktanzeigeoptionen (Titel, Preise, Labels) * Erweiterte Typografie- und Abstandskontrollen * Mobiloptimiertes Design mit Touch-Navigation * Echtzeit-Laden von Produktdaten Verfügbar in: * ✅ Plain Jane v3.1+ * ✅ Plain Jane Interactive v2+ > 💡 **Hinweis**: Dieser Abschnitt ist nur auf Produktseiten verfügbar und nutzt Shopifys Produktempfehlungs-API. *** ## 🔧 Wie man den Bereich Verwandte Produkte hinzufügt 1. Gehen Sie zu **Onlineshop > Themes > Anpassen** 2. Navigieren Sie zu **Produkte > Standardprodukt** 3. Scrollen Sie nach unten zum Ende der Abschnittsliste 4. Klicken Sie **Sektion hinzufügen** 5. Wählen Sie **Produktempfehlungen** oder **Verwandte Produkte** 6. Konfigurieren Sie die Anzeigeoptionen und das Styling > ⚠️ **Wichtig**: Dieser Abschnitt erscheint nur auf tatsächlichen Produktseiten, nicht in der Theme-Editor-Vorschau beim Anzeigen von Kollektionen oder der Startseite. *** ## 📋 Inhalts- & Anzeigeoptionen ### **Abschnittsüberschrift** **Sektionsüberschrift** * Passen Sie den Überschriftentext an (z. B. „Das könnte Ihnen auch gefallen“, „Verwandte Produkte“) * Leer lassen, um die Abschnittsüberschrift vollständig auszublenden * Standard: „Verwandte Produkte“ **Produktlimit** * Legen Sie die maximale Anzahl an Produkten fest, die angezeigt werden sollen (1–8 Produkte) * Shopify filtert und wählt automatisch die relevantesten Produkte aus * Standard: 4 Produkte ### **Anzeige der Produktinformationen** **Produkttitel anzeigen** * Produktnamen ein-/ausschalten * Wesentlich zur Produktidentifikation * Empfohlen: aktiviert lassen **Produktpreise anzeigen** * Produktpreise unter den Titeln anzeigen * Hilft Kunden, fundierte Entscheidungen zu treffen * Zeigt ggf. den Verkaufspreis an **„Vergleichspreis“ anzeigen** * Ursprünglichen Preis anzeigen, wenn Produkte im Angebot sind * Zeigt durchgestrichene Preise zur Transparenz * Erscheint automatisch nur, wenn Produkte Verkaufspreise haben **Produkt-Badges** * **„Ausverkauft“-Abzeichen anzeigen**: Kennzeichnet nicht verfügbare Produkte * **„Sale“-Abzeichen anzeigen**: Hebt rabattierte Artikel hervor * **„Vorbestellung“-Abzeichen anzeigen**: Markiert kommende Produkte *** ## 🎨 Layout- & Design-Konfiguration ### **Produktraster-Layout** **Produkte pro Reihe (Desktop)** * Legen Sie fest, wie viele Produkte auf Desktop-Bildschirmen nebeneinander angezeigt werden (1–6 Produkte) * Standard: 4 Produkte * Empfehlung: 3–4 für optimale visuelle Balance **Produkte pro Reihe (Mobil)** * Steuert die Anzeige auf Mobilgeräten (1–3 Produkte) * Standard: 2 Produkte * Mobil aktiviert automatisch horizontales Scrollen **Textausrichtung der Produkte** * Ausrichtung von Produkttiteln und -preisen: Links, Zentriert oder Rechts * Zentrierte Ausrichtung schafft ein gepflegteres Erscheinungsbild * Linksbündige Ausrichtung bietet bessere Lesbarkeit für längere Produktnamen ### **Navigationssteuerung** **Pfeilnavigation** * Eingebaute Links-/Rechts-Pfeile für die Desktop-Navigation * Anpassbare Pfeilfarbe zur Markenabstimmung * Erscheint automatisch, wenn mehr Produkte vorhanden sind als angezeigt werden **Touch-/Swipe-Navigation** * Native Touch-Scroll-Unterstützung auf Mobilgeräten * Sanftes Momentum-Scrollen für bessere Benutzererfahrung * Keine zusätzliche Einrichtung erforderlich *** ## ✏️ Typografie-Anpassung ### **Schriftgrößen** Alle Textelemente können separat für Desktop und Mobil angepasst werden: **Größe der Abschnittsüberschrift** * Desktop: Bereich 16–32px * Mobil: Bereich 14–24px * Standard: 20px Desktop, 18px Mobil **Größe des Produkttitels** * Desktop: Bereich 12–20px * Mobil: Bereich 10–16px * Standard: 14px Desktop, 12px Mobil **Größe des Produktpreises** * Desktop: Bereich 12–18px * Mobil: Bereich 10–14px * Standard: 14px Desktop, 12px Mobil ### **Optionen für Schriftgewicht** **Fettgedruckte Sektionsüberschrift** * Umschalten, um die Abschnittsüberschrift fett zu machen (Gewicht 700) * Hilft, den Abschnitt vom Produktinhalt abzuheben * Empfohlen für klare visuelle Hierarchie **Fetter Produkttitel** * Produktnamen fett darstellen, um sie hervorzuheben * Nützlich für minimalistische Designs, bei denen Text mehr Präsenz benötigt * Berücksichtigen Sie die Lesbarkeit bei längeren Produktnamen **Fetter Anzeige-Link** * Machen Sie die Pfeilnavigations-Steuerelemente fett * Dezente Verbesserung der Sichtbarkeit der Navigation *** ## 🎨 Farb-Anpassung ### **Hintergrund- & Abschnittsfarben** **Hintergrundfarbe** * Sektion Hintergrundfarbe festlegen * Verwenden Sie transparent für nahtlose Seitenintegration * Erwägen Sie subtile Hintergrundfarben zur Abgrenzung des Abschnitts **Farbe der Sektionsüberschrift** * Anpassung der Kopfzeilentextfarbe * Sollte einen guten Kontrast zum Hintergrund haben * Passt typischerweise zur primären Markenfarbe **Pfeilfarbe** * Farbe der Navigationspfeile festlegen * Sollte vor dem Hintergrund sichtbar sein * Verwendet oft Akzentfarbe oder neutrales Grau ### **Farben für Produktinformationen** **Farbe des Produktnamens** * Farbe für Produktnamen * In der Regel neutral (schwarz, dunkelgrau) für Lesbarkeit * Sollte guten Kontrast für Barrierefreiheit beibehalten **Farbe des Produktpreises** * Farbe für Preisinformationen * Passt oft zur Produkttitel-Farbe für Konsistenz * Kann Akzentfarbe verwenden, um Preise hervorzuheben ### **Farben der Produkt-Badges** Jeder Badge-Typ hat separate Steuerungen für Text- und Hintergrundfarbe: **Vorbestell-Badge** * Textfarbe und Hintergrundfarbe * Verwendet oft Blau- oder neutrale Töne * Sollte deutlich „bald erhältlich“ kommunizieren **Ausverkauft-Badge** * Textfarbe und Hintergrundfarbe * Verwendet typischerweise Grau oder gedämpfte Farben * Kommuniziert Nichtverfügbarkeit klar **Im Angebot-Badge** * Textfarbe und Hintergrundfarbe * Verwendet üblicherweise Rot, Orange oder Markenakzent * Erzeugt Dringlichkeit und hebt Einsparungen hervor **Farbe des Vergleichspreises** * Farbe für durchgestrichene Originalpreise * Typischerweise grau oder gedämpft, um weniger zu betonen * Sollte lesbar, aber weniger prominent als der Verkaufspreis sein *** ## 📏 Erweiterte Abstandskontrollen ### **Abschnittsabstände** **Oberer Abstand** * Desktop: Bereich 0–200px, Standard 20px * Mobil: Bereich 0–100px, Standard 16px * Steuert den Abstand über dem gesamten Abschnitt **Unterer Abstand** * Desktop: Bereich 0–200px, Standard 20px * Mobil: Bereich 0–100px, Standard 16px * Steuert den Abstand unter dem gesamten Abschnitt ### **Interner Abstand** **Abstand von Kopfzeile zu Produkten** * Bereich: 8–80px, Standard 32px * Abstand zwischen Abschnittstitel und Produktgitter * Hilft, visuelle Trennung und Luft zu schaffen **Bild-zu-Info-Abstand** * Bereich: 8–80px, Standard 24px * Vertikaler Abstand zwischen Produktbild und Textinformationen * Beeinflusst die visuelle Verbindung zwischen Bild und Details **Abstand Titel zu Preis** * Bereich: 4–40px, Standard 8px * Abstand zwischen Produktname und Preisangabe * Halten Sie ihn minimal für kompakte Informationsgruppierung **Produktabstand** * Desktop: Bereich 8–160px, Standard 16px * Mobil: Bereich 8–160px, Standard 16px * Horizontaler Abstand zwischen Produkten im Karussell *** ## 🚀 Wie Produktempfehlungen funktionieren ### **Shopifys Algorithmus** Der Bereich Verwandte Produkte verwendet Shopifys Machine-Learning-Algorithmus, um zu bestimmen, welche Produkte angezeigt werden: **Empfehlungsfaktoren:** * Produkte, die häufig zusammen gekauft werden * Produkte, die in derselben Sitzung zusammen angesehen werden * Ähnliche Produktkategorien und Tags * Komplementäre Produktbeziehungen * Kundenverhaltensmuster **Automatische Aktualisierungen:** * Empfehlungen verbessern sich mit der Zeit, wenn mehr Daten gesammelt werden * Keine manuelle Konfiguration für Produktbeziehungen erforderlich * Der Algorithmus passt sich saisonalen Trends und Kundenpräferenzen an ### **Fallback-Verhalten** Wenn nicht genügend Daten für Empfehlungen vorhanden sind: * Kann der Abschnitt Produkte aus derselben Kollektion anzeigen * Zufällige Produkte aus dem Shop-Inventar können erscheinen * Der Abschnitt kann ausgeblendet werden, wenn keine geeigneten Produkte gefunden werden *** ## 📱 Mobiloptimierung ### **Responsives Design** **Mobil-Layout** * Passt automatisch die Produkte pro Reihe für Mobilbildschirme an * Touch-freundliche Navigation mit Wischgesten * Optimierte Abstände für Touch-Ziele **Leistungsoptimierung** * Lazy Loading für verbesserte Seitenladegeschwindigkeit * Komprimierte Bilder für schnellere Ladezeiten * Minimales JavaScript für sanftes Scrollen **Benutzererlebnis** * Sanftes Momentum-Scrollen * Klare visuelle Indikatoren für weitere Produkte * Leicht antippbare Produktbilder und Informationen *** ## 💡 Best Practices ### **Content-Strategie** **Platzierung des Abschnitts** * Fügen Sie ihn nahe dem Ende der Produktseiten hinzu * Platzieren Sie ihn nach dem Hauptproduktinhalt, aber vor der Fußzeile * Erwägen Sie, ihn nach Produktbewertungen hinzuzufügen, falls verfügbar **Produktinformationen** * Zeigen Sie immer Produkttitel zur Klarheit an * Schließen Sie Preise für ein transparentes Einkaufserlebnis ein * Verwenden Sie Badges strategisch, um wichtige Informationen hervorzuheben ### **Design-Empfehlungen** **Visuelle Hierarchie** * Halten Sie den Abschnittstitel klar, aber nicht dominant * Stellen Sie sicher, dass Produktbilder im Mittelpunkt stehen * Verwenden Sie konsistente Abstände im gesamten Abschnitt **Farbstrategie** * Wahren Sie Marken-Konsistenz mit den bestehenden Farben der Produktseite * Stellen Sie ausreichenden Kontrast für Barrierefreiheit sicher * Verwenden Sie Verkaufs-Badges sparsam, um Wirkung zu erhalten ### **Performance-Überlegungen** **Bildoptimierung** * Stellen Sie sicher, dass verwandte Produkte optimierte Bilder haben * Verwenden Sie konsistente Seitenverhältnisse für visuelle Harmonie * Komprimieren Sie Bilder, ohne Qualität zu opfern **Lade-Strategie** * Abschnitt lädt nach dem Hauptproduktinhalt * Sanfter Fallback, falls Empfehlungen nicht geladen werden * Geringe Auswirkungen auf die Seitenladegeschwindigkeit *** ## 🔧 Fehlerbehebung ### **Abschnitt erscheint nicht** **Produktstatus prüfen** * Stellen Sie sicher, dass Sie eine tatsächliche Produktseite anzeigen (nicht eine Kollektion) * Verifizieren Sie, dass das Produkt veröffentlicht und verfügbar ist * Prüfen Sie, dass der Shop mehrere Produkte für Empfehlungen besitzt **Theme-Konfiguration** * Bestätigen Sie, dass der Abschnitt zur Produktvorlage hinzugefügt wurde * Vergewissern Sie sich, dass der Abschnitt nicht ausgeblendet oder deaktiviert ist * Prüfen Sie, dass die Empfehlungslimits für Produkte nicht auf 0 gesetzt sind ### **Keine Produkte werden angezeigt** **Datenanforderungen** * Der Shop benötigt ausreichend Produktdaten für Empfehlungen * Der Algorithmus benötigt Zeit, um Kundenverhaltensmuster zu lernen * Erwägen Sie, Produkte manuell zu Kollektionen hinzuzufügen als Fallback **API-Einschränkungen** * Shopifys Recommendations-API hat tägliche Limits * Stark frequentierte Shops können gelegentlich leere Abschnitte sehen * Die Algorithmus-Leistung verbessert sich mit Alter und Traffic des Shops ### **Styling-Probleme** **Responsive Probleme** * Testen Sie auf echten mobilen Geräten, nicht nur durch Browser-Vergrößerung/-Verkleinerung * Prüfen Sie, dass die Mobilabstandswerte angemessen sind * Verifizieren Sie, dass Touch-Ziele groß genug für einfache Interaktion sind **Farbkontrast** * Stellen Sie sicher, dass Text auf gewählten Hintergründen lesbar bleibt * Testen Sie mit Barrierefreiheits-Tools auf WCAG-Konformität * Berücksichtigen Sie unterschiedliche Lichtverhältnisse bei mobiler Anzeige *** ## 📊 Performance-Auswirkungen ### **Ladeverhalten** **Asynchrones Laden** * Abschnittsinhalte laden nach dem ersten Rendern der Seite * Blockiert nicht den Hauptinhalt der Produktseite * Gedeihliches Herunterfallen bei fehlgeschlagenen API-Aufrufen **Datennutzung** * Minimale zusätzliche Datenübertragung * Zwischengespeicherte Produktinformationen, wenn möglich * Optimierte API-Aufrufe an Shopifys Server ### **SEO-Überlegungen** **Inhaltswert** * Bietet zusätzliche interne Verlinkungsmöglichkeiten * Hilft Suchmaschinen, Produktbeziehungen zu verstehen * Kann die Verweildauer auf der Seite verbessern und die Absprungrate senken **Seitenladezeit** * Geringe Auswirkungen auf die Kern-Metriken der Seitenladezeit * Abschnitt lädt schrittweise * Optimiert für mobile Core Web Vitals *** Der Bereich Verwandte Produkte ist ein leistungsfähiges Werkzeug, um den Umsatz zu steigern und das Kundenerlebnis zu verbessern. Bei richtiger Konfiguration kann er den durchschnittlichen Bestellwert deutlich erhöhen und gleichzeitig echten Mehrwert für Kunden bieten, indem relevante Produktoptionen hervorgehoben werden. ### **Brauchen Sie Hilfe?** * 💬 **Treten Sie unserer Community auf Discord bei:** * 📧 **Schreiben Sie uns eine E-Mail an:** * 💻 **Chatten Sie live mit uns:** Verfügbar Montag–Freitag, 10:00–18:00 EST, direkt auf unserer Website --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.openspaces.design/german/readme-1/sections-and-features/related-products-section.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.