> ## 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.
# Design-Modul
> Dieser Artikel erklärt, wie du deine Upcart-Designeinstellungen anpasst.
Mit dem Design-Modul kannst du das Erscheinungsbild deines Warenkorbs anpassen, einschließlich Layout, Markenfarben und Button-Stilen.
# Allgemein
## Schriftarten vom Theme übernehmen
Mit dieser Einstellung verwendet Upcart die in deinen Shopify-Theme-Einstellungen definierten Schriftarten. Um deine aktuelle Schriftauswahl zu sehen, öffne den [Shopify Theme Editor](https://help.shopify.com/en/manual/online-store/themes/customizing-themes#access-the-theme-editor) und navigiere zum Abschnitt Typografie.
## **🚧 Warenkorb-Vorschau 🚧**
Vom Theme übernommene Schriftarten erscheinen nicht im Upcart-Vorschaufenster, werden aber in deinem Live-Storefront korrekt angezeigt.
## Durchgestrichene Preise anzeigen
Aktiviere diese Einstellung, um neben jedem Artikel im Warenkorb einen durchgestrichenen Preis (auch bekannt als [Compare At Price](https://help.shopify.com/en/manual/discounts/sales#set-a-compare-at-price-for-a-product)) anzuzeigen. Das spiegelt rabattierte Preise wider, ähnlich wie auf deinen Produktseiten.
## Zwischensummen-Zeile aktivieren
Fügt dem Warenkorb eine Zwischensummen-Zeile hinzu. Wenn du dies aktivierst, erscheint außerdem unter **Colors** ein Feld **Subtotal text color**, sodass die Zwischensumme separat vom restlichen Warenkorbtext gestaltet werden kann. Ist die Einstellung deaktiviert, ist dieses Farbfeld ausgeblendet.
## Warenkorb-Breite
Steuert, wie breit der Drawer ist, separat einstellbar für jeden Viewport:
* **Desktop** – **Default** oder **Wide**
* **Mobile** – **Full** (randlos) oder **Nearly full** (ein kleiner Abstand am Rand)
***
# Farben
## Hintergrundfarbe
Legt die Haupthintergrundfarbe des Warenkorbs fest, ausgenommen Footer und Upsell-Karten.
## Warenkorb-Akzentfarbe
Steuert die Hintergrundfarbe des Warenkorb-Footers und der Upsell-Artikelkarten.
## Warenkorb-Textfarbe
Definiert die Farbe für den gesamten Warenkorbtext, mit Ausnahme des Button-Texts und des Ersparnistexts, die separat gesteuert werden.
## Farbe des Ersparnistexts
Legt die Farbe des Ersparnistexts fest, der unter dem Produktpreis angezeigt wird.
## Textfarbe der Zwischensumme
Legt die Farbe der Zwischensummen-Zeile fest. Dieses Feld erscheint nur, wenn unter **General** die Option **Enable subtotal line** aktiviert ist.
## 🚧 **Warenkorb-Vorschau** 🚧
Der Vorschau-Editor spiegelt das endgültige Styling möglicherweise nicht exakt wider. Das Theme deines Stores kann Custom CSS enthalten, das Textgröße oder -farbe beeinflusst. Überprüfe Änderungen immer in deinem Live-Storefront.
***
# Button-Einstellungen
Upcart bietet erweiterte Optionen für das Button-Styling, einschließlich spezieller Anpassungen für den Checkout-Button. Dazu gehören Methoden für CSS-Anpassungen und die Integration der Branding-Tools von Shopify.
## Eckenradius
Passt die Rundung der Button-Ecken an, von **0 px bis 40 px**. `0` ergibt scharfe, eckige Kanten; `40` ist das Maximum des Schiebereglers. Der Wert gilt gemeinsam für den Checkout-Button, den Upsell-Button, den Rabatt-Button und den Upgrade-Button.
Der Schieberegler endet bei 40 px. Für einen vollständig pillenförmigen Button brauchst du [Custom CSS](/de/upcart/custom_css) – siehe [Erweiterte CSS-Anpassung](#advanced-css-customization-for-checkout-buttons) unten.
## Button-Farbe
Legt die Hintergrundfarbe für alle Buttons im Warenkorb fest, einschließlich:
* Checkout-Button
* Upsell-„Add to Cart“-Button
* Rabatt-„Apply“-Button
* Abonnement-Upgrade-Button Du kannst die Farbe dieser Buttons über den Cart Editor anpassen. Für weitergehende Anpassungen wie CSS-Änderungen sieh dir den Abschnitt zu erweiterten Anpassungen an.
## Button-Textfarbe
Legt die Textfarbe fest, die in allen Warenkorb-Buttons verwendet wird.
## Button-Text-Hover-Farbe
Steuert die Farbe des Button-Texts, wenn ein Kunde mit der Maus darüberfährt. Wenn sie zum Beispiel auf Grün gesetzt ist, wird der Text beim Hover grün.
## „Continue shopping“-Button anzeigen
Fügt dem Warenkorb einen **Continue shopping**-Button hinzu, mit dem Kunden den Drawer schließen und zum Stöbern zurückkehren können, ohne das Schließen-Symbol zu verwenden.
# Erweiterte CSS-Anpassung für Checkout-Buttons
Für umfangreichere Designänderungen kannst du Custom-CSS-Code verwenden, um den Checkout-Button zu verändern:
1. Öffne im Cart Editor die **Settings** und wähle den Tab **Custom CSS**.
2. Verwende den passenden CSS-Selektor, etwa `.checkout`. Beispiel-CSS-Snippets: Für einen pillenförmigen Button:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.checkout { border-radius: 9999px !important;}
```
Für einen schwarzen Rahmen:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.checkout { border: 2px solid black !important;}
```
Ersetze `.checkout` durch die tatsächliche CSS-Klasse deines Buttons. Weitere Stiloptionen umfassen Hover-Effekte, Innenabstände, Textfarben oder Schriftarten.
# Shopify-Branding für die Button-Anpassung integrieren
Wenn du Shopify verwendest, kannst du das Design deines Checkout-Buttons über den Shopify-Admin aktualisieren:
1. Melde dich in deinem Shopify Admin an.
2. Navigiere zu `Settings > Checkout > Customize`.
3. Nutze die Branding-Optionen, um Schriftart, Rundung oder Farbe für ein nahtloses Design anzupassen.
