Hinzufügen eines Widerrufsbuttons im Footer

Für Shop-Version 26.05.0 und höher

Schritt-für-Schritt-Anleitung

Ü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 Textlink zur Seite mit der Widerrufsbelehrung. Die Schritte sind für beide Themes identisch.

Es gibt drei Möglichkeiten, den Button hinzuzufügen:

  • Methode 1 – über den Content Manager (Fußzeilen-Spalte)
  • Methode 2 – über Content Zones mit StyleEdit
  • Methode 3 – durch Installation des Widerrufsbutton-Store-Moduls

Voraussetzungen

  • Abschnittsbezeichnung: Widerrufsrecht
  • Ein Link mit hervorgehobenem (Button-)Stil, beschriftet mit Vertrag widerrufen
  • Ein zweiter Link zur Seite Widerrufsbelehrung

Ausgangspunkt

Standardmäßig zeigt Fußzeilen-Spalte 4 einen Platzhaltertext.

Abbildung 1 – Standard-Footer mit Platzhaltertext in Fußzeile 4.

 

Endergebnis

Nach Abschluss der folgenden Schritte zeigt Fußzeilen-Spalte 4 den Abschnitt „Widerrufsrecht" mit einem gestalteten Button und einem Textlink.

Abbildung 2 – Zielergebnis: der Bereich

 

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.

 

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.

Figure 5 – 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.

Figure 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.

Figure 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

Method 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.

Figure 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.

Methode 3 – Widerrufsbutton-Store-Modul

Alternativ kann der Widerrufsbutton durch Herunterladen und Installieren des Widerrufsbutton-Moduls 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.

Ergebnis

Nach dem Speichern zeigt der Footer den Abschnitt "Widerrufsrecht" mit einem klar gekennzeichneten Button und dem unterstützenden Textlink an, was die gesetzlichen Anzeigeanforderungen erfüllt (siehe Abbildung 2).

Zurück