Hinzufügen eines Widerrufsbuttons im Footer
Für Shop-Version 26.05.0 und höher
Schritt-für-Schritt-Anleitung für die Einhaltung von § 356a BGB
Übersicht
Diese Anleitung erklärt, wie ein rechtlich konformer Abschnitt „Widerrufsrecht" in die Shop-Fußzeile eingefügt wird. Der Abschnitt enthält einen gestalteten Button mit Link zum Widerrufsformular sowie einen Text-Link zur Seite mit der Widerrufsbelehrung.
Welche Option gilt für dich?
Option 1
Der Widerrufsbutton kann durch Herunterladen und Installieren des "Widerruf-Button im Footer" aus dem Store hinzugefügt werden. Nach der Installation fügt das Modul den Button hinzu, ohne dass eine manuelle Bearbeitung der Fußzeileninhalte oder Theme-Stile erforderlich ist.
Abbildung 1 – Standard-Footer mit Platzhaltertext in Fußzeile 4.
Sobald das Modul installiert ist, kann das Erscheinungsbild in den Moduleinstellungen angepasst werden.
Abbildung 1a – Einstellungen des Widerruf-Buttons
Option 2
Wenn du Shop-Version 26.05.0 oder neuere verwendest, kannst du den Anweisungen folgen, um notwendige Änderungen an deiner Vorlage vorzunehmen.
Ergebnis:
Nach Abschluss der untenstehenden Schritte zeigt Spalte 4 in Fuß den Abschnitt "Widerrufsbelehrung " mit einem gestalteten Button und einem Text-link:
Abbildung 2 – Zielergebnis: der Bereich "Recht auf Rücktritt" mit dem stilisierten Button "Vertrag widerrufen".
Methode 1 – Via Content Manager
Diese Methode fügt den Button durch Bearbeitung des Footer-Spalten-Elements im Content Manager hinzu.
Schritt 1 – Als Admin anmelden
Öffne den Shop und melde dich mit einem Administratorkonto ein.
Abbildung 3 – Anmeldung im Shop.
Step 2 – Content Manager öffnen
Navigiere im Adminbereich zu Inhalte → Content Manager und öffne den Tab Elemente.
Abbildung 4 – Content Manager, Reiter Elemente.
Step 3 – Edit Footer Spalte 4
Scrolle zum Footer-Abschnitt , fahre mit der Maus über Footer-Spalte 4 und klicke auf das Bearbeiten-(Bleistift-)Symbol.
Abbildung – Footer element list – edit Footer column 4.
Step 4 –Labels und Inhalte für jede Sprache aktualisieren
Setzen Sie die Überschrift auf Widerrufsrecht und stellen Sie sicher, dass Sichtbar aktiviert ist. Wiederholen Sie dies für jeden Sprach-Tab (z. B. Deutsch und Englisch)
Step 5 – HTML snippet einfügen
Wechseln Sie im Inhaltseditor in den HTML-Modus und fügen Sie folgendes Snippet in das Inhaltsfeld ein::
<ul class="footer-withdrawal">
<li><a class="btn btn-withdrawal" href="withdrawal.php">Vertrag widerrufen</a></li>
<li><a href="shop_content.php?coID=3889895">Widerrufsbelehrung</a></li>
</ul>
Hinweis: Passen Sie den coID-Wert (im Beispiel 3889895) so an, dass er mit der Inhaltsseite-ID der Seite "Recht auf Abhebung" in Ihrem eigenen Shop übereinstimmt.
Abbildung 6 – Content editor mit Anzeige der Widerruf Links.
Step 6 – Element speichern
Klicke auf aktualisieren zum Speichern der Änderungen.
Button-Styling
Das Button-Styling kann direkt im Theme-Editor angepasst werden, ohne CSS schreiben zu müssen.
Widerrufsbutton-Panel öffnen
Gehe zu Inhalt → Theme bearbeiten → Bereiche (stelle sicher, dass der Expertenmodus aktiviert ist) und öffne das Panel WIDERRUF-BUTTON.
Abbldung 7 – Bereiche tab im Expertenmodus – Widerruf Button Panel
Button-Stile anpassen
Nutze die verfügbaren Optionen, um den Button zu gestalten – Innenabstand, Schriftgröße, Schriftstärke, Textumwandlung, Textdekoration, Hintergrund- und Textfarben (inkl. Hover-Zustände), Hover-Textdekoration und den Button-Grenzradius. Passe diese an das Design deines Shops an.
Abbildung 8 – Designoptionen für den Widerrufsbutton.
Zusätzliches custom CSS (optional)
Wenn du Styling brauchst, die über das Panel hinausgeht, kannst du trotzdem benutzerdefiniertes CSS über das Thememenü (⋮) hinzufügen → SCSS/CSS bearbeiten. Verwende dazu die Class .btn.btn-withdrawal
Methode 2 – via Content Zones (StyleEdit)
Diese Methode fügt den Widerrufsbutton direkt im Fußzeilen-Layout über Content Zones in StyleEdit ein..
Schritt 1 – Als Admin einloggen
Öffne den Shop und melde dich mit einem Administratorkonto an.
Abbildung 9 – Login im Shop.
Schritt 2 – Theme öffnen (StyleEdit)
Navigiere im Adminbereich zu Inhalte → Theme bearbeiten, um StyleEdit zu starten.
Abbildung 10 – Inhaltsmenü: Thema bearbeiten.
Schritt 3 – Stelle die Footer Variante auf Individuell ein
Navigiere zu Bereiche → Footer → Varianten und wähle die individuelle Variante.
Abbildung 11 – Footer Variants – Individuell.
Schritt 4 – Warte, bis der neue Footer geladen ist
Der Footer lädt mit bearbeitbaren Content Zones neu, wobei für jede Spalte ein HTML-Widget angezeigt wird.
Abbildung 12 – Fuß mit bearbeitbaren Inhaltszonen.
Schritt 5 – Bearbeite das HTML-Widget für Footer-Spalte 4
Im HTML-Widget für Spalte 4 klicke auf das Bearbeiten (Bleistift)-Symbol.
Abbildung 13 – Bearbeite das HTML-Widget der Spalte.
Schritt 6 – Snippet für jede Sprache einfügen
Füge das Snippet in das Widget ein und verwende die richtigen Labels für jede Sprache. Für Deutsch:
<ul class="footer-withdrawal">
<li><a class="btn btn-withdrawal" href="withdrawal.php">Vertrag widerrufen</a></li>
<li><a href="shop_content.php?coID=3889895">Widerrufsbelehrung</a></li>
</ul>
Hinweis: Halte die Labels sprachkonform (English: Withdraw from contract / Right of withdrawal, German: Vertrag widerrufen / Widerrufsbelehrung), und passe die CoID auf die Widerrufsrecht Seite deines Werks an.
Schritt 7 – Speichern
Klicke auf Speichern. Die Änderungen werden veröffentlicht und können auf der Live-Seite überprüft werden.