Dans Webflow, faites glisser un élément « Code Embed » dans le modèle de la page produit et collez le code du widget. Les adresses des labels GARAN peuvent provenir de champs du CMS.
Le code pour Webflow
<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>Vous réglez les autres options, comme l’affichage et la langue, dans le générateur de code.
Pas à pas dans Webflow
- Ouvrir le modèle de produit
Dans le Designer, sous Pages, ouvrez le modèle « Products Template ». - Insérer un Code Embed
Depuis le panneau Add, faites glisser l’élément « Code Embed » sous le bouton Add to Cart. - Coller le code
Collez le code du widget et enregistrez. - Publier
Publiez le site. Dans le Designer lui-même, les scripts intégrés ne s’exécutent pas.
Particularités de Webflow
- Code Embed nécessite un forfait Site ou Workspace payant.
- Si vous chargez du contenu par script (par exemple des listes avec « Charger plus »), appelez ensuite
window.garantielabelWidget.rendern()pour que les nouveaux emplacements soient dessinés.
La notice dans la confirmation de commande
Selon les lignes directrices de la Commission, la notice devrait aussi figurer dans l’e-mail de confirmation. Vous adaptez les e-mails de commande de Webflow Ecommerce dans les paramètres e-commerce, sous les modèles d’e-mail. Vous pouvez y ajouter le graphique officiel en image. Un simple lien ne suffira probablement pas comme support durable (CJUE, affaire C-49/11) ; le plus sûr est de placer la notice directement dans l’e-mail, en image, en texte ou en pièce jointe. Les fichiers officiels se trouvent sur la page de téléchargement.
Garantie du producteur ? Ajoutez le label GARAN
Si le fabricant offre une garantie commerciale de durabilité sans frais, de plus de deux ans et sur l’ensemble du bien, le label GARAN doit en plus figurer sur la fiche produit. Avec le générateur de label GARAN, vous le créez en quelques secondes à partir de la durée, de la marque et du modèle, gratuitement et sans inscription. Sous le label terminé, vous trouvez un code d’intégration avec des adresses d’image permanentes : rien à téléverser, il suffit de l’insérer dans Webflow comme ci-dessus.
Vous préférez vos propres fichiers ? Téléversez alors la version complète et la version imbriquée dans la médiathèque de Webflow et indiquez leurs adresses dans le code du widget :
<div data-garantielabel
data-garan-voll="https://…/GARAN-MX-500.svg"
data-garan-klein="https://…/GARAN-MX-500-imbrique.svg"></div>Le widget affiche alors la version imbriquée sous la notice sur la garantie légale ; un clic ouvre le label GARAN complet.
Questions fréquentes
Le widget est-il visible dans le Designer ?
Non, Webflow n’exécute pas les scripts intégrés dans le Designer. Vérifiez sur le site publié.
Est-ce possible sans Webflow Ecommerce ?
Oui. Le widget fonctionne sur toute page dotée d’un Code Embed, par exemple une page d’information ou le pied de page.
Puis-je reprendre les champs du CMS ?
Oui. Dans le Code Embed, vous insérez des champs du CMS via « Add Field », par exemple les adresses des labels GARAN dans data-garan-voll et data-garan-klein.