In Magento 2 or Adobe Commerce, you create a CMS block with the widget code and place it on all product pages with a widget instance.
The code for Magento / Adobe Commerce
<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 Magento / Adobe Commerce
- Create a CMS block
Under Content → Blocks, create a new block and paste the widget code. From version 2.4.3, Page Builder opens; use the “HTML Code” element there. - Create a widget
Under Content → Widgets, create a widget of the type “CMS Static Block” for your theme. - Place it
As the layout update, choose “All Product Types” and select the container “Product View Extra Hint”. It sits below the add-to-cart button. - Flush the cache
Save, flush the cache and check a product page.
Things to know about Magento / Adobe Commerce
- With an active Content Security Policy (module Magento_Csp),
www.garantielabel.appmust be on the whitelist for scripts, images and connections. - JavaScript bundling and minification should not include the external script.
Legal guarantee notice in the order confirmation
According to the Commission’s guidelines, the notice should also appear in the confirmation email. You maintain email templates under Marketing → Email Templates. The official graphic can be added as an image to the “New Order” template. 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 Magento / Adobe Commerce as shown above.
Prefer your own files? Then upload the full and the nested version to the media library of Magento / Adobe Commerce 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 do it with layout XML?
Yes. Developers add the block via layout XML in catalog_product_view.xml.
Does it work with Hyvä?
Yes. The widget does not depend on RequireJS or Knockout and also runs in Hyvä themes.
Do I have to flush the cache?
Yes, after creating the widget, otherwise the block only appears later.