.png){kind=logo}
.png){kind=small}
.png){kind=logo}
.png){kind=logo}
.png){kind=logo}
.png){kind=logo}
.png){kind=logo}
.png){kind=logo}
Toolbox: #011 · Fokus: Plain · Dropper
Problem
Ich nutze JTL-Shop 5.7 und möchte den eingebauten Widerrufsbutton an einer anderen Stelle platzieren, optisch anpassen oder durch eine eigene Lösung ersetzen - aber die Shop-Bordmittel lassen das kaum zu.
Seit Juni 2026 ist die elektronische Widerrufsfunktion für B2C-Onlineshops Pflicht. JTL-Shop 5.7 bringt dafür eine eigene Basislösung mit: Button im Footer mit Weiterleitung auf das neu einführte Online-Widerrufsformular.
Was fehlt: Flexibilität. Position, Button-Stil und Verlinkung sind fest vorgegeben und lassen sich ohne Eingriff ins Template kaum steuern.
Lösung
Mit Dropper und einem Plain Drop kannst du den Standard-Widerrufsbutton "verschieben" und auch die Optik anpassen. Ganz ohne dein Template abzuändern oder zu erweitern - also updatesicher.
In der Dropper-Zone
In unserer Live-Demo wird der native JTL-Widerrufsbutton per Plain Drop ersetzt und an einer anderen Stelle im Footer platziert. Die JTL-Seite für das Online-Widerrufsformular bleibt dabei erhalten und wird auch vom neuen Button verlinkt.
Schritt für Schritt
- Plain Drop mit dem gewünschten Button-Code (HTML + Smarty) anlegen.
- Button auf die bestehende JTL-Seite für das Online-Widerrufsformular verlinken.
- Plain Drop mit den Dropper-Einfügemethoden an der gewünschten Zielstelle einfügen.
- Wenn du den vorhandenen Button direkt ersetzen möchtest: Drop per CSS-Selektor
#footer .btn.withdrawal-linkeinfügen und den vorhandenen Button ersetzen.
in Dropper Gold & Ultimate
Nutze alle Drops in unseren Flatrates oder wähle gezielt, was du brauchst.
Wissenswert
Wenn du die JTL-Lösung komplett entfernen möchtest, um eine andere Methode zu nutzen, vergiss nicht, auch die Eigene Seite "Online-Widerrufsformular" zu entfernen. Bis zur JTL-Shop Version 5.8 musst du diesen Workaround gehen, da keine native Konfigurationsoption zum Deaktivieren des Buttons existiert. Siehe zugehörige JTL-Issue SHOP-9629.
Wenn du Button, Formular, Popup und Mailversand komplett selbst steuern möchtest, ist die native JTL-Lösung nicht mehr der Weg. Dann passt eher die vollständige eigene Lösung aus Toolbox #007.
Wenn du den Button optisch näher an dein Theme bringen möchtest, kannst du ihm im Plain Drop auch ein
Drop Icon
mitgeben. Im Beispiel passiert das über den Smarty-Modifier
drop_icon, etwa mit
{"kk-icon-fa5-undo"|drop_icon}. Dropper gibt das Icon dabei als SVG aus, sodass du kein zusätzliches Icon-Markup oder Font-Library-Snippet in dein Template kopieren musst. Die passenden Icon-Namen findest du in der
Drop-Icons-Dokumentation.
Das
Online-Widerrufsformular
kommt auch etwas schmucklos daher. Mit den passenden Selektoren kannst du es natürlich auch mit Dropper & Drops erweitern oder ersetzen:
@opc.opc_before_revocation_form
und
@opc.opc_after_revocation_form
(Bereich vor und danach) oder auch
#online-revocation-form
(komplettes Formualr inkl. AGB).
Man könnte auch etwas elegantere
Block-Selektoren nutzen, um den JTL-Button anzusprechen (@template.block:snippets-withdrawal-link). Das ist jedoch eine Variante für versiertere Nutzer und vielleicht eher Stoff für einen späteren Beitrag.
Ressourcen
| Format | Ressource (Link) |
|---|---|
| Demo | Live-Demo: JTL-Widerrufsbutton flexibel anpassen |
| Dokumentation | Drops einfügen · CSS Selektoren · Drop Icons · JTL-Guide: Widerrufsbelehrung und Widerrufsformular einrichten |
| Blog | JTL-Blog: Widerrufsbutton 2026 |
| JTL-Issue | SHOP-9629 - Widerrufsbutton aktivieren/deaktivieren |
| Test & Shop | Plain Drop in unserem Store · Dropper in unserem Store · Dropper Ultimate im JTL-Extension Store |
| Toolbox | TB007 - Widerrufsbutton im JTL-Shop · TB009 - JTL-Shop ohne Child-Template anpassen |