> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Aan de slag met Upcart-aanpassingen

> Leer hoe je HTML, CSS en JavaScript gebruikt om custom functies en styling in je cart drawer te bouwen.

⚠️ **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.](/nl/upcart/upcart_v20_migration_guide)

Bekijk de overige aanpassingsdocumentatie voor V2.0-oplossingen.

<div id="overview">
  # Overzicht
</div>

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](/nl/upcart/upcart_customization_policy), zodat je weet wat wel en niet door ons team wordt ondersteund.

<div id="add-content-with-html">
  ## Content toevoegen met HTML
</div>

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
```

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-html-thank-you-message.gif?s=a22b53d145994e29c3e327b272e1ce33" alt="Upcart Custom HTML-editor waarmee een bedankbericht boven de checkout-knop wordt toegevoegd" width="2060" height="1080" data-path="images/upcart/customizations-custom-html-thank-you-message.gif" />

***

<div id="add-logic-with-javascript">
  ## Logica toevoegen met JavaScript
</div>

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](/nl/upcart/limit_the_cart_to_one_upsell_at_a_time):**

```
<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>
```

<Note>
  **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.
</Note>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-html-hide-upsells.gif?s=eec41b0784bb4db819ee4ae1cd8a25e5" alt="Upcart Custom HTML Scripts Before Load-editor met JavaScript dat de upsells-module verbergt" width="2060" height="1080" data-path="images/upcart/customizations-custom-html-hide-upsells.gif" />

***

🔧 **Opmerking voor developers:**\
Upcart biedt volledige [Public API-documentatie](https://rokt.notion.site/upcart-public-api) 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.

***

<div id="style-your-cart-with-css">
  ## Je cart stylen met CSS
</div>

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;  
}
```

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-css-editor-styling.gif?s=f676b9eef6e30c6c122028c0e7a38b6e" alt="Upcart Custom CSS-editor die de kleur van de upsell-titel stylet met een bevestiging dat de wijzigingen zijn opgeslagen" width="2060" height="1080" data-path="images/upcart/customizations-custom-css-editor-styling.gif" />

***

<div id="additional-resources">
  ## Aanvullende bronnen
</div>

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

* [W3Schools](https://www.w3schools.com/)
* [Codecademy](https://www.codecademy.com/?g_network=g\&g_productchannel=\&g_adid=528849219280\&g_locinterest=\&g_keyword=codecademy\&g_acctid=243-039-7011\&g_adtype=\&g_keywordid=kwd-41065460761\&g_ifcreative=\&g_campaign=account\&g_locphysical=9001394\&g_adgroupid=70492864474\&g_productid=\&g_source=%7Bsourceid%7D\&g_merchantid=\&g_placement=\&g_partition=\&g_campaignid=1726903838\&g_ifproduct=\&utm_id=t_kwd-41065460761:ag_70492864474:cp_1726903838:n_g:d_c\&utm_source=google\&utm_medium=paid-search\&utm_term=codecademy\&utm_campaign=INTL_Brand_Exact\&utm_content=528849219280\&g_adtype=search\&g_acctid=243-039-7011\&gad_source=1\&gad_campaignid=1726903838\&gbraid=0AAAAAon8KZFBIKQJ4KKGpsSVHO3yi2Njl\&gclid=CjwKCAjwx-zHBhBhEiwA7Kjq61-cNVEH2PzXZCcjcqIZS-0mCe8EEyPBJYyj4QRn5bma8OMqd3IJrBoCwjoQAvD_BwE)
* [Mozilla Developer Network (MDN)](https://developer.mozilla.org/en-US/)

<div id="support-for-customizations">
  ## Ondersteuning voor aanpassingen
</div>

Het supportteam van Upcart kan niet helpen bij het implementeren van custom code. Voor geavanceerdere wijzigingen raden we aan om een [Shopify Expert](https://www.shopify.com/ca/partners/directory) in te huren.