In Webflow, you drag a “Code Embed” element onto the product page template and paste the widget code. The addresses of the GARAN labels can come from CMS fields.
The code for Webflow
<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>Set further options such as display and language in the code builder.
Step by step in Webflow
- Open the product template
In the Designer, open the “Products Template” under Pages. - Add a Code Embed
Drag the “Code Embed” element from the Add panel below the Add to Cart button. - Paste the code
Paste the widget code and save. - Publish
Publish the site. Embedded scripts do not run in the Designer itself.
Things to know about Webflow
- Code Embed requires a paid Site or Workspace plan.
- If you load content by script (such as lists with “Load more”), call
window.garantielabelWidget.rendern()afterwards so that new placeholders are drawn.
Legal guarantee notice in the order confirmation
According to the Commission’s guidelines, the notice should also appear in the confirmation email. You customise the order emails of Webflow Ecommerce in the Ecommerce settings under the email templates. The official graphic can be added there as an image. A plain link is unlikely to count as a durable medium (CJEU, Case C-49/11, Content Services); the safest way is to put the notice directly in the email as an image, text or attachment. You will find the official files on our download page.
Producer guarantee? Then add the GARAN label
If the producer gives a commercial guarantee of durability of more than two years free of charge for the whole good, the GARAN label also belongs on the product page. With the GARAN label generator you create it in seconds from years, brand and model, free and without sign-up. With a free account, you get an embed code with permanent image URLs below the finished label: you upload nothing and paste it into Webflow as shown above.
Prefer your own files? Then upload the full and the nested version to the media library of Webflow and enter the addresses in the widget code:
<div data-garantielabel
data-garan-voll="https://…/GARAN-MX-500.svg"
data-garan-klein="https://…/GARAN-MX-500-nested.svg"></div>The widget then shows the nested version below the legal guarantee notice, and one click opens the full GARAN label.
Frequently asked questions
Can I see the widget in the Designer?
No, Webflow does not run embedded scripts in the Designer. Check the published site.
Does it also work without Webflow Ecommerce?
Yes. The widget works on any page with a Code Embed, such as an information page or the footer.
Can I use CMS fields?
Yes. In the Code Embed you can insert CMS fields via “Add Field”, for example the addresses of the GARAN labels in data-garan-voll and data-garan-klein.