Custom HTML

In het gedeelte Custom HTML in Upcart kun je custom code invoegen in verschillende delen van de cart drawer.
Je kunt ook JavaScript schrijven met <script>-tags en met de cart communiceren via de Public API van Upcart (bijv. upcartOnCartLoaded (deprecated — use upcartSubscribeCartLoaded for new scripts)).

Waar vind je het

Ga naar: Cart Editor > Settings > Custom HTML

Hoe het werkt

Met de dropdown HTML Location kies je waar de code binnen de cart-lay-out verschijnt. Op basis van je selectie wordt de code in het bijbehorende cart-gedeelte geïnjecteerd. Je kunt dit gebruiken om het volgende toe te voegen:

Aangepaste berichten
Vertrouwensteksten
App-integraties
Analytics-snippets
Styling-hooks
Promotionele content, zoals banners met gepersonaliseerde aanbiedingen of kortingen
Productgaranties die het vertrouwen van klanten vergroten

Dynamische tokens

Je kunt het volgende token in elk Custom HTML-veld gebruiken om live cart-gegevens te injecteren:

Token	Wat het weergeeft
`{{UPCART_SUBTOTAL}}`	Het huidige subtotaal van de cart, opgemaakt in de valuta van je winkel

Voorbeeld:

<p>Your current total: <strong>{{UPCART_SUBTOTAL}}</strong></p>

Dit token werkt in alle HTML-locatievelden behalve Scripts (Before Load); daar gebruik je in plaats daarvan de JavaScript-API. Dit is het enige dynamische token dat beschikbaar is in Custom HTML-velden.

Beschikbare HTML-locaties


Locatie	Beschrijving
Above announcements/rewards	Bovenaan de cart, onder de cart-header.
Below header/announcements/rewards	Direct onder eventuele aankondigingen of beloningsbalken.
Between each line item	Geïnjecteerd onder elk product in de cart.
Below cart items	Direct onder de cart-regelitems, boven de onderste modules.
Above footer/add-ons	Onder cart-items en upsells, boven add-ons.
Above checkout button	In de footer, direct boven de checkout-knop en het subtotaal.
Below checkout button	In de footer, direct onder de checkout-knop.
Bottom of cart	Helemaal onderaan de drawer (buiten de footer).
On empty cart screen	Wordt weergegeven naast de tekst “Your cart is empty”.
Scripts (Before Load)	Onzichtbaar gebied om JavaScript uit te voeren voordat de cart laadt. Ideaal voor tracking, conditionele logica of aangepast gedrag.

Custom CSS (optioneel)

Je kunt je HTML stylen met de Custom CSS-editor die je vindt onder:
Upcart > Cart Editor > Settings > Custom CSS Bijvoorbeeld, om de uitlijning van een lege cart aan te passen:

[class*="styles_CartPreview__empty__"] { flex-direction: column; } [class*="styles_CartPreview__empty__"] h3 { margin: unset; }

Aan de slag

Winkelwagenmodules

Winkelwageninstellingen

Sticky winkelwagenknop

Multicart

Aanpassingen

Analytics

Integraties en compatibiliteit

Facturering en account

Probleemoplossing

Waar vind je het

Hoe het werkt

Dynamische tokens

Beschikbare HTML-locaties

Custom CSS (optioneel)

​Waar vind je het

​Hoe het werkt

​Dynamische tokens

​Beschikbare HTML-locaties

​Custom CSS (optioneel)

Waar vind je het

Hoe het werkt

Dynamische tokens

Beschikbare HTML-locaties

Custom CSS (optioneel)