> ## 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.

# Custom CSS

> Schrijf CSS om het ontwerp van je cart drawer aan te passen.

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

In dit gedeelte kun je de look-and-feel van bestaande cart-elementen wijzigen of stijlen toepassen op custom HTML die via de editor is toegevoegd.

<div id="where-to-find-it">
  ## **Waar vind je het**
</div>

Ga naar:\
**Upcart > Cart Editor > Settings > Custom CSS**\
Settings is een rij tabbladen; Custom CSS is er daar één van, naast Custom HTML. Als het niet zichtbaar is, staat het achter **More settings**.

<div id="how-it-works">
  ## **Hoe het werkt**
</div>

Je kunt CSS toevoegen om:

* Standaard cart-elementen te stylen
* Het uiterlijk van custom HTML aan te passen
* Ruimte, uitlijning, typografie en meer aan te passen

Terwijl je typt, stelt een **auto-complete-popup** geldige Upcart-selectors voor om het bewerken te versnellen. Als je een suggestie selecteert, wordt de regel automatisch aangevuld en helpt dit je om je code te structureren. Als wijzigingen niet zoals verwacht verschijnen, bekijk dan veelvoorkomende probleemoplossingssuggesties, zoals het verversen van caches in zowel de browser als de Upcart-editor, het controleren van de plaatsing van je CSS en het zorgen voor de juiste specificiteit in je CSS-regels.

<div id="using-selectors">
  ## **Selectors gebruiken**
</div>

Upcart biedt een breed scala aan custom selectors. Klik op **"Show list"** om alle beschikbare opties te bekijken. Vermijd het gebruik van globale selectors zoals `body`, `div` of `h3`, tenzij ze zijn gescoped met `.upcart-cart`, om onbedoelde wijzigingen aan je storefront te voorkomen. Als stijlen niet correct worden toegepast, kun je de CSS-specificiteit verhogen of `!important` aan je CSS-regels toevoegen. Zo weet je zeker dat ze conflicterende stijlen overschrijven. Voorbeeld:

```
.upcart-cart .upcart-checkout-button {    border-radius: 20px !important;    background-color: #CFA17E !important;    color: #1A1A1A !important;}
```

Voorbeeld (veilige selector):

```
.upcart-cart h3 { font-size: 20px; }
```

<div id="example-thank-you-message-styling">
  ## **Voorbeeld: styling van een bedankbericht**
</div>

Stel dat je deze custom HTML onder de checkout-knop hebt toegevoegd:

```
<div class="thank-you-message">Thanks for shopping with us!</div>
```

Zonder CSS ziet het bericht er kaal uit. Om het te stylen:

```css theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.thank-you-message { color: green; font-size: 16px; font-weight: bold; text-align: center; margin-top: 5px; }
```

<div id="common-problems-and-solutions">
  # Veelvoorkomende problemen en oplossingen
</div>

<div id="css-not-appearing-on-mobile-devices">
  ## CSS verschijnt niet op mobiele apparaten
</div>

Als je aangepaste tekst of stijlen niet zichtbaar zijn op mobiel:

* Ververs de pagina in zowel de **Upcart Editor** als je mobiele browser om gecachte versies te wissen.
* Zorg ervoor dat de laatst gepubliceerde cart-versie actief is.
* Controleer of de CSS is opgeslagen op het tabblad **Custom CSS** in **Upcart > Cart Editor > Settings**.

<div id="discrepancies-between-editor-and-live-store">
  ## Verschillen tussen editor en live winkel
</div>

Als stijlen correct worden weergegeven in de editor maar niet op de live site, kan het nodig zijn om de specificiteit van de selector te verhogen of `!important` toe te voegen aan belangrijke regels.

```
.upcart-cart .upcart-checkout-button { font-size: 18px !important; background: blue !important; color: white !important; }
```

<div id="incorrect-css-selector-usage">
  ## Onjuist gebruik van CSS-selectors
</div>

Controleer of de juiste class of ID wordt getarget. Gebruik altijd prefixes zoals `.upcart-` voor Upcart-specifieke elementen om onbedoelde resultaten te voorkomen. Als de stijl niet zoals verwacht wordt toegepast, controleer dan of de selector `.thank-you-message` daadwerkelijk het bedoelde HTML-element target en of de CSS-code op het juiste tabblad staat (Upcart > Cart Editor > Settings > Custom CSS).

***

Ondersteuning voor aanpassingen:

Upcart Support kan niet helpen bij het implementeren of debuggen van custom CSS. Voor geavanceerde stylinghulp raden we aan om samen te werken met een Shopify Expert. Voor het oplossen van problemen met custom CSS verwijzen we je naar het gedeelte met veelvoorkomende problemen, met richtlijnen voor het oplossen van zaken zoals ontbrekende stijlen op mobiele apparaten, verschillen tussen editor-previews en live storefronts, en verkeerd geplaatste selectors.