Kennisgeving over de wettelijke garantie toevoegen in Webflow

De code voor Webflow

<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

Meer opties, zoals weergave en taal, stel je in met de codebouwer.

Stap voor stap in Webflow

1. Open het productsjabloon
   Open in de Designer onder Pages het ‘Products Template’.
2. Voeg een Code Embed toe
   Sleep het element ‘Code Embed’ uit het Add-paneel onder de knop Add to Cart.
3. Plak de code
   Plak de widgetcode en sla op.
4. Publiceer
   Publiceer de site. In de Designer zelf worden ingesloten scripts niet uitgevoerd.

De menunamen geven we in het Engels, zoals in de Engelse beheeromgeving.

Goed om te weten over Webflow

• Voor Code Embed heb je een betaald Site- of Workspace-abonnement nodig.
• Laad je content via een script (zoals lijsten met ‘Load more’), roep daarna window.garantielabelWidget.rendern() aan, zodat nieuwe placeholders worden getekend.

Waar de kennisgeving komt in Webflow

Producten in Webflow Ecommerce zijn een Collection, net als in het CMS. De “Products Template” is de Collection-pagina daarvan. Een Code Embed daar verschijnt op elke productpagina, en daarin kun je productvelden in de code invoegen. Je kunt ook code toevoegen aan een rich-text-element: zet je cursor op de juiste plek, open het invoegmenu met het plusicoon en klik op de knop voor aangepaste code.

Voor een kennisgeving op elke pagina maak je van je footer een component. Webflow noemt navigatiebalken en footers als typische voorbeelden. Een Code Embed in dit component verschijnt overal waar het component wordt gebruikt. Wijzigingen aan het hoofdcomponent werken door in elke instantie.

De scriptregel kan ook op één centrale plek staan: onder “Site settings → Custom code”, in het gedeelte “Footer code”. Webflow voegt hem dan toe vóór de afsluitende </body>-tag van elke pagina en raadt deze plek aan voor scripts, omdat de pagina eerst haar inhoud laadt. Voor één pagina heeft “Page settings” een gedeelte “Before </body> tag”. De placeholder moet wel in het ontwerp staan.

Varianten en modelidentificatie in Webflow Ecommerce

Varianten ontstaan uit maximaal drie optiesets per product, met maximaal 50 varianten per product. Webflow behandelt elke variant als een apart product met eigen velden, waaronder SKU, prijs en afbeelding. Elke variant telt bovendien mee voor de itemlimiet van je Site plan.

Eigen velden, bijvoorbeeld voor de adressen van de GARAN-labels, voeg je toe in de instellingen van de Products Collection. Zo’n veld hoort bij het product. Belangrijk: volgens Webflow worden dynamische embeds met Ecommerce-velden niet bijgewerkt op basis van de variant die een bezoeker kiest. Een GARAN-label uit een productveld blijft dus voor alle varianten hetzelfde. Hebben je varianten verschillende modelidentificaties, maak dan voor elk model een apart product aan. Elke productpagina toont dan het bijbehorende label.

Veelvoorkomende valkuilen in Webflow

• Het element Code Embed en aangepaste code in Site settings en Page settings vereisen een Core-, Growth-, Agency- of Freelancer-Workspace of een actief Site plan.
• Voor een <script> in een embed toont de Designer alleen een placeholder. De code draait in de preview, maar werkt pas live nadat je hebt gepubliceerd. In de uitgevouwen canvasweergave (expand canvas view) draait aangepaste code helemaal niet.
• Zet geen <html>-, <head>- of <body>-tags in aangepaste code. Volgens Webflow breekt dat de lay-out.
• Nieuw gepubliceerde Webflow-sites bevatten al jQuery 3.5.1. Volgens Webflow kan het importeren van een andere versie conflicten veroorzaken. De widget heeft geen jQuery nodig.
• Een Code Embed kan tot 50.000 tekens bevatten, net als de codegedeelten voor head en footer. De widgetcode blijft daar ver onder, ook met GARAN-adressen.

Meer bronnen

• Webflow Help: Custom code embed (Engelstalig)
• Webflow Help: Custom code in head and body tags (Engelstalig)
• Webflow Help: Use dynamic data in custom code embeds (Engelstalig)
• Webflow Help: Create product options and variants (Engelstalig)
• Webflow Help: Ecommerce Collections overview (Engelstalig)
• Webflow Help: Components overview (Engelstalig)

Kennisgeving over de wettelijke garantie in de orderbevestiging

Volgens de richtsnoeren van de Commissie hoort de kennisgeving ook in de bevestigingsmail. De ordere-mails van Webflow Ecommerce pas je aan in de Ecommerce-instellingen bij de e-mailsjablonen. De officiële afbeelding kun je daar als afbeelding toevoegen. Een losse link telt waarschijnlijk niet als duurzame gegevensdrager (Hof van Justitie van de EU, zaak C-49/11, Content Services); het veiligst zet je de kennisgeving direct in de e-mail, als afbeelding, tekst of bijlage. De officiële bestanden vind je op onze downloadpagina.

Producentengarantie? Voeg dan het GARAN-label toe

Geeft de producent kosteloos een commerciële levensduurgarantie van meer dan twee jaar voor het hele product, dan hoort ook het GARAN-label op de productpagina. Met de GARAN-labelgenerator maak je het in een paar seconden uit het aantal jaren, het merk en het model, je eerste 3 labels gratis en zonder registratie. Onder elk klaar label krijg je een insluitcode met vaste afbeeldings-URL's: je uploadt niets en plakt hem in Webflow zoals hierboven beschreven.

Liever je eigen bestanden? Upload dan de volledige en de geneste versie naar de mediabibliotheek van Webflow en vul de adressen in de widgetcode in:

<div data-garantielabel
  data-garan-voll="https://…/GARAN-MX-500.svg"
  data-garan-klein="https://…/GARAN-MX-500-genest.svg"></div>

De widget toont dan de geneste versie onder de kennisgeving over de wettelijke garantie, en één klik opent het volledige GARAN-label.

Veelgestelde vragen