Skip to main content
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 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) anzuzeigen. Das spiegelt rabattierte Preise wider, ähnlich wie auf deinen Produktseiten. Warenkorbartikel mit durchgestrichenem Originalpreis neben dem rabattierten Preis und der Ersparnis

​
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. Upcart-Farbeinstellungen mit der auf pinke Upsell-Karten angewendeten Warenkorb-Akzentfarbe

​
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. Warenkorbartikel mit dem in Magenta hervorgehobenen Text des Ersparnisbetrags

​
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 – siehe Erweiterte CSS-Anpassung unten.
Eckenradius-Schieberegler auf 16 Pixel eingestellt, der den Checkout-Button abrundet

​
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:
    Für einen schwarzen Rahmen:
    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.
Upcart-Cart-Drawer-Vorschau mit einem Upsell-Add-Button und Checkout-Button