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

# Checkout-Branding-Einstellungen

> Dieser Artikel führt dich durch die Checkout-Branding-Einstellungen und zeigt, wie du jeden Abschnitt zur Anpassung deines Checkouts nutzt.

Mit den Branding-Einstellungen kannst du das Erscheinungsbild deines Checkouts anpassen — von Farben und Typografie über Buttons und Formularfelder bis zum Seitenlayout. Diese Werkzeuge machen es einfach, dein Checkout-Design an deine Markenidentität anzugleichen.

<div id="how-to-access-it">
  # So greifst du darauf zu
</div>

Öffne das **Checkout**-Dashboard in Aftersell und klicke oben auf der Seite auf **Edit branding**.

<Note>
  Das Bearbeiten des Brandings hier erfordert einen **Shopify-Plus**-Plan. Shopify erlaubt Apps das Lesen und Schreiben des Checkout-Brandings nur auf Plus, daher können diese Einstellungen auf anderen Plänen nicht gespeichert werden. Wenn dein Store nicht auf Plus ist, nimm dieselben Änderungen stattdessen im Shopify-Checkout-Editor vor: **Einstellungen → Checkout → Anpassen** in deinem Shopify-Adminbereich.
</Note>

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-branding-dashboard-arrow-edit-button.gif?s=a24b8a487de57cad22f82a84d193eebd" alt="Aftersell-Checkout-Dashboard mit einem Pfeil auf den Button Edit branding" width="1432" height="1080" data-path="images/aftersell/checkout-branding-dashboard-arrow-edit-button.gif" />

Der Editor ist in drei Gruppen gegliedert: **Design system**, **Customizations** und **Advanced**.

***

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

Die Design-system-Einstellungen sind das Fundament. Komponenten im gesamten Checkout erben von ihnen, sofern keine spezifischere Einstellung sie überschreibt.

<div id="global-colors">
  ## Globale Farben
</div>

Deine Marken- und Systemfarben, die in deinem Store und in den Post-Purchase-Erlebnissen verwendet werden. Komponenten nutzen diese Farben, wenn kein Farbschema festgelegt ist.

**Markenfarben**

* **Brand** – deine primäre Markenfarbe.
* **Accent** – für interaktive und hervorgehobene Elemente.
* **Decorative** – für unterstützende dekorative Elemente.

**Status- und Systemfarben**

* **Success** – Bestätigungszustände.
* **Warning** – Warnhinweise.
* **Critical** – Fehler und Alarme.
* **Info** – informative Meldungen.

<Note>
  Oberflächen- und Button-Farben werden nicht hier festgelegt. Sie befinden sich unter **Advanced > Color schemes**.
</Note>

<div id="typography">
  ## Typografie
</div>

* **Font size** – lege die **Base size** und das **Scale ratio** fest, aus dem der Rest der Schriftskala abgeleitet wird.
* **Primary font** – wird für die meisten Komponenten wie normalen Text, Buttons und Formularsteuerelemente verwendet. Wähle eine **Font family**, ein **Base weight** und ein **Bold weight**.
* **Secondary font** – wird für Überschriften-Komponenten verwendet, mit denselben drei Steuerelementen.

<div id="corner-radius">
  ## Eckenradius
</div>

Legt die gemeinsamen Eckenradius-Werte fest, auf die Buttons, Formularfelder, Container und andere Komponenten verweisen. Du definierst drei Größen: **Small**, **Medium** und **Large**.

***

<div id="customizations">
  # Customizations
</div>

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

Wird separat für **Primary buttons** (die Hauptaktion einer Seite) und **Secondary buttons** (unterstützende Aktionen) konfiguriert. Jeder hat:

* **Corner radius** – Small, Medium, Large oder None (eckig).
* **Background** – Solid oder None.
* **Vertical padding** und **Horizontal padding**.
* **Show border**.

<Note>
  Button-Farben werden von Farbschemata geerbt. Ist kein Schema-Wert festgelegt, werden die globalen Farben verwendet.
