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

Globale Design-Einstellungen

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

Design

Buttons

Layout

Blockspezifische Design-Overrides

Jeder Block außer Custom code 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.
Animierte Vorschau des blockspezifischen Design-Einstellungs-Panels im Cart-Editor

Schriften und Drawer-Position

  • 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 und Upsells-Block für Details.
  • Drawer-Position: Die Breite des Drawers ist einstellbar (Desktop width, oben); eine Links/Rechts-Positionseinstellung gibt es nicht.

Verhaltenseinstellungen

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

Wann du stattdessen Custom CSS verwenden solltest

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.