Portlet Produkte Slider

Stand vom 28. Februar 2025

Auf dieser Seite finden Sie einen Überblick über die Möglichkeiten des DC-Portlets: Portlet Produkte Slider für den OnPage Composer des JTL-Shops.

Mit diesem Portlet können Sie ein Produkte Slider erstellen. Hier werden ausgewählte Produkte mit Slider funktion angezeigt. Das Portlet eignet sich besonders gut für Call-to-Action.

Produkte Slider erstellen

Schritt-für-Schritt-Anleitung:

1. Melden Sie sich im Backend von JTL-Shop an und wechseln Sie in das Frontend von JTL-Shop.

2. Öffnen Sie die Seite, die Sie bearbeiten möchten, und klicken Sie auf das OnPage Composer-Icon oben links auf der Seite, um den OnPage Composer für die Seite zu öffnen.

3. Ziehen Sie das Portlet im Container den Produkte Slider im Onpage Composer an eine beliebige Stelle. Es öffnet sich das Fenster Produkte Slider bearbeiten.

4. Geben Sie den Titel für das ganze Element ein

5. Im SKU Filter können Sie Artikelnummer der Produkte, die Sie im Slider sehen möchten, eingeben. Andersrum, steht Ihnen Möglichkeit zur Verfügung, schon bereitstehende Filter (Besondere Artikel, Preisspanne, Bewertungen) zu aktivieren, die dann die entprechenden Produkte in den Slider ziehen. 

6. Im Reiter "Slider Einstellungen" können Sie die Geschwindigkeint eingeben, mit der die Slider sich wechseln. Beim "Automatischen Abspielen" geht es darum, nach wieviel Zeit der Slider sich automatisch wechseln wird. Bitte beachten Sie, dass die Option erst nach dem Anhaken der unterliegenden Option "Automatisches Abspielen" aktiviert wird

7. Wenn die Option "Punkte" aktiviert ist, werden die Positioniereungspunkte unter dem Slider angezeigt

8. Beim Aktivieren der Option "Unendlich" wird der Slider immer nach dem Ablauf zum Anfang zurückgesetzt. 

9. Wenn Sie es ermöglichen möchten, Slider manuell zu wechseln, aktivieren Sie die Option "Pfeil". Dann werden oben rechst zwei Pfeile angezeigt.

10. Bei den Optionen "Anzahl Produkte" können Sie entscheiden, wieviel Produkte pro Slider auf dem Bildschirm jedes Gerättyps angezeigt werden soll. 

11. Im Reiter "Slider Farbe und Schrift" finden Sie die Einstellungen, die für die allgemeinen Sliderelemente verwendent werden. 

12. Wählen Sie die gewünschte Farbe bei der Option "Titel Textfarbe". Es geht hier um das folgende Element:

13. Sie können auch die Schriftgröße des Titels im gleichen Reiter unten bei der Option "Titel Schriftgröße" eingeben

14. Wählen Sie die gewünschte Farbe für die Unterstreichungslinie unter dem Titel.

15. Wählen Sie die gewünschten Farben für Pfeilenelemente:

Pfeilenfarbe:	Pfeilrahmenfarbe:	Pfeilhintergrundfarbe:
Pfeilenfarbe (Mouseover):	Pfeilrahmenfarbe (Mouseover):	Pfeilhintergrundfarbe (Mouseover):

16. Wählen Sie die gewünschten Farben für Kreiselemente:

17. Im Reiter "Card Farbe und Schrift" können Sie alle produktkartebezogenen Farben ändern:

Warenkorb Symbolfarbe Button:	Warenkorb Hintergrundfarbe Button	Warenkorb Symbolfarbe Button (Mouseover):
Warenkorb Hintergrundfarbe Button (Mouseover):	Vergleichsbutton Symbolfarbe:	Vergleichsbutton Hintergrundfarbe:
Vergleichsbutton Symbolfarbe (Mouseover):	Vergleichsbutton Hintergrundfarbe (Mouseover):	Wunschliste Symbolfarbe Button:
Wunschliste Hintergrundfarbe Button:	Wunschliste Symbolfarbe Button (Mouseover):	Wunschliste Hintergrundfarbe Button (Mouseover):
Wunschliste Symbolfarbe Button (aktiviert):	Wunschliste Hintergrundfarbe Button (aktiviert):	Produktübersicht Symbolfarbe Button:
Produktübersicht Hintergrundfarbe Button:	Produktübersicht Symbolfarbe (Mouseover):	Produktübersicht Hintergrundfarbe Button (Mouseover):
Artikeltitel Textfarbe:	neuer Preis Textfarbe:	neuer Preis Betragsfarbe:
alter Preis Betragsfarbe:	alter Preis Textfarbe:	Rabatt Textfarbe:
Rabatt Betragsfarbe:	Sternfarbe:

18. Klicken Sie auf Speichern.