Skip to main content
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.

​
So greifst du darauf zu

Öffne das Checkout-Dashboard in Aftersell und klicke oben auf der Seite auf Edit branding.
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.
Aftersell-Checkout-Dashboard mit einem Pfeil auf den Button Edit branding Der Editor ist in drei Gruppen gegliedert: Design system, Customizations und Advanced.

​
Design system

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

​
Globale Farben

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.
Oberflächen- und Button-Farben werden nicht hier festgelegt. Sie befinden sich unter Advanced > Color schemes.

​
Typografie

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

​
Eckenradius

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

​
Customizations

​
Buttons

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.
Button-Farben werden von Farbschemata geerbt. Ist kein Schema-Wert festgelegt, werden die globalen Farben verwendet.

​
Formularfelder

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.

​
Produkt-Thumbnails

Steuert, wie Produktbilder auf der Seite erscheinen:
  • Show border
  • Border radius
  • Fit
  • Badge background color – Accent (Akzentfarbe des Schemas) oder Base (Grundfarbe des Schemas).
  • Layout – Placement (Top bar, Left section oder Right section) und Alignment (Left, Center oder Right).
  • Container – Padding, Color scheme und Show divider.
Checkout-Seite mit hervorgehobenem Store-Namen-Header oben links

​
Inhaltsbereich

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

​
Hauptbereich

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

​
Bestellübersicht

  • 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.
Produkt-Thumbnail der Bestellübersicht mit hervorgehobenem Bildrahmen
  • Layout – Placement und Alignment.
  • Container – Show footer content, Padding, Color scheme und Show divider.

​
Advanced

​
Farbschemata

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.