</Note>

<div id="form-fields">
  ## Formularfelder
</div>

Gilt für alle unterstützten Feldtypen:

* **Corner radius**
* **Label position** – Inside oder Outside.
* **Show border**

**Feldspezifische Überschreibungen** erlauben es dir, für bestimmte Feldtypen von diesen gemeinsamen Stilen abzuweichen: **Text field borders**, **Dropdown borders**, **Choice list group spacing** und **Checkbox corner radius**.

<div id="product-thumbnails">
  ## Produkt-Thumbnails
</div>

Steuert, wie Produktbilder auf der Seite erscheinen:

* **Show border**
* **Border radius**
* **Fit**
* **Badge background color** – Accent (Akzentfarbe des Schemas) oder Base (Grundfarbe des Schemas).

<div id="header">
  ## Header
</div>

* **Layout** – **Placement** (Top bar, Left section oder Right section) und **Alignment** (Left, Center oder Right).
* **Container** – **Padding**, **Color scheme** und **Show divider**.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-branding-store-name-header.gif?s=b55fc223b38987bab5e5db18e2bf54ad" alt="Checkout-Seite mit hervorgehobenem Store-Namen-Header oben links" width="1872" height="1080" data-path="images/aftersell/checkout-branding-store-name-header.gif" />

<div id="content-area">
  ## Inhaltsbereich
</div>

Steuert den **Divider** zwischen dem Hauptbereich und der Bestellübersicht: **Show divider**, **Border style** und **Border weight**.

<div id="main-area">
  ## Hauptbereich
</div>

* **Section containers** – der Hintergrund- und Rahmen-Wrapper um jeden Abschnitt: **Background**, **Show border**, **Border style**, **Border weight**.
* **Section dividers** – die Linien zwischen den Abschnitten.

<div id="order-summary">
  ## Bestellübersicht
</div>

* **Container** – das **Color scheme**, das auf den gesamten Bestellübersichts-Container angewendet wird.
* **Section dividers** – **Show divider**, **Border style**, **Border weight**.
* **Section containers** – der Hintergrund und Rahmen um jeden Abschnitt: **Show border**, **Background**, **Border style**, **Border weight**, **Color scheme**, **Corner radius**, **Padding** und **Shadow**.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-branding-order-summary-product-thumbnail.gif?s=76af2d4e5b5f6e740da03a01a9b79124" alt="Produkt-Thumbnail der Bestellübersicht mit hervorgehobenem Bildrahmen" width="1264" height="1080" data-path="images/aftersell/checkout-branding-order-summary-product-thumbnail.gif" />

<div id="footer">
  ## Footer
</div>

* **Layout** – **Placement** und **Alignment**.
* **Container** – **Show footer content**, **Padding**, **Color scheme** und **Show divider**.

***

<div id="advanced">
  # Advanced
</div>

<div id="color-schemes">
  ## Farbschemata
</div>

Farbschemata sind wiederverwendbare Sets von Oberflächen-, Text- und Button-Farben, auf die andere Abschnitte verweisen. Zwei Schemata sind verfügbar:

* **Scheme 1 - Main area**
* **Scheme 2 - Supporting areas**

Jedes Schema ist in drei Gruppen unterteilt:

* **Buttons** – für den Haupt-Zahlungsbutton und sekundäre Aktionen. **Primary button** und **Secondary button** werden separat konfiguriert, jeweils mit eigenem Standard- und Hover-Zustand.
* **Form controls** – für Textfelder, Dropdowns und Auswahllisten.
* **Base surfaces** – der Oberflächenhintergrund, der Fließtext und unterstützende Rollen: Rahmen, Akzent (Links und Fokus), Dekorativ (dezente Hervorhebungen) und Symbolfarbe.

Wo immer ein Abschnitt ein **Color scheme**-Steuerelement bietet, kannst du es auf **Scheme 1**, **Scheme 2** oder **Transparent** zeigen lassen.