📝 Hinweis V1-Selektoren zielen auf die Module des Legacy-Cart-Drawers ab. Wenn du auf V2 aktualisiert hast, greifen die Modul-Selektoren auf dieser Seite nicht mehr — die aktuellen Selektoren findest du in der V2-CSS-Selektor-Bibliothek. Zwei Ausnahmen solltest du kennen: .upcart-cart und .upcart-cart-body liegen auf der Drawer-Hülle statt auf einem Modul, sodass sie auch in V2 weiterhin greifen. Layout-Fixes, die den Drawer als Ganzes ansprechen (Begrenzen der Breite, Verhindern von horizontalem Überlauf), funktionieren nach einem Upgrade weiter.

Übersicht

Wenn du das Aussehen deines Warenkorbs ändern möchtest, etwa einen Preis ausblenden, die Textgröße anpassen oder einen Button neu positionieren, bist du hier richtig. Diese CSS-Selektor-Bibliothek liefert dir die Werkzeuge, um diese Änderungen mit deinem eigenen benutzerdefinierten Code umzusetzen. Alle verfügbaren CSS-Selektoren sind in diesem Artikel gruppiert, zusammen mit Links zu hilfreichen Ressourcen für das Schreiben und Testen deiner Styles.

Hinweis

Wir stellen diese Bibliothek zwar zu deiner Bequemlichkeit bereit, aber das Upcart-Support-Team kann nicht beim Erstellen oder Reparieren von benutzerdefiniertem Code helfen. Das ist Teil unserer Anpassungsrichtlinie. Wir empfehlen, für benutzerdefinierte Code-Lösungen einen Shopify-Experten zu konsultieren. Shopify-Experten ansehen

So verwendest du Upcart-CSS-Selektoren

Dieser Artikel ist eine Bibliothek von CSS-Selektoren, mit denen du deinen Upcart-Cart-Drawer stylen und anpassen kannst. Jeder Selektor zielt auf einen bestimmten Teil des Warenkorbs ab — etwa den Header, Produktzeilen, Upsells, das Rewards-Modul und mehr. Du kannst diese Selektoren verwenden, um:

Elemente auszublenden oder neu zu gestalten
Abstände, Schriften oder Farben zu ändern
Das Layout an das Branding deines Shops anzupassen

Um dein CSS anzuwenden, öffne den Cart Editor, gehe zu Settings, wähle den Tab Custom CSS und füge deine Styles in den Editor ein.

Was du vor dem Hinzufügen von CSS wissen solltest

Bevor du mit deinen benutzerdefinierten Styles loslegst, hier ein paar Tipps, damit alles reibungslos läuft. Sie machen es einfacher, Änderungen zu testen, Überraschungen zu vermeiden und das gewünschte Aussehen zu erreichen, ohne etwas in deinem Warenkorb kaputt zu machen.

Checkliste für CSS-Anpassungen:

Teste in einer sicheren Umgebung: Verwende nach Möglichkeit eine Vorschau oder ein unveröffentlichtes Theme, bevor du live gehst.
Fange klein an: Nimm jeweils nur eine Änderung vor, damit du leichter nachvollziehen kannst, was funktioniert hat und was nicht.
Füge Styles an der richtigen Stelle ein: Verwende das Feld Upcart Editor > Settings > Custom CSS, um deinen Code hinzuzufügen.
Verwende das Untersuchen-Werkzeug: Klicke mit der rechten Maustaste auf Elemente in deinem Browser und wähle Untersuchen, um Selektoren live zu finden und zu testen.
Vermeide Annahmen: Nicht jedes Element erscheint in allen Warenkörben — teste mit verschiedenen Warenkörben (mit/ohne Rewards, Upsells usw.).

CSS-Selektor-Bibliothek

Unten findest du eine Liste aller in Upcart verfügbaren CSS-Selektoren. Sie sind nach Modul gruppiert (wie Header, Produkte, Upsells usw.), damit du leichter findest, was du anpassen möchtest. Nutze sie als Referenz beim Schreiben deiner eigenen Styles.

