Bereich Verwandte Produkte
Für Plain Jane und Plain Jane Interactive
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
Gehen Sie zu Onlineshop > Themes > Anpassen
Navigieren Sie zu Produkte > Standardprodukt
Scrollen Sie nach unten zum Ende der Abschnittsliste
Klicken Sie Sektion hinzufügen
Wählen Sie Produktempfehlungen oder Verwandte Produkte
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: https://discord.gg/hcc2GvgZc6
📧 Schreiben Sie uns eine E-Mail an: [email protected]
💻 Chatten Sie live mit uns: Verfügbar Montag–Freitag, 10:00–18:00 EST, direkt auf unserer Website
Zuletzt aktualisiert