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

# So passt du die Breite deines mobilen Warenkorbs an

> Dieser Artikel beschreibt, wie du die Breite deines mobilen Warenkorbs mit CSS anpasst.

<div id="introduction">
  # **Einführung**
</div>

Willkommen zu diesem Tutorial zur Anpassung der mobilen Warenkorbbreite nach deinen Wünschen! Das Anpassen der mobilen Warenkorbbreite kann das Einkaufserlebnis deiner Kundschaft erheblich verbessern, indem sichergestellt wird, dass dein Warenkorb auf kleineren Bildschirmen gut sichtbar und bedienbar ist. Mit dieser Anpassung kannst du das Layout steuern und dafür sorgen, dass es sich nahtlos in dein gesamtes Shop-Design einfügt und alles sauber und geordnet aussieht.

Diese Schritte sind für Shop-Betreiberinnen und -Betreiber oder Entwickler mit CSS-Grundkenntnissen gedacht. Durch das Anpassen der mobilen Warenkorbbreite kannst du die Benutzerfreundlichkeit verbessern und den Checkout-Prozess für deine Kundschaft reibungsloser gestalten, was potenziell die Conversions und die Kundenzufriedenheit steigert.

Lass uns loslegen und deinen mobilen Warenkorb genau so aussehen und funktionieren lassen, wie du es möchtest!

<div id="accessing-custom-css-settings">
  ## **Auf die Custom-CSS-Einstellungen zugreifen**
</div>

Um mit der Anpassung des CSS für deinen Upcart zu beginnen, folge diesen Schritten:

1. Öffne die **Upcart-App** in deinem Dashboard.
2. Navigiere zum **Cart Editor**.
3. Öffne **Settings** und wähle den Tab **Custom CSS** (hinter **More settings**, wenn die Tab-Reihe überläuft).

<div id="applying-custom-css">
  ## **Benutzerdefiniertes CSS anwenden**
</div>

Sobald du im Custom-CSS-Bereich bist, kannst du die mobile Warenkorbbreite ändern, indem du die folgenden Schritte befolgst. Ändere die Zahl von 90 % auf einen beliebigen Wert — je größer die Zahl, desto mehr Platz nimmt der Warenkorb auf dem Bildschirm ein. (Hinweis: Dies gilt sowohl für Upcart V1.0 als auch V2.0)

1. Suche das CSS-Eingabefeld.
2. Kopiere den folgenden Code und füge ihn in das CSS-Eingabefeld ein:

```
.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">
  # **Fazit**
</div>

Mit diesem Tutorial hast du die mobile Warenkorbbreite erfolgreich angepasst und sie benutzerfreundlicher und passend zum Design deines Shops gestaltet. Diese kleinen Änderungen können eine große Wirkung auf das Einkaufserlebnis deiner Kundschaft haben und es ihr erleichtern, auf Mobilgeräten zu stöbern und zu kaufen.

<div id="still-need-help">
  ## Brauchst du weiterhin Hilfe?
</div>

Wenn du Unterstützung bei Anpassungen benötigst, empfehlen wir, einen Shopify-Experten zum Hinzufügen von HTML, CSS und sogar JavaScript zu deinem Cart Drawer zu konsultieren.

[Shopify-Experten ansehen](https://www.shopify.com/partners/directory)