Allgemeine Einstellungen

Design-Modul


CSS-Selektor	Beschreibung
`.upcart-cart`	Hauptcontainer für den Cart Drawer.
`.upcart-cart-body`	Enthält den Hauptinhalt des Warenkorbs.
`.upcart-backdrop`	Das dunkle Overlay, das hinter dem Warenkorb erscheint.

Header-Modul


CSS-Selektor	Beschreibung
`.upcart-header`	Container für den Warenkorb-Header, einschließlich Logo und Schließen-Button.
`.upcart-header-close-button`	Button zum Schließen des Cart Drawers.
`.upcart-header-close-button-icon`	Das Symbol innerhalb des Schließen-Buttons.
`.upcart-header-logo`	Zeigt das Logo-Bild im Warenkorb-Header an.
`.upcart-header-text`	Der Titeltext im Warenkorb-Header.

Body-Einstellungen

Announcements-Modul


CSS-Selektor	Beschreibung
`.upcart-announcement`	Banner- oder Ankündigungsbereich innerhalb des Warenkorbs.
`.upcart-announcement-skeleton`	Skeleton-Platzhalter für den Ankündigungsbereich.

Rewards-Modul


CSS-Selektor	Beschreibung
`.upcart-rewards`	Hauptcontainer für den Rewards-Bereich.
`.upcart-rewards-message`	Zeigt Fortschrittsmeldungen zu Belohnungen an.
`.upcart-rewards-bar-background`	Hintergrundebene der Rewards-Fortschrittsleiste.
`.upcart-rewards-bar-foreground`	Vordergrund-/Fortschrittsfüllung der Rewards-Leiste.
`.upcart-rewards-tier`	Stellt eine bestimmte Stufe im Belohnungssystem dar.
`.upcart-rewards-tier-circle`	Visueller Kreis-Indikator für eine Belohnungsstufe.
`.upcart-rewards-tier-icon`	Symbol innerhalb eines Belohnungsstufen-Kreises.
`.upcart-rewards-tier-description`	Beschreibungstext unter jeder Belohnungsstufe.
`.upcart-rewards-skeleton`	Skeleton-Container für den Rewards-Bereich.
`.upcart-rewards-message-skeleton`	Skeleton für die Rewards-Fortschrittsmeldung.
`.upcart-rewards-bar-skeleton`	Skeleton für die Rewards-Fortschrittsleiste.

Recommendations-Modul


CSS-Selektor	Beschreibung
`.upcart-recommendation-module`	Wrapper für das gesamte Produktempfehlungs-Modul.
`.upcart-recommendations-title`	Titeltext des Empfehlungsbereichs.
`.upcart-recommendations-shop-now-button`	Button, um ein empfohlenes Produkt direkt aus dem Warenkorb zu kaufen.

Subscription-Upgrades-Modul


CSS-Selektor	Beschreibung
`.upcart-subscription-upgrade-section`	Bereich zur Bewerbung von Abonnement-Upgrades im Warenkorb.
`.upcart-subscription-upgrade-button`	Button zum Auslösen eines Abonnement-Upgrades.
`.upcart-subscription-upgrade-dropdown`	Dropdown zur Auswahl verfügbarer Abonnement-Upgrade-Optionen.

Upsells-Modul


CSS-Selektor	Beschreibung
`.upcart-upsells`	Hauptcontainer für den Upsell-Bereich.
`.upcart-upsells-module`	Wrapper für das Upsells-Modul.
`.upcart-upsells-title`	Titel des Upsell-Bereichs.
`.upcart-upsells-button`	Button, um Upsell-Artikel in den Warenkorb zu legen.
`.upcart-upsell-item-card`	Karten-Layout für jedes Upsell-Produkt.
`.upcart-upsell-item-title`	Titel des Upsell-Produkts.
`.upcart-upsell-item-image-wrapper`	Wrapper um das Bild des Upsell-Produkts.
`.upcart-upsell-item-image`	Bild des Upsell-Produkts.
`.upcart-upsell-item-price`	Preis des Upsell-Artikels.
`.upcart-upsell-item-price-row`	Zeile mit Preis und Vergleichspreis.
`.upcart-upsell-item-compare-price`	Originalpreis (durchgestrichen) des Upsells.
`.upcart-upsell-item-variant-selector`	Varianten-Dropdown für Upsell-Produkte.

