In Webflow ziehen Sie ein Element „Code Embed“ auf die Vorlage der Produktseite und setzen den Widget-Code ein. Die Adressen der GARAN-Labels können aus CMS-Feldern kommen.
Der Code für Webflow
<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>Weitere Optionen wie Darstellung und Sprache stellen Sie im Code-Baukasten ein.
Schritt für Schritt in Webflow
- Produktvorlage öffnen
Im Designer unter Pages die Vorlage „Products Template“ öffnen. - Code Embed einfügen
Aus dem Add-Panel das Element „Code Embed“ unter den Add-to-Cart-Button ziehen. - Code einsetzen
Den Widget-Code einfügen und speichern. - Veröffentlichen
Die Seite veröffentlichen. Im Designer selbst laufen eingebettete Skripte nicht.
Besonderheiten in Webflow
- Code Embed setzt einen bezahlten Site- oder Workspace-Tarif voraus.
- Laden Sie Inhalte per Skript nach (etwa Listen mit „Mehr laden“), rufen Sie danach
window.garantielabelWidget.rendern()auf, damit neue Platzhalter gezeichnet werden.
Gewährleistungslabel in der Bestellbestätigung
Laut Leitlinien der Kommission soll der Hinweis auch in der Bestätigungs-E-Mail stehen. Die Bestellmails von Webflow Ecommerce passen Sie in den E-Commerce-Einstellungen unter den E-Mail-Vorlagen an. Dort lässt sich die amtliche Grafik als Bild ergänzen. Ein bloßer Link reicht als dauerhafter Datenträger voraussichtlich nicht (EuGH, Rs. C-49/11); am sichersten steht der Hinweis als Bild, Text oder Anhang direkt in der Mail. Die amtlichen Dateien finden Sie im Download.
Herstellergarantie? Dann gehört das GARAN-Label dazu
Gibt der Hersteller eine kostenlose Haltbarkeitsgarantie von mehr als zwei Jahren auf die ganze Ware, gehört zusätzlich das GARAN-Label auf die Produktseite. Mit dem GARAN-Label-Generator erstellen Sie es in Sekunden aus Jahren, Marke und Modell. Das erste Label ist kostenlos.
Laden Sie die vollständige und die geschachtelte Fassung in die Medienverwaltung von Webflow und tragen Sie die Adressen im Widget-Code ein:
<div data-garantielabel
data-garan-voll="https://…/GARAN-MX-500.svg"
data-garan-klein="https://…/GARAN-MX-500-geschachtelt.svg"></div>Das Widget zeigt dann die geschachtelte Fassung unter dem Gewährleistungslabel, ein Klick öffnet das vollständige GARAN-Label.
Häufige Fragen
Sehe ich das Widget im Designer?
Nein, Webflow führt eingebettete Skripte im Designer nicht aus. Prüfen Sie die veröffentlichte Seite.
Geht das auch ohne Webflow Ecommerce?
Ja. Auf jeder Seite mit Code Embed funktioniert das Widget, etwa auf einer Info-Seite oder im Footer.
Kann ich die Felder aus dem CMS nehmen?
Ja. Im Code Embed lassen sich CMS-Felder über „Add Field“ einsetzen, etwa die Adressen der GARAN-Labels in data-garan-voll und data-garan-klein.