Standardmäßig endet ein Produkt-Slider an der Kante seines Containers. Du kannst die benachbarten Produkte stattdessen angeschnitten anzeigen lassen — so sieht der Kunde auf den ersten Blick, dass es weitergeht.
In dieser Anleitung erfährst du, wie du den Überlauf global einstellst und wie du ihn für einzelne CMS-Blöcke abweichend setzt.
Schritt 1: Darstellungsart wählen
- Öffne die Theme-Konfiguration deines Themes
- Wechsel in den Tab "Erlebniswelten"
- Öffne den Bereich "Produkt-Slider (Kategorie 'Commerce')"
- Wähle im Abschnitt "Design" die gewünschte "Darstellungsart"
- Speichere deine Änderungen
Zur Auswahl stehen vier Darstellungsarten:
| Darstellungsart | Wirkung |
|---|---|
| Aus (Standard) | Die Produkte enden an der Containerkante |
| Angeschnitten | Die Nachbarprodukte sind innerhalb des Containers angeschnitten sichtbar |
| Überlaufend | Die Nachbarprodukte ragen über den Container hinaus |
| Angeschnitten und überlaufend | Beides kombiniert |
Info: Die Einstellung gilt für alle Produkt-Slider in deinem Shop, also auch für das Cross-Selling auf den Produktseiten.
Schritt 2: Anschnitt anpassen
Im Abschnitt "Basiskonfiguration" kannst du den Anschnitt weiter anpassen.
Angeschnittene Produkte
Steuert, ob die angeschnittenen Nachbarprodukte abgeblendet dargestellt werden. Abgeblendete Produkte sind nicht anklickbar — sobald ein Produkt vollständig sichtbar ist, ist es wieder anklickbar.
Anschnitt-Breite
Wie viel von den Nachbarprodukten zu sehen ist, legst du getrennt für Desktop und mobile Geräte fest:
- "Anschnitt-Breite @Desktop (>=992px)" — Standard: 30 Pixel
- "Anschnitt-Breite @Mobil (<992px)" — Standard: 20 Pixel
Info: Beide Werte greifen nur bei den Darstellungsarten mit Anschnitt.
Schritt 3: Einzelne CMS-Blöcke abweichend einstellen
Du musst dich nicht für den ganzen Shop festlegen. Über eine CSS-Klasse am CMS-Block kannst du einzelne Produkt-Slider anders darstellen lassen.
- Öffne die Erlebniswelt im CMS-Editor
- Klicke auf den CMS-Block mit dem Produkt-Slider, um ihn auszuwählen
- Wechsel rechts in der Sidebar in den Tab "Block-Einstellungen"
- Öffne dort den Abschnitt "Layout"
- Trage im Konfigurationsfeld "CSS-Klassen" die gewünschte Klasse ein
- Speichere die Änderungen deiner Erlebniswelt
| CSS-Klasse | Darstellungsart |
|---|---|
twt-cms-product-slider-reset |
Aus |
twt-cms-product-slider-peek |
Angeschnitten |
twt-cms-product-slider-overflow-visible |
Überlaufend |
twt-cms-product-slider |
Angeschnitten und überlaufend |
Tipp: Mit twt-cms-product-slider-reset nimmst du die globale Einstellung für diesen einen Block zurück. So kannst du zum Beispiel global den Überlauf aktivieren und ihn auf einer bestimmten Seite trotzdem abschalten.
Wenn der Überlauf nicht sichtbar ist
In zwei Fällen wird der Überlauf bewusst unterdrückt, weil die Nachbarprodukte sonst in benachbarte Inhalte ragen würden. Der Anschnitt bleibt dabei erhalten:
- Der Produkt-Slider steht in einem mehrspaltigen CMS-Block — die Produkte würden sonst in die andere Spalte laufen
- Der Produkt-Slider steht in einer Sidebar-Sektion
Möchtest du den Überlauf an dieser Stelle sehen, setze den Produkt-Slider in einen einspaltigen CMS-Block.
Weiterführende Informationen
Wie du einem CMS-Block eine CSS-Klasse zuweist, erfährst du in folgender Anleitung:
CMS-Block individuell stylen