Produkteinstellungen


CSS-Selektor	Beschreibung
`.upcart-products-section`	Container für alle Produkte im Warenkorb.
`.upcart-product-item`	Wrapper für einen einzelnen Produktartikel.
`.upcart-product-title`	Name des Produkts im Warenkorb.
`.upcart-product-title-link`	Link, der den Produkttitel umschließt.
`.upcart-item-prices-row`	Zeile mit den Preisinformationen.
`.upcart-item-price`	Endpreis, der der Kundschaft angezeigt wird.
`.upcart-item-compare-price`	Originalpreis (durchgestrichen).
`.upcart-product-savings`	Spezifische Ersparnisse für einen Warenkorbartikel.
`.upcart-item-option`	Container für Produktoptionen wie Größe oder Farbe.
`.upcart-item-option-category`	Label für die Kategorie der Produktoption.
`.upcart-item-option-value`	Wert der ausgewählten Produktoption.
`.upcart-item-properties`	Wrapper für zusätzliche Produkt-Metadaten.
`.upcart-item-property`	Einzelne Produkteigenschaft.
`.upcart-item-property-subscription`	Zeigt Abonnementdetails für den Artikel an.
`.upcart-product-quantity-input`	Mengen-Eingabefeld für das Produkt.
`.upcart-product-quantity-minus`	Button zum Verringern der Menge.
`.upcart-product-quantity-plus`	Button zum Erhöhen der Menge.
`.upcart-product-image-wrapper`	Wrapper um das Produktbild.
`.upcart-quantity-warning`	Container für eine Mengenlimit-Meldung.
`.upcart-quantity-warning-text`	Text der Mengenwarnung, die dem Nutzer angezeigt wird.

Add-ons-Modul


CSS-Selektor	Beschreibung
`.upcart-addons`	Hauptcontainer für den Add-ons-Bereich.
`.upcart-addons-title`	Titel des Add-ons-Bereichs.
`.upcart-addons-product-description`	Beschreibung des Add-on-Produkts.
`.upcart-addons-price`	Preis des Add-on-Produkts.
`.upcart-addons-compare-price`	Originalpreis (durchgestrichen) des Add-ons.
`.upcart-addons-toggle`	Umschalter zum Hinzufügen/Entfernen eines Add-ons.
`.upcart-addons-image-wrapper`	Wrapper für das Add-on-Bild.

Discount-Codes-Modul

Ersparniszeile


CSS-Selektor	Beschreibung
`.upcart-savings-row`	Wrapper für den gesamten Rabatt-/Ersparnisbereich im Warenkorb.
`.styles_Footer__savingsCodes__`	Container für das Label („Discounts“) und die zugehörigen Rabattcodes.
`.upcart-discount-code-badge`	Wrapper für jedes Rabattcode-Badge in der Oberfläche.
`.upcart-discount-code-icon`	Container für das Rabatt-Symbol (z. B. SVG-Ticket-Symbol).
`.upcart-discount-code-text`	Textdarstellung des Rabattcodes (z. B. „AUTO 5“).
`.upcart-savings-amount`	Zeigt den tatsächlich durch Rabatte gesparten Betrag an.

Express-Payments-Modul

Hinweis

Die Express-Payments-Buttons in Upcart dienen als visuelle Container, während der Inhalt und die Funktionalität darin vollständig von Shopify gesteuert werden. Daher können wir ihr Verhalten oder Aussehen nicht ändern. Weitere Informationen findest du in der Anleitung zum Express-Payments-Modul.


