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

> Globale und blockspezifische Design-Einstellungen für den Aftersell Cart: Farben, Buttons, Layout und wie Block-Overrides darüber liegen.

Das Design des Aftersell Cart funktioniert auf zwei Ebenen: **globale** Einstellungen, die den gesamten Warenkorb stylen, und **blockspezifische** Overrides, die einen einzelnen Block feinjustieren.

<div id="global-design-settings">
  ## Globale Design-Einstellungen
</div>

Öffne **Cart settings** in der Editor-Seitenleiste, um zum globalen Design des Warenkorbs zu gelangen. Die Einstellungen sind in Design, Buttons und Layout gruppiert.

<div id="design">
  ### Design
</div>

| Einstellung              | Was sie steuert                                              | Standard  |
| ------------------------ | ------------------------------------------------------------ | --------- |
| **Background color**     | Der Hintergrund des Warenkorbs.                              | `#ffffff` |
| **Text color**           | Primärer Text.                                               | `#000000` |
| **Secondary text color** | Gedämpfter / sekundärer Text.                                | `#a8a8a8` |
| **Accent color**         | Badges, Trennlinien und durchgestrichene Preise.             | `#f2f2f2` |
| **Border radius**        | Eckenrundung für Container, Karten, Bilder und Texteingaben. | `8px`     |

<div id="buttons">
  ### Buttons
</div>

| Einstellung          | Was sie steuert                                            | Standard  |
| -------------------- | ---------------------------------------------------------- | --------- |
| **Background color** | Button-Füllung.                                            | `#000000` |
| **Text color**       | Button-Beschriftung.                                       | `#ffffff` |
| **Border color**     | Button-Rahmen.                                             | `#000000` |
| **Border radius**    | Eckenrundung für Buttons, Dropdowns und Mengensteuerungen. | `8px`     |

<div id="layout">
  ### Layout
</div>

| Einstellung            | Was sie steuert                                            | Standard |
| ---------------------- | ---------------------------------------------------------- | -------- |
| **Horizontal padding** | Innenabstand links/rechts im Warenkorb.                    | `24px`   |
| **Desktop width**      | Die Breite des Drawers auf dem Desktop (mindestens 320px). | `440px`  |

<div id="per-block-design-overrides">
  ## Blockspezifische Design-Overrides
</div>

Jeder Block außer [**Custom code**](/de/aftersell/cart/custom-code-blocks) hat eigene blockspezifische Design-Overrides am unteren Ende seines Einstellungs-Panels — mit der Überschrift **Design** bei jedem Block außer **Express payments**, dessen Overrides in unbeschrifteten Style- und Spacing-Abschnitten liegen. (Custom code hat gar kein Einstellungs-Panel — der Block *ist* der Code, also zeigt er nur einen Code-Tab.) Sie steuern Dinge wie Stil, Abstände und andere blockspezifische Design-Einstellungen. Diese **blockspezifischen Design-Einstellungen** fallen, wenn sie leer sind, auf die globale Einstellung für diese Eigenschaft zurück.

Viele Blöcke enthalten außerdem einen **Text**-Abschnitt in ihrem Design-Panel, in dem du die Typografie für bestimmte Textelemente in diesem Block festlegen kannst — Schriftfamilie, Größe, Zeilenhöhe und Zeichenabstand. Blöcke mit mehreren Textelementen (etwa Notes und Empty cart) zeigen einen **Text element**-Picker an, sodass du jedes Element unabhängig gestalten kannst.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-design-animated-preview-block-settings.gif?s=ae602b5294a5d8ef7caae96476df2d1b" alt="Animierte Vorschau des blockspezifischen Design-Einstellungs-Panels im Cart-Editor" title="Animierte Vorschau des blockspezifischen Design-Einstellungs-Panels im Cart-Editor" width="2188" height="1080" data-path="images/aftersell/cart-design-animated-preview-block-settings.gif" />
</Frame>

<div id="fonts-and-drawer-position">
  ## Schriften und Drawer-Position
</div>

* **Schriften:** Der Warenkorb erbt standardmäßig die **Schrift deines Themes**. Du kannst für ausgewählte Textelemente (etwa den Produkttitel und die Upsells-Überschrift) im Abschnitt **Text** der Design-Einstellungen jedes Blocks eine benutzerdefinierte Schriftfamilie festlegen — siehe [Cart items-Block](/de/aftersell/cart/cart-items-block) und [Upsells-Block](/de/aftersell/cart/upsells-block) für Details.
* **Drawer-Position:** Die **Breite** des Drawers ist einstellbar (Desktop width, oben); eine Links/Rechts-Positionseinstellung gibt es nicht.

<div id="behavior-settings">
  ## Verhaltenseinstellungen
</div>

Über das Styling hinaus enthält **Cart settings** auch Verhaltensoptionen — das Öffnen des Drawers beim Hinzufügen zum Warenkorb und die Theme-Selektoren, die deinen Storefront synchron halten. Siehe [Cart settings](/de/aftersell/cart/cart-settings).

<div id="when-to-use-custom-css-instead">
  ## Wann du stattdessen Custom CSS verwenden solltest
</div>

Die integrierten Einstellungen decken die gängigen Fälle ab. Für alles darüber hinaus — ein bestimmtes Element ansprechen, individuelle Abstände, responsive Anpassungen — verwende [Custom CSS](/de/aftersell/cart/custom-css).