> ## 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 breedte van je mobiele cart aanpassen

> Dit artikel beschrijft hoe je de breedte van je mobiele cart aanpast met CSS.

<div id="introduction">
  # **Introductie**
</div>

Welkom bij deze tutorial over het aanpassen van de breedte van de mobiele cart naar jouw voorkeur! Het aanpassen van de breedte van de mobiele cart kan de winkelervaring van je klanten aanzienlijk verbeteren door ervoor te zorgen dat je winkelwagen gemakkelijk te bekijken en te gebruiken is op kleinere schermen. Met deze aanpassing bepaal je de lay-out, zodat deze naadloos past bij het algehele ontwerp van je winkel en alles er schoon en georganiseerd uitziet.

Deze stappen zijn bedoeld voor winkeleigenaren of ontwikkelaars met basiskennis van CSS. Door de breedte van de mobiele cart aan te passen, kun je de bruikbaarheid verbeteren en het checkoutproces soepeler maken voor je klanten, wat mogelijk conversies en klanttevredenheid verhoogt.

Laten we beginnen en je mobiele cart er precies zo uit laten zien en werken als jij wilt!

<div id="accessing-custom-css-settings">
  ## **Toegang tot de Custom CSS-instellingen**
</div>

Volg deze stappen om te beginnen met het aanpassen van de CSS van je Upcart:

1. Open de **Upcart-app** in je dashboard.
2. Ga naar de **Cart Editor**.
3. Open **Settings** en selecteer het tabblad **Custom CSS** (achter **More settings** als de tabbladenrij te vol is).

<div id="applying-custom-css">
  ## **Aangepaste CSS toepassen**
</div>

Zodra je in de sectie Custom CSS bent, kun je de breedte van de mobiele cart wijzigen door de onderstaande stappen te volgen. Wijzig het getal van 90% naar elk gewenst getal; hoe groter het getal, hoe meer ruimte de winkelwagen over het scherm inneemt. (let op: dit geldt voor zowel V1.0 als V2.0 van Upcart)

1. Zoek het CSS-invoerveld.
2. Kopieer en plak de volgende code in het CSS-invoerveld:

```
.upcart-cart {   
  --widthOfMobileCart: 90%;   
}   
  
/* MOBILE WIDTH STYLING*/   
@media only screen and (max-width: 600px) {              
  [class*="styles_CartPreview__right__"] {   
    right: calc(var(--widthOfMobileCart) * -1);   
  }   
  
  [class*="styles_CartPreview__right__"]  
  [class*="styles_active__"] {   
    right: var(--widthOfMobileCart);   
  }   
  
  [class*="styles_CartPreview__"] {  
    width: var(--widthOfMobileCart);   
  }  
  
  .upcart-backdrop,  
  [class*="styles_CartPreview__empty__"],   
  [class*="styles_CartPreview__card__"],   
  [class*="styles_CartPreview__upsells__"],      
  [class*="styles_CartPreview__bottomModules__"],  
  .upcart-cart-body {   
    width: 100% !important;   
  }  
}
```

<div id="conclusion">
  # **Conclusie**
</div>

Door deze tutorial te volgen heb je de breedte van de mobiele cart succesvol aangepast, waardoor deze gebruiksvriendelijker is en beter aansluit bij het ontwerp van je winkel. Deze kleine wijzigingen kunnen een grote impact hebben op de winkelervaring van je klanten, doordat ze gemakkelijker kunnen browsen en kopen op mobiele apparaten.

<div id="still-need-help">
  ## Nog steeds hulp nodig?
</div>

Als je hulp nodig hebt bij aanpassingen, raden we aan om een Shopify Expert te raadplegen over het toevoegen van HTML, CSS en zelfs JavaScript aan je cart drawer.

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