CSS-Selektor	Beschreibung
`.upcart-express-pay-buttons-container`	Container für alle Express-Pay-Buttons.
`.upcart-express-pay-buttons-row`	Zeilen-Layout für Express-Pay-Buttons.
`.upcart-express-pay-button`	Allgemeiner Selektor für einen Express-Payment-Button.
`.upcart-express-pay-button-shop-pay`	Spezifischer Button für Shop Pay.
`.upcart-express-pay-button-google-pay`	Spezifischer Button für Google Pay.
`.upcart-express-pay-button-paypal`	Spezifischer Button für PayPal.
`.upcart-express-pay-button-apple-pay`	Spezifischer Button für Apple Pay.
`.upcart-express-pay-button-amazon-pay`	Spezifischer Button für Amazon Pay.
`.upcart-express-pay-button-meta-pay`	Spezifischer Button für Meta Pay.

Trust-Badges-Modul


CSS-Selektor	Beschreibung
`.upcart-trust-badge`	Container für die Trust Badges.
`.upcart-trust-badge-image`	Bildelement, das in einem Trust Badge verwendet wird.

Additional-Notes-Modul


CSS-Selektor	Beschreibung
`.NotesModule_NotesModule__`	Container für die zusätzlichen Notizen.
`.NotesModule_NotesModule__titleContainer__`	Titel-Container des Notizbereichs
`.NotesModule_NotesModule__dropdownContainer__`	Titel für das Dropdown des Notizbereichs
`.NotesModule_NotesModule__textModule__ textarea`	Eingabebereich zum Hinzufügen einer eigenen Notiz zum Warenkorb.

Upcart-Settings-Modul

Skeleton-Selektoren


CSS-Selektor	Beschreibung
`.upcart-skeleton`	Allgemeiner Skeleton-Loader-Wrapper für den Warenkorb.
`.upcart-product-item-skeleton`	Platzhalter, während ein Produkt lädt.
`.upcart-product-image-skeleton`	Platzhalter für ein Produktbild.
`.upcart-product-title-skeleton`	Platzhalter für den Produkttitel-Text.
`.upcart-product-price-container-skeleton`	Platzhalter für den Preisbereich.
`.upcart-product-quantity-skeleton`	Platzhalter für die Mengensteuerung.
`.upcart-item-option-skeleton`	Platzhalter für Artikeloptionen.
`.upcart-upsells-module-skeleton`	Skeleton für das Upsells-Modul.
`.upcart-upsells-title-skeleton`	Skeleton für den Titel des Upsell-Bereichs.
`.upcart-upsell-item-image-skeleton`	Skeleton für das Bild des Upsell-Produkts.
`.upcart-upsell-item-title-skeleton`	Skeleton für den Titel des Upsell-Produkts.
`.upcart-upsell-item-price-skeleton`	Skeleton für den Preis des Upsell-Produkts.
`.upcart-upsells-button-skeleton`	Skeleton für den Upsell-Aktions-Button.
`.upcart-trust-badge-skeleton`	Skeleton für den Trust-Badge-Container.
`.upcart-trust-badge-image-skeleton`	Skeleton für das Trust-Badge-Bild.
`.upcart-announcement-skeleton`	Skeleton-Platzhalter für Ankündigungen.
`.upcart-rewards-skeleton`	Skeleton für den Rewards-Bereich.
`.upcart-rewards-message-skeleton`	Skeleton für Belohnungsmeldungen.
`.upcart-rewards-bar-skeleton`	Skeleton für die Belohnungs-Fortschrittsleiste.
`.upcart-addons-skeleton`	Skeleton für den Add-ons-Bereich.
`.upcart-addons-image-wrapper-skeleton`	Skeleton für das Add-on-Produktbild.
`.upcart-addons-skeleton-text-container`	Skeleton für Textinhalte in Add-ons.
`.upcart-discount-code-module-skeleton`	Skeleton für das Rabattcode-Modul.
`.upcart-discount-code-input-skeleton`	Skeleton für die Rabattcode-Eingabe.
`.upcart-discount-code-button-skeleton`	Skeleton für den Rabattcode-Anwenden-Button.
`.upcart-checkout-button-container-skeleton`	Skeleton für den Checkout-Button-Wrapper.
`.upcart-checkout-button-skeleton`	Skeleton für den Checkout-Button.
`.upcart-express-pay-buttons-container-skeleton`	Skeleton für den Express-Payment-Container.
`.upcart-express-pay-button-skeleton`	Skeleton für einen einzelnen Express-Payment-Button.

