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

# De grootte van de sticky cart-knop aanpassen

> Pas de grootte en positie van de sticky cart-knop van Upcart aan met CSS.

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

De sticky cart-knop van Upcart kan met aangepaste CSS worden vergroot, verkleind en verplaatst. Zo kun je de knop beter laten aansluiten op de branding van je winkel of je voorkeuren voor de gebruikerservaring op desktop en mobiel.

Er zijn twee benaderingen beschikbaar, afhankelijk van hoeveel controle je wilt.

***

<div id="option-1-scaled-resizing-simple-setup">
  ## Optie 1: geschaald verkleinen (eenvoudige installatie)
</div>

Deze methode gebruikt één schaalfactor om de knop en het pictogram proportioneel te verkleinen of te vergroten. Het is de makkelijkste manier om de knopgrootte aan te passen met minimale code.

<div id="where-to-add-this">
  ## Waar je dit toevoegt
</div>

Ga naar **Upcart > Sticky Cart > Custom CSS** en plak de onderstaande code.

```
/* Set your desired scale factor here */  
/* Recommended range: 1 (default) to 0.65 (smaller) */  
.upcart-sticky-widget {  
  transform: scale(0.55);  
}  
  
/* Scale up your quatity icon */  
/* Recommended range: 1 (default) to 1.25 (bigger) */  
.upcart-sticky-cart-quantity-icon {  
  transform: scale(calc(1.5));  
}
```

<div id="how-to-customize">
  ## Hoe je dit aanpast
</div>

* Wijzig `transform` om de knop te vergroten of te verkleinen (bijv. `0.8`, `0.6`, `1.25` enz.)

<div id="option-2-pixel-specific-resizing-advanced-control">
  ## Optie 2: pixel-specifiek formaat (geavanceerde controle)
</div>

Met deze methode kun je de afmetingen van elk element afzonderlijk regelen met `px`-waarden. Gebruik deze wanneer je precieze aanpassingen wilt die niet afhankelijk zijn van schaal.

```
:root {  
  --widgetMainSize: 40px;  
  --widgetCartIconSize: 30px;  
  --widgetQuantityIconSize: 20px;  
}  
  
.upcart-sticky-widget {  
  height: var(--widgetMainSize) !important;  
  width: var(--widgetMainSize) !important;  
}  
  
[class*="styles_CartIcon"] {  
  left: -2px !important;  
  top: 4px !important;  
}  
  
.upcart-sticky-cart-quantity-icon {  
  height: var(--widgetQuantityIconSize) !important;  
  width: var(--widgetQuantityIconSize) !important;  
  top: -5px !important;  
  left: 25px !important;  
  z-index: 100 !important;  
}  
  
.upcart-sticky-widget svg {  
  display: block !important;  
  height: var(--widgetCartIconSize);  
}
```

<div id="how-to-customize-2">
  ## Hoe je dit aanpast
</div>

* Pas de variabelen in `:root` aan om de grootte van elk element te vergroten of te verkleinen
* Stel de waarden van `left` en `top` binnen de selectors bij om het pictogram en de badge visueel te centreren

<div id="need-help">
  ## Hulp nodig?
</div>

Weet je niet zeker welke methode het beste bij je past of heb je hulp nodig bij het schrijven van aangepaste CSS, dan raden we je aan contact op te nemen met een Shopify Expert. De support van Upcart helpt niet rechtstreeks bij het implementeren van CSS.

[Bekijk Shopify Experts](https://www.shopify.com/partners/directory)