> ## 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.
# Upcart-CSS-Selektor-Bibliothek (V1)
> Dieser Artikel beschreibt die in Upcart Version 1 verfügbaren CSS-Selektoren, mit denen du eigenes Styling auf den Legacy-Cart-Drawer anwenden kannst.
📝 **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](/de/upcart/upcart_css_selector_library_v2).
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](/de/upcart/upcart_customization_policy).
Wir empfehlen, für benutzerdefinierte Code-Lösungen einen Shopify-Experten zu konsultieren.
[Shopify-Experten ansehen](https://www.shopify.com/ca/partners/directory)
# 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. |
| | |
| ---------------------------------- | ----------------------------------------------------------------------------- |
| **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**](/de/upcart/express_payments_module).
| | |
| --------------------------------------- | ------------------------------------------------------ |
| **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](/de/upcart/custom_css):** Lerne, wie du benutzerdefiniertes CSS sicher in Upcart hinzufügst.
* **[Einführung in Anpassungen in Upcart](/de/upcart/getting_started_with_upcart_customizations):** Verstehe, wie Anpassungen funktionieren und wo du anfängst.
* **[KI zum Schreiben von benutzerdefiniertem Code für Upcart nutzen](/de/upcart/ai_prompt_suggestions_for_adding_custom_code_to_your_upcart_settings):** Erhalte Hilfe beim Schreiben von CSS oder JavaScript mit einfachen Prompts.
* **[Best Practices zur Steigerung der Warenkorb-Conversions](/de/upcart/best_practices_to_increase_upcart_conversions):** Optimiere dein Warenkorb-Design mit bewährten Tipps.