Kennisgeving wettelijke garantie in Squarespace: widget

In Squarespace voeg je de kennisgeving over de wettelijke garantie met een codeblok toe aan je productpagina's, bijvoorbeeld in de aanvullende informatie onder het product.

De code voor Squarespace

<div data-garantielabel data-darstellung="voll"></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 Squarespace

Open het product
Bewerk het product in Commerce of op de winkelpagina.
Voeg een codeblok toe
Voeg in het gedeelte met aanvullende informatie een codeblok toe.
Plak de code
Plak de widgetcode, laat ‘Display Source’ uitgeschakeld en sla op.
Laad het script centraal
Je kunt de regel met widget.js ook één keer laden via de Code Injection van de winkelpagina. De placeholder moet dan nog steeds in elk product staan.

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

Goed om te weten over Squarespace

JavaScript in codeblokken werkt in de abonnementen Core, Plus en Advanced en in de oudere abonnementen Business, Commerce Basic en Commerce Advanced, niet in Basic of Personal.
Codeblokken worden in de voorvertoning van de editor niet altijd uitgevoerd; controleer de live pagina.

Waar de kennisgeving komt in Squarespace

Squarespace scheidt winkelpagina’s (store pages), die alle producten in een raster tonen, van de productdetailpagina’s (product details pages) van afzonderlijke producten. De kennisgeving hoort op de productdetailpagina. Waar je codeblok daar verschijnt, hangt af van de versie van je site:

Versie 7.1: extra informatie voeg je toe als paginasectie op de productdetailpagina. Volgens Squarespace verschijnt die onderaan de pagina, even breed als de overige inhoud.
Versie 7.0: in de producteditor kun je onder “Additional Info” elk blok toevoegen, ook codeblokken. In de meeste templates staan die direct onder de hoofdafbeeldingen van het product. Galapagos toont in plaats daarvan een link “More Info”, en Supply opent de extra informatie in een overlay.

Voor een kennisgeving op elke pagina gebruik je de footer. Volgens Squarespace verschijnt de inhoud daarvan op alle pagina’s van je site. Klik in versie 7.1 op een willekeurige pagina op “Edit”, beweeg over de footer en klik op “Edit footer”. Voeg daar een codeblok toe.

De scriptregel kan centraal in het paneel Code Injection staan, in het veld “Footer”. Hij wordt dan vóór de afsluitende </body>-tag van elke pagina ingevoegd. De placeholder hoort wel in een codeblok op de pagina.

Varianten en modelidentificatie in Squarespace

Varianten voeg je toe in de producteditor, in het gedeelte “Inventory”. Een product kan tot zes opties en 250 variantcombinaties hebben. Elke variant heeft een eigen SKU, plus een eigen prijs, voorraad, gewicht en eigen afbeeldingen. Variantafbeeldingen verschijnen zodra klanten de variant op de productdetailpagina kiezen.

Extra informatie hoort daarentegen bij het product. Een codeblok daar toont hetzelfde voor alle varianten. Voor het GARAN-label betekent dit: hebben je varianten verschillende modelidentificaties, maak dan voor elk model een apart product aan. Elk codeblok bevat dan de adressen van het bijbehorende label.

Veelvoorkomende valkuilen in Squarespace

Afrekenpagina’s (checkout) ondersteunen geen aangepaste code. De widget toont tijdens het afrekenen dus niets.
Code voor één pagina (pagina-instellingen → “Advanced”) komt in de <head> van de pagina. Squarespace raadt af daar HTML toe te voegen: die verdwijnt als je de transparantie van de header uitzet. Zet daar hooguit de scriptregel, nooit de placeholder.
Code op een pagina binnen een index wordt mogelijk niet weergegeven, en code injection verschijnt niet op landingspagina’s van een index.
Als beveiligingsmaatregel toont Squarespace ingesloten code soms niet zolang je bent ingelogd. Controleer de pagina in een privévenster of klik op “Preview in Safe Mode”.
Laden via Ajax kan conflicteren met aangepaste code. Squarespace stelt voor Ajax uit te schakelen om dat te testen.
Blokkeert aangepaste code de editor, klik dan onderaan je site op “Disable Scripts in Preview”. Bezoekers zien de site nog steeds met de code.

Meer bronnen

Kennisgeving over de wettelijke garantie in de orderbevestiging

Volgens de richtsnoeren van de Commissie hoort de kennisgeving ook in de bevestigingsmail. In Squarespace pas je de orderbevestiging aan in de Commerce-instellingen bij de klant-e-mails. 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 Squarespace zoals hierboven beschreven.

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

<div data-garantielabel data-darstellung="voll"
  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

Moet ik het aan elk product toevoegen?

De placeholder wel, per product. Het script zelf kun je centraal laden via Code Injection.

Waarom de volledige weergave?

Dat is in Squarespace de robuustste optie. Badge en link werken echter ook.

Welk abonnement heb ik nodig?

Een abonnement waarin codeblokken JavaScript uitvoeren: Core, Plus of Advanced, of bij de oudere abonnementen Business of Commerce.

Verschijnt de extra informatie direct onder de winkelwagenknop?

Dat hangt af van de versie. In versie 7.1 verschijnt die onderaan de productdetailpagina, in versie 7.0 in de meeste templates direct onder de hoofdafbeeldingen van het product.

Waarom zie ik mijn codeblok niet, terwijl bezoekers het wel zien?

Als beveiligingsmaatregel toont Squarespace ingesloten code soms niet zolang je bent ingelogd. Open de pagina in een privévenster of gebruik “Preview in Safe Mode”.

Kan ik de kennisgeving ook bij het afrekenen tonen?

Niet met de widget. In Squarespace ondersteunen afrekenpagina’s geen aangepaste code.

Kennisgeving over de wettelijke garantie toevoegen in Squarespace