Widerrufsformular als Akkordeon im Shopify Horizon Footer – vollständige Anleitung
Warum ein eigenes Widerrufsformular?
Das EU-Widerrufsrecht verlangt, dass Kunden ihren Vertrag einfach und unkompliziert widerrufen können. Viele Shopify-Themes bieten dafür keine native Lösung. Mit dieser Anleitung baust du ein vollständiges Formular direkt in deinen Footer – als elegantes Akkordeon, das sich per Klick öffnet.
Das Beste: Der E-Mail-Versand läuft komplett kostenlos über EmailJS – bis zu 200 Mails pro Monat, ohne Server-Setup.
Was wird gebaut?
- Eine neue Section widerrufs-section.liquid im Footer
- Nativer Horizon-Button als Akkordeon-Toggle (zentriert, Farbschema-konform)
- Formular mit allen rechtlich relevanten Feldern
- Automatischer E-Mail-Versand via EmailJS an Betreiber UND Kunden
- Inline-Bestätigung nach dem Absenden (kein Seitenreload)
- Vollständig im Theme Editor konfigurierbar
Schritt-für-Schritt Anleitung
EmailJS einrichten
Erstelle ein kostenloses Konto auf emailjs.com. Unter Email Services verbindest du deinen Mail-Provider via SMTP. Danach erstellst du zwei Templates: eines für dich als Betreiber, eines für die automatische Kundenbestätigung.
Section-Datei erstellen
Im Shopify Code-Editor unter sections eine neue Datei widerrufs-section.liquid erstellen. Den vollständigen Code aus dem Prompt unten generieren lassen und einfügen.
{% schema %}
{
"name": "Widerrufsformular",
"settings": [
{ "type": "color_scheme", "id": "color_scheme",
"label": "Farbschema", "default": "scheme-1" },
{ "type": "text", "id": "title",
"label": "Titel", "default": "Vertrag widerrufen" },
{ "type": "richtext", "id": "widerrufsbelehrung",
"label": "Widerrufsbelehrung" },
{ "type": "select", "id": "button_style",
"options": [
{"value": "primary", "label": "Primär"},
{"value": "secondary", "label": "Sekundär"},
{"value": "tertiary", "label": "Tertiär"}
], "default": "primary" },
{ "type": "text", "id": "button_label",
"default": "Widerruf verbindlich erklären" }
]
}
{% endschema %}
Nativer Horizon-Button
Der Toggle-Button und der Absende-Button verwenden die nativen Horizon CSS-Klassen. Dadurch passt sich die Farbe automatisch an das gewählte Farbschema an – kein Inline-CSS nötig.
<div style="display: flex; justify-content: center;">
<button
class="button button--{{ section.settings.button_style }}">
{{ section.settings.button_label }}
</button>
</div>
EmailJS einbinden
Das SDK wird direkt in der Section geladen. Die Initialisierung erfolgt erst nach dem Laden der Seite, damit keine Race-Condition entsteht.
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
<script>
window.addEventListener('load', function() {
emailjs.init('DEIN_PUBLIC_KEY');
});
function handleWiderrufSubmit(event, id) {
event.preventDefault();
var templateParams = {
vorname: ..., nachname: ..., email: ...,
bestellnummer: ..., kaufdatum: ...,
produkt: ..., grund: ...
};
emailjs.send('SERVICE_ID', 'TEMPLATE_BETREIBER', templateParams)
.then(function() {
return emailjs.send('SERVICE_ID', 'TEMPLATE_KUNDE', templateParams);
})
.then(function() {
form.style.display = 'none';
success.style.display = 'block';
});
}
</script>
In den Footer einbinden
Im Theme Editor unter Footer → Add section → Widerrufsformular auswählen. Shopify schreibt den JSON-Eintrag automatisch. Alternativ manuell in config/footer-group.json:
"widerrufs_section": {
"type": "widerrufs-section",
"settings": {
"color_scheme": "scheme-1",
"title": "Vertrag widerrufen"
}
},
"order": ["...", "widerrufs_section", "..."]
Bekannte Einschränkungen
Vollständiger Prompt
Kopiere den folgenden Prompt und füge ihn direkt in Claude oder ChatGPT ein. Ersetze vorher alle [PLATZHALTER] mit deinen eigenen EmailJS-Werten (siehe Tabelle darunter).
Ich betreibe einen Shopify-Shop mit dem Horizon-Theme.
Erstelle eine Section sections/widerrufs-section.liquid
mit folgenden Eigenschaften:
AKKORDEON:
- Toggle-Button zentriert, nativer Horizon-Button (button--primary)
- Button-Stil (primary/secondary/tertiary) im Theme Editor waehlbar
- Button-Beschriftung im Theme Editor konfigurierbar
- Oeffnen/Schliessen per reinem JavaScript (kein jQuery)
- Animation via max-height Transition
INHALT (ausgeklappt):
- Konfigurierbarer Widerrufsbelehrungstext (type: richtext)
- Widerrufsformular mit folgenden Pflichtfeldern:
* Vorname, Nachname (zweispaltig)
* E-Mail-Adresse (name="email" fuer EmailJS)
* Bestellnummer, Kaufdatum (zweispaltig)
* Produkt / Beschreibung der Bestellung
* Grund des Widerrufs (optional, kein required)
- Absende-Button zentriert, nativer Horizon-Button
- Inline-Bestaetigung nach Absenden (kein Seitenreload)
E-MAIL VERSAND via EmailJS:
- EmailJS SDK: https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js
- Public Key: [DEIN_PUBLIC_KEY]
- Service ID: [DEINE_SERVICE_ID]
- Template Betreiber: [TEMPLATE_ID_BETREIBER]
- Template Kunde: [TEMPLATE_ID_KUNDE]
- templateParams Felder: vorname, nachname, email,
bestellnummer, kaufdatum, produkt, grund
- Erst Betreiber-Mail, dann Kunden-Mail senden
- emailjs.init() via window.addEventListener("load", ...)
SCHEMA-SETTINGS:
- color_scheme (color_scheme, default: scheme-1)
- title (text, default: "Vertrag widerrufen")
- widerrufsbelehrung (richtext)
- button_style (select: primary/secondary/tertiary, default: primary)
- button_label (text, default: "Widerruf verbindlich erklaeren")
BUTTON-CODE (fuer Toggle UND Absenden):
<div style="display: flex; justify-content: center;">
<button class="button button--{{ section.settings.button_style }}">
{{ section.settings.button_label }}
</button>
</div>
EINBINDUNG footer-group.json:
"widerrufs_section": {
"type": "widerrufs-section",
"settings": {
"color_scheme": "scheme-1",
"title": "Vertrag widerrufen"
}
}
Im order-Array an gewuenschter Position einfuegen.
BEKANNTE EINSCHRAENKUNG:
- custom_liquid-Bloecke funktionieren nicht in _product-details
- Section ausserhalb von main einbinden - im Footer korrekt
- Komplett Inline-CSS, kein externes Stylesheet
Platzhalter ersetzen
Diese Werte findest du in deinem EmailJS-Dashboard:
| Platzhalter | Wo findest du den Wert? |
|---|---|
| [DEIN_PUBLIC_KEY] | EmailJS → Account → API Keys → Public Key |
| [DEINE_SERVICE_ID] | EmailJS → Email Services → dein Service |
| [TEMPLATE_ID_BETREIBER] | EmailJS → Email Templates → Widerruf Betreiber |
| [TEMPLATE_ID_KUNDE] | EmailJS → Email Templates → Widerruf Kunde |