Produktkarussell-Abschnitt
Was Sie lernen werden
Wie man Produkte in einem horizontal scrollbaren Layout anzeigt
Wie man Produktetiketten, Preise und Abzeichen anpasst
Wie man Produktabstände, Typografie und Farben anpasst
Wie man Desktop- und Mobil-Layout-Präferenzen festlegt
🧩 Abschnittsübersicht
Der Produktkarussell-Bereich zeigt eine scrollbare Reihe vorgestellter Produkte. Er ist ideal, um eine bestimmte Kollektion zu bewerben oder Bestseller hervorzuheben. Produkte können Preise, Etiketten (wie „Sale“ oder „Ausverkauft“) und benutzerdefinierte Layouteinstellungen enthalten.
So fügen Sie den Abschnitt hinzu
Im Shopify Theme-Editor, klicken Sie Sektion hinzufügen
Wählen Sie Produkt-Karussell
Ziehen Sie den Abschnitt per Drag & Drop an die gewünschte Stelle auf der Seite
Inhalts- & Daten-Einstellungen
Sektionsüberschrift: Fügen Sie eine Überschrift für das Karussell hinzu (z. B. „Vorgestellte Produkte“)
Text des Shop-Links: Fügen Sie eine Call-to-Action-Schaltfläche hinzu (z. B. „Alle anzeigen“)
Shop-Link-URL: Fügen Sie einen Link zu einer Kollektion oder Seite ein
Layout- & Anzeigeoptionen
Textausrichtung der Produkte: Titel links, zentriert oder rechts ausrichten
Schalten Sie die folgenden Optionen um:
Produkttitel anzeigen
Produktpreise anzeigen
„Vergleichspreis anzeigen“
„Ausverkauft“-Abzeichen anzeigen
„Sale“-Abzeichen anzeigen
„Vorbestellung“-Abzeichen anzeigen
💡 Tipp: Aktivieren Sie Abzeichen, um Rabatte oder Lagerstatus hervorzuheben.
Produkte pro Reihe – Desktop: Wählen Sie, wie viele Produkte angezeigt werden sollen (1–6)
Produkte pro Reihe – Mobil: Wählen Sie zwischen 1–3 Produkten
Typografie-Steuerungen
Passen Sie Schriftgrößen unabhängig für Desktop und Mobil an:
Abschnittsüberschrift
Produktname
Produktpreis
Optional: Umschalten Fett Stile für:
Sektionsüberschrift
Link „Ansehen“
Produktname
Farb-Anpassung
Hintergrundfarbe: Transparent, einfarbig oder Markenfarbe
Farbe des Abschnittstitels & Links
Pfeilfarbe (Navigationspfeile)
Farbe des Produktnamens
Farbe des Produktpreises
Etikettenfarben für jedes Abzeichen:
Vorbestellung
Ausverkauft
Im Angebot
Vergleichspreis
Jedes Abzeichen hat beides:
Textfarbe
Hintergrundfarbe
⚠️ Achten Sie darauf, dass Text- und Hintergrundfarben deutlich kontrastieren, damit die Lesbarkeit gewährleistet ist.
Abstandseinstellungen
Sie können die Abstände anpassen, um ein besseres visuelles Gleichgewicht auf verschiedenen Bildschirmgrößen zu erreichen.
Desktop
Oberer Abstand: 20px
Unterer Abstand: 20px
Mobil
Oberer Abstand: 16px
Unterer Abstand: 16px
Zusätzliche Steuerungen:
Abstand zwischen Abschnittsüberschrift und Produkten
Abstand zwischen Produktbild und Informationen
Abstand zwischen Produkttitel und Preis
Abstand zwischen Produkten (Desktop und Mobil)
Navigationskontext
Verwende die Navigationskontext Einstellung, um festzulegen, in welcher Kollektion Kunden bleiben, wenn sie auf ein Produkt klicken.
Zum Beispiel:
Wenn auf „Sommerkollektion“ eingestellt, bleibt der Kunde beim Klicken auf ein Produkt innerhalb dieser Kollektion.
Wenn dies nicht festgelegt ist, führt ein Klick auf ein Produkt die Nutzer zur standardmäßigen Produktseite ohne Kolektionskontext.
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