Hilfreiche Ressourcen für den Einstieg:

Erste Schritte mit Custom CSS: Lerne, wie du benutzerdefiniertes CSS sicher in Upcart hinzufügst.
Einführung in Anpassungen in Upcart: Verstehe, wie Anpassungen funktionieren und wo du anfängst.
KI zum Schreiben von benutzerdefiniertem Code für Upcart nutzen: Erhalte Hilfe beim Schreiben von CSS oder JavaScript mit einfachen Prompts.
Best Practices zur Steigerung der Warenkorb-Conversions: Optimiere dein Warenkorb-Design mit bewährten Tipps.

Referenz der Warenkorbfunktionen

CSS-Referenz

Styling-Rezepte

Funktions-Rezepte

Benutzerdefinierte Vorlagen

Öffentliche API von Upcart

Upcart-CSS-Selektor-Bibliothek (V1)

Übersicht

Hinweis

So verwendest du Upcart-CSS-Selektoren

Was du vor dem Hinzufügen von CSS wissen solltest

Checkliste für CSS-Anpassungen:

CSS-Selektor-Bibliothek

Allgemeine Einstellungen

Design-Modul

Header-Modul

Body-Einstellungen

Announcements-Modul

Rewards-Modul

Recommendations-Modul

Subscription-Upgrades-Modul

Upsells-Modul

Produkteinstellungen

Footer-Einstellungen

Add-ons-Modul

Discount-Codes-Modul

Ersparniszeile

Express-Payments-Modul

Hinweis

Trust-Badges-Modul

Additional-Notes-Modul

Upcart-Settings-Modul

Skeleton-Selektoren

Hilfreiche Ressourcen für den Einstieg:

​Übersicht

​Hinweis

​So verwendest du Upcart-CSS-Selektoren

​Was du vor dem Hinzufügen von CSS wissen solltest

​Checkliste für CSS-Anpassungen:

​CSS-Selektor-Bibliothek

​Allgemeine Einstellungen

​Design-Modul

​Header-Modul

​Body-Einstellungen

​Announcements-Modul

​Rewards-Modul

​Recommendations-Modul

​Subscription-Upgrades-Modul

​Upsells-Modul

​Produkteinstellungen

​Footer-Einstellungen

​Add-ons-Modul

​Discount-Codes-Modul

​Ersparniszeile

​Express-Payments-Modul

​Hinweis

​Trust-Badges-Modul

​Additional-Notes-Modul

​Upcart-Settings-Modul

​Skeleton-Selektoren

​Hilfreiche Ressourcen für den Einstieg:

Übersicht

Hinweis

So verwendest du Upcart-CSS-Selektoren

Was du vor dem Hinzufügen von CSS wissen solltest

Checkliste für CSS-Anpassungen:

CSS-Selektor-Bibliothek

Allgemeine Einstellungen

Design-Modul

Header-Modul

Body-Einstellungen

Announcements-Modul

Rewards-Modul

Recommendations-Modul

Subscription-Upgrades-Modul

Upsells-Modul

Produkteinstellungen

Footer-Einstellungen

Add-ons-Modul

Discount-Codes-Modul

Ersparniszeile

Express-Payments-Modul

Hinweis

Trust-Badges-Modul

Additional-Notes-Modul

Upcart-Settings-Modul

Skeleton-Selektoren

Hilfreiche Ressourcen für den Einstieg: