Skip to main content
⚠️ Belangrijke mededeling Het onderstaande themasnippet is van toepassing op beide versies van de Upcart-cartmodules — het zorgt ervoor dat Shopify de knoppen voor versnelde checkout op de pagina rendert, en dat is wat Upcart nodig heeft, ongeacht de moduleversie. De selector .additional-checkout-buttons hieronder is Shopify’s eigen class op de container voor versnelde checkout, geen Upcart-moduleclass, en is dus hetzelfde op beide cartversies.

​
Overzicht

Soms zijn express checkout-knoppen niet klikbaar of verschijnen ze niet in Upcart. Dit is een veelvoorkomend probleem dat wordt veroorzaakt door de manier waarop Shopify de rendering van express payment-knoppen binnen thema’s regelt. Deze handleiding legt uit waarom dit gebeurt en wat je kunt doen om het op te lossen.

​
Vereiste setup voor de nieuwe module

⚠️ Belangrijk: deze stappen gelden voor de nieuwe Express Payments-module in Upcart, niet voor de legacy-versie. Om express checkout-knoppen correct te laten werken in Upcart, moet je een klein codesnippet aan je Shopify-thema toevoegen. Zonder dit snippet laadt Shopify de betaalknoppen niet goed in de cart drawer. Controleer voordat je deze wijzigingen doorvoert of de relevante betaalmethoden (bijv. Shop Pay, PayPal, Apple Pay, Google Pay) zijn ingeschakeld in de accountinstellingen van je Shopify Admin. Zonder deze methoden in te schakelen, zijn de knoppen niet zichtbaar. Zorg er bovendien voor dat het snippet direct onder de openende <body>-tag in je themabestand wordt geplaatst (bijv. <body class="...">). Bij verkeerde plaatsing, zoals na de sluitende </body>-tag, functioneren de express checkout-knoppen mogelijk niet goed.

​
Hoe los je het op

  1. Ga naar je Shopify Admin.
  2. Ga naar Online Store > Themes > Edit Code.
  3. Open layout/theme.liquid, zoek de <body>-regel en voeg het onderstaande snippet toe op een nieuwe regel direct daaronder. Het moet daar staan — niet in cart-drawer.liquid of ergens anders — omdat de knoppen aanwezig moeten zijn op elke pagina waar de cart kan openen.
  1. Sla je wijzigingen op en ververs je storefront.
  2. Open de cart drawer opnieuw om te controleren of de express checkout-knoppen (zoals Shop Pay, PayPal, Apple Pay of Google Pay) nu verschijnen en klikbaar zijn.
Raadpleeg de gids Express Payments-module voor volledige installatie-instructies.

​
Waarom dit gebeurt

Express payment-knoppen worden volledig beheerd door Shopify, niet door Upcart. Dit betekent:
  • Upcart rendert geen eigen knoppen. Het kloont Shopify’s knoppen voor versnelde checkout vanaf de pagina naar de cart drawer, en daarom moeten ze überhaupt op de pagina aanwezig zijn — dat is wat het themasnippet hierboven garandeert.
  • Apple Pay wordt alleen getoond op Apple-apparaten waarop Apple Pay is ingesteld.
  • Upcart bepaalt niet welke express-knoppen verschijnen, aangezien de inhoud en functionaliteit door Shopify worden afgehandeld.
🎨 Opmerking:
De knoppen in Upcart fungeren als visuele containers, terwijl Shopify hun weergave en gedrag regelt. Upcart kan hun uiterlijk of functie niet aanpassen.

​
Veelvoorkomende problemen en oplossingen

​
1. De knoppen worden niet op de pagina gerenderd

Dit is de meest voorkomende oorzaak. Upcart kloont Shopify’s knoppen van de pagina, dus als de pagina ze niet rendert, valt er niets te klonen en toont de cart een lege ruimte. Wat te doen:
  • Voeg het themasnippet uit Hoe los je het op hierboven toe, direct onder de <body>-regel in layout/theme.liquid.
Verwijder de express-knoppen van je thema niet om “een conflict te vermijden”. Upcart is afhankelijk van hun aanwezigheid. Als je ze uit het thema verwijdert of uitschakelt in de themainstellingen, verwijder je de bron waaruit Upcart kloont — waardoor dit probleem erger wordt, niet beter.

​
3. CSS blokkeert de knoppen

Sommige thema’s verbergen express-knoppen standaard met CSS. Bijvoorbeeld:
Wat te doen:
  • Controleer de CSS van je thema.
  • Vraag je themadeveloper om te controleren of er geen CSS-regels zijn die de knoppen in de Upcart-drawer verbergen of uitschakelen.

​
4. Legacy-instellingen zitten in de weg

Als je de oudere versie van de Express Payments-module hebt gebruikt, kunnen opgeslagen instellingen conflicteren met de nieuwe setup. Wat te doen:
  • Open de oude Express Payments-module (indien nog zichtbaar).
  • Haal het vinkje weg bij eerdere opties en sla op.
  • Test opnieuw met de nieuwe module.

​
Nog steeds problemen?

​
Shadow DOM uitschakelen in Upcart

In sommige gevallen laden of updaten express payment-knoppen niet omdat Shadow DOM is ingeschakeld in Upcart. Wat is Shadow DOM?
Shadow DOM isoleert Upcart van de rest van de code van je winkel om de stabiliteit te verbeteren. In zeldzame gevallen kan deze scheiding echter voorkomen dat de express-knoppen van Shopify correct worden bijgewerkt. Zo schakel je Shadow DOM uit:
  1. Ga naar Upcart > Cart Editor > Settings > Cart settings en klap Advanced Settings uit.
  2. Haal het vinkje weg bij Render Cart in Shadow DOM.
  3. Sla op en test opnieuw.
⚠️ Belangrijk:
Test je cart altijd na het uitschakelen van Shadow DOM, omdat dit invloed kan hebben op hoe andere apps of thema-elementen met Upcart samenwerken. 💡 Opmerking: het uitschakelen van Shadow DOM kan dit probleem oplossen, maar kan CSS-conflicten met je thema introduceren. Zie het document over de Shadow DOM-instelling voor de volledige afweging.

​
Meer hulp nodig?

Als het probleem aanhoudt na het uitvoeren van deze stappen:
  • Neem contact op met je themadeveloper om conflicterende code of instellingen te helpen verwijderen.
  • Je kunt ook contact opnemen met een Shopify Expert voor geavanceerde thema-aanpassingen of integratiehulp.

​
Referenties

  • Shopify Help – Accelerated Checkouts
  • Shopify Dev Docs – Express Payment Buttons