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

> Schreibe CSS, um das Design deines Cart Drawers anzupassen.

<div id="overview">
  # Überblick
</div>

In diesem Bereich kannst du das Erscheinungsbild bestehender Warenkorbelemente ändern oder Stile auf benutzerdefiniertes HTML anwenden, das über den Editor hinzugefügt wurde.

<div id="where-to-find-it">
  ## **Wo du es findest**
</div>

Gehe zu:\
**Upcart > Cart Editor > Settings > Custom CSS**\
Settings ist eine Reihe von Tabs; Custom CSS ist einer davon, neben Custom HTML. Wenn er nicht sichtbar ist, befindet er sich hinter **More settings**.

<div id="how-it-works">
  ## **So funktioniert es**
</div>

Du kannst CSS hinzufügen, um:

* Standard-Warenkorbelemente zu gestalten
* Das Erscheinungsbild von benutzerdefiniertem HTML zu verändern
* Abstände, Ausrichtung, Typografie und mehr anzupassen

Während du tippst, schlägt ein **Autovervollständigungs-Popup** gültige Upcart-Selektoren vor, um die Bearbeitung zu beschleunigen. Wenn du einen Vorschlag auswählst, wird die Regel automatisch vervollständigt und hilft dir, deinen Code zu strukturieren. Wenn Änderungen nicht wie erwartet erscheinen, prüfe die üblichen Vorschläge zur Fehlerbehebung, etwa das Aktualisieren der Caches sowohl im Browser als auch im Upcart-Editor, das Überprüfen der CSS-Platzierungen und das Sicherstellen einer angemessenen Spezifität deiner CSS-Regeln.

<div id="using-selectors">
  ## **Selektoren verwenden**
</div>

Upcart bietet eine große Auswahl an benutzerdefinierten Selektoren. Klicke auf **"Show list"**, um alle verfügbaren Optionen anzuzeigen. Vermeide globale Selektoren wie `body`, `div` oder `h3`, sofern sie nicht mit `.upcart-cart` eingegrenzt sind, um unbeabsichtigte Änderungen an deinem Storefront zu verhindern. Wenn Stile nicht korrekt angewendet werden, erwäge, die CSS-Spezifität zu erhöhen oder deinen CSS-Regeln `!important` anzuhängen. So stellst du sicher, dass sie alle in Konflikt stehenden Stile überschreiben. Beispiel:

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

Beispiel (sicherer Selektor):

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

<div id="example-thank-you-message-styling">
  ## **Beispiel: Styling einer Dankesnachricht**
</div>

Angenommen, du hast dieses benutzerdefinierte HTML unter dem Checkout-Button hinzugefügt:

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

Ohne CSS sieht die Nachricht schlicht aus. So gestaltest du sie:

```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">
  # Häufige Probleme und Lösungen
</div>

<div id="css-not-appearing-on-mobile-devices">
  ## CSS erscheint nicht auf Mobilgeräten
</div>

Wenn dein benutzerdefinierter Text oder deine Stile auf Mobilgeräten nicht sichtbar sind:

* Aktualisiere die Seite sowohl im **Upcart-Editor** als auch in deinem mobilen Browser, um zwischengespeicherte Versionen zu löschen.
* Stelle sicher, dass die zuletzt veröffentlichte Warenkorb-Version aktiv ist.
* Bestätige, dass das CSS im Tab **Custom CSS** unter **Upcart > Cart Editor > Settings** gespeichert ist.

<div id="discrepancies-between-editor-and-live-store">
  ## Abweichungen zwischen Editor und Live-Store
</div>

Wenn Stile im Editor korrekt angezeigt werden, aber nicht auf der Live-Seite, kann eine höhere Selektor-Spezifität oder das Hinzufügen von `!important` zu den wichtigsten Regeln nötig sein.

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

<div id="incorrect-css-selector-usage">
  ## Falsche Verwendung von CSS-Selektoren
</div>

Überprüfe, ob die richtige Klasse oder ID angesprochen wird. Verwende für Upcart-spezifische Elemente immer Präfixe wie `.upcart-`, um unbeabsichtigte Ergebnisse zu vermeiden. Wenn der Stil nicht wie erwartet angewendet wird, stelle sicher, dass der Selektor `.thank-you-message` das vorgesehene HTML-Element präzise anspricht, und prüfe, ob der CSS-Code auf dem richtigen Tab platziert ist (Upcart > Cart Editor > Settings > Custom CSS).

***

Support für Anpassungen:

Der Upcart-Support kann nicht bei der Implementierung oder dem Debugging von Custom CSS unterstützen. Für Hilfe bei fortgeschrittenem Styling empfehlen wir die Zusammenarbeit mit einem Shopify Expert. Für die Fehlerbehebung bei Custom CSS findest du im Abschnitt zu häufigen Problemen Hinweise zur Lösung von Problemen wie fehlenden Stilen auf Mobilgeräten, Abweichungen zwischen Editor-Vorschau und Live-Storefront sowie falsch platzierten Selektoren.