⚠️ Belangrijke mededeling De voorbeeldaanpassing in dit document werkt alleen met V1.0 van de Upcart-cartmodules. Als je je cart onlangs hebt geüpgraded naar Version 2, werkt deze aanpassingscode niet. Je moet dan de nieuwe selectors voor Version 2 gebruiken uit de migratiegids. Bekijk de overige aanpassingsdocumentatie voor V2.0-oplossingen.

Overzicht

Upcart geeft je volledige controle om het uiterlijk en gedrag van de cart aan te passen met Custom HTML, Custom CSS en JavaScript. Met deze tools kun je nieuwe functies toevoegen, je cart stylen in lijn met je merk of logica introduceren om de werking van je cart te verbeteren. Deze gids behandelt de basisprincipes van elk onderdeel en laat zien hoe je begint. Elke sectie bevat een kort visueel voorbeeld om te laten zien hoe wijzigingen er in de praktijk uitzien.

Bekijk voordat je begint het aanpassingsbeleid van Upcart, zodat je weet wat wel en niet door ons team wordt ondersteund.

Content toevoegen met HTML

HTML wordt gebruikt om statische content zoals tekst, banners of knoppen aan je cart toe te voegen. Je kunt kiezen uit meerdere HTML-locaties in de Custom HTML-editor (bijv. boven de checkout-knop, onderaan de cart, tussen items). Veelvoorkomende toepassingen:

Aangepaste berichten toevoegen
Juridische disclaimers of beleidslinks invoegen
Verzenddeadlines of leveringsinformatie uitlichten

Voorbeeld:

<div style="text-align: center; font-weight: bold;">  
  Thanks for shopping with us!  
</div

Upcart Custom HTML-editor waarmee een bedankbericht boven de checkout-knop wordt toegevoegd

Logica toevoegen met JavaScript

JavaScript regelt het gedrag en de logica van de cart. Je kunt het gebruiken om elementen te tonen of te verbergen, styling conditioneel toe te passen of realtime te reageren op cart-wijzigingen. Je plaatst je code in een <script>-tag en zet deze in Custom HTML > Scripts (Before Load) of Above Announcements, afhankelijk van wanneer de code moet draaien. Voorbeeld: Beperk de cart tot één upsell tegelijk:

<script>  
  // Show upsells again when upsells are removed  
  window.upcartSubscribeItemRemoved((event) => {  
    if (event.item?.properties?.__upcartUpsell) {  
      const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
      if (upsells) upsells.style.display = "block";  
    }  
  });  
  
  // Hide upsells once one is added  
  window.upcartSubscribeUpsellsAddedToCart(() => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    if (upsells) upsells.style.display = "none";  
  });  
  
  // Check for upsell in cart when it loads  
  window.upcartSubscribeCartLoaded((event) => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    const items = event.cart.items || [];  
    const hasUpsell = items.some(item => item?.properties?.__upcartUpsell);  
    if (upsells && hasUpsell) {  
      upsells.style.display = "none";  
    }  
  });  
</script>

Legacy-opmerking: de callbacks window.upcartOnItemRemoved, window.upcartOnAddUpsell en window.upcartOnCartLoaded werken nog steeds, maar zijn deprecated en loggen waarschuwingen in de console. Gebruik upcartSubscribeItemRemoved, upcartSubscribeUpsellsAddedToCart en upcartSubscribeCartLoaded voor alle nieuwe scripts.

Upcart Custom HTML Scripts Before Load-editor met JavaScript dat de upsells-module verbergt

🔧 Opmerking voor developers:
Upcart biedt volledige Public API-documentatie met alle functies, variabelen en best-practicepatronen die beschikbaar zijn voor geavanceerde aanpassingen. We raden aan deze te bekijken wanneer je complexere scripts of integraties bouwt.

Je cart stylen met CSS

CSS regelt de look-and-feel van elementen in je cart. Gebruik het om ruimte, kleuren en lettergroottes aan te passen of ongewenste elementen te verbergen. Custom CSS is een van de tabbladen onder Settings (achter More settings als de tabbladrij te vol is). Veelvoorkomende toepassingen:

De kleur van producttitels of knoppen wijzigen
Lettergrootte of uitlijning aanpassen
Ruimte tussen secties toevoegen

Voorbeeld: de kleur van de upsell-titel wijzigen in V1.0:

.upcart-upsells-title {  
  color: #C20075 !important;  
  font-size: 25px;  
  font-style: italic;  
  text-align: center;  
}

Upcart Custom CSS-editor die de kleur van de upsell-titel stylet met een bevestiging dat de wijzigingen zijn opgeslagen

Aanvullende bronnen

Wil je je HTML-, CSS- of JavaScript-vaardigheden verbeteren? Bekijk deze gratis tools:

Ondersteuning voor aanpassingen

Het supportteam van Upcart kan niet helpen bij het implementeren van custom code. Voor geavanceerdere wijzigingen raden we aan om een Shopify Expert in te huren.

Aan de slag

Winkelwagenmodules

Winkelwageninstellingen

Sticky winkelwagenknop

Multicart

Aanpassingen

Analytics

Integraties en compatibiliteit

Facturering en account

Probleemoplossing

Aan de slag met Upcart-aanpassingen

Overzicht

Content toevoegen met HTML

Logica toevoegen met JavaScript

Je cart stylen met CSS

Aanvullende bronnen

Ondersteuning voor aanpassingen

​Overzicht

​Content toevoegen met HTML

​Logica toevoegen met JavaScript

​Je cart stylen met CSS

​Aanvullende bronnen

​Ondersteuning voor aanpassingen

Overzicht

Content toevoegen met HTML

Logica toevoegen met JavaScript

Je cart stylen met CSS

Aanvullende bronnen

Ondersteuning voor aanpassingen