> ## 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 (V2)
> Dieser Artikel beschreibt die in Upcart Version 2 verfügbaren CSS-Selektoren, die eigenes Styling für den aktualisierten Cart Drawer und die Modulstruktur ermöglichen.
⚠️ **WICHTIGER HINWEIS**
Diese Selektoren gelten **nur für Version 2 (V2)** der Upcart-Warenkorbmodule. Wenn du **Version 1 (V1)** verwendest, funktionieren diese Selektoren nicht.
Für V1-Warenkörbe sieh dir bitte die **[Dokumentation der Version-1-CSS-Selektoren](/de/upcart/upcart_css_selector_library_v1)** an, die die Legacy-Modulstruktur und -Selektoren abdeckt.
Um zu prüfen, welche Version du verwendest, öffne den Cart Editor und schau oben im linken Menü. Dort erscheint ein **Cart version**-Dropdown, sobald jedes Modul im Warenkorb auf V2 ist; wenn du es nicht siehst, hat dein Warenkorb noch V1-Module. Weitere Informationen zur Migration von V1 auf V2 findest du in der [V2.0-Migrationsanleitung](/de/upcart/upcart_v20_migration_guide).
# Ü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.).
Die folgenden Selektoren funktionieren mit Version 2 der Upcart-Warenkorbmodule. V2 führt ein strukturiertes Benennungssystem mit **öffentlichen** und **internen** Klassen-Präfixen ein.
## **Wichtige Richtlinien für V2-Selektoren**
⚠️ **Verwende nur öffentliche Selektoren für Anpassungen**
* **Öffentliche Selektoren** (mit dem Präfix `upcart-public-`) sind Teil der stabilen API und sicher für eigenes Styling
* **Interne Selektoren** (mit dem Präfix `upcart-internal-`) sind der internen Nutzung vorbehalten und können sich ohne Vorankündigung ändern
✅ **RICHTIG:** Verwende öffentliche Klassennamen für das Styling
```
/* ✅ Correct usage */
.upcart-public-header {
font-size: 18px;
font-weight: bold;
}
```
❌ **FALSCH:** Überschreibe keine internen Klassennamen und verwende keine tiefen Selektoren
```
/* ❌ Avoid this */
.upcart-internal-header {
font-size: 18px;
font-weight: bold;
}
/* ❌ Avoid this */
.upcart-public-upsell div a {
font-size: 18px;
font-weight: bold;
}
```
# CSS-Selektoren
### **Allgemeine Komponenten**
| | |
| -------------------------------------------------------- | ------------------------------------------------------------------- |
| **CSS-Selektor** | **Beschreibung** |
| `.upcart-public-skeleton` | Allgemeiner Skeleton-Loader-Wrapper für den Warenkorb. |
| `.upcart-public-component__button` | Allgemeine Button-Komponente, die modulübergreifend verwendet wird. |
| `.upcart-public-component-loader` | Lade-Spinner-Komponente. |
| `.upcart-public-component-tag` | Wrapper der Tag-Komponente. |
| `.upcart-public-component-tag__icon` | Symbol innerhalb eines Tags. |
| `.upcart-public-component-tag__text` | Textinhalt eines Tags. |
| `.upcart-public-component-tag__remove-button` | Entfernen-Button („x“) innerhalb eines entfernbaren Tags. |
| `.upcart-public-component-collapse__dropdown-container` | Container für einklappbare Dropdown-Bereiche. |
| `.upcart-public-component-collapse__expand-icon` | Symbol, das den Auf-/Zuklapp-Zustand anzeigt. |
| `.upcart-public-component-carousel__container` | Äußerer Wrapper eines Karussells. |
| `.upcart-public-component-carousel__window` | Sichtfenster, in dem die Slides scrollen. |
| `.upcart-public-component-carousel__track` | Die bewegliche Spur, die die Slides enthält. |
| `.upcart-public-component-carousel__slide` | Ein einzelner Karussell-Slide. |
| `.upcart-public-component-carousel__button` | Zurück-/Weiter-Pfeil-Button. |
| `.upcart-public-component-progress-bar` | Einfache (unsegmentierte) Fortschrittsleisten-Komponente. |
| `.upcart-public-component-progress-bar__track` | Spur der einfachen Fortschrittsleiste. |
| `.upcart-public-component-progress-bar__fill` | Gefüllter Teil der einfachen Fortschrittsleiste. |
| `.upcart-public-component-progress-bar__milestone` | Meilenstein-Marker auf der einfachen Fortschrittsleiste. |
| `.upcart-public-component-progress-bar__milestone-icon` | Symbol an einem Meilenstein der einfachen Fortschrittsleiste. |
| `.upcart-public-component-progress-bar__milestone-label` | Beschriftung an einem Meilenstein der einfachen Fortschrittsleiste. |
| | |
| ------------------------------------------ | ---------------------------------------- |
| **CSS-Selektor** | **Beschreibung** |
| `.upcart-public-header` | Hauptcontainer für den Warenkorb-Header. |
| `.upcart-public-header__logo` | Logo-Bild im Warenkorb-Header. |
| `.upcart-public-header__close-button` | Button zum Schließen des Cart Drawers. |
| `.upcart-public-header__close-button-icon` | Symbol innerhalb des Schließen-Buttons. |
### **Announcements-Modul**
| | |
| -------------------------------------- | ---------------------------------------------------------- |
| **CSS-Selektor** | **Beschreibung** |
| `.upcart-public-announcement` | Banner- oder Ankündigungsbereich innerhalb des Warenkorbs. |
| `.upcart-public-announcement-skeleton` | Skeleton-Loader für die Ankündigungsleiste. |
### **Recommendation- und Upsell-Module**
| | |
| -------------------------------------------------------- | --------------------------------------------------- |
| **CSS-Selektor** | **Beschreibung** |
| `.upcart-public-upsell` | Haupt-Wrapper für das Upsell-Modul. |
| `.upcart-public-upsell__header` | Header des Upsell-Bereichs. |
| `.upcart-public-upsell__title` | Titeltext des Upsell-Bereichs. |
| `.upcart-public-upsell__shop-now-button` | Shop-Now-Button auf Upsell-Artikeln. |
| `.upcart-public-upsell__vertical-layout-wrapper` | Wrapper für das vertikale Upsell-Layout. |
| `.upcart-public-component-upsell-tile` | Karten-Layout für jedes Upsell-/Empfehlungsprodukt. |
| `.upcart-public-component-upsell-tile__image-container` | Container für das Bild des Upsell-Produkts. |
| `.upcart-public-component-upsell-tile__image` | Bild des Upsell-Produkts. |
| `.upcart-public-component-upsell-tile__info` | Informationsbereich der Upsell-Kachel. |
| `.upcart-public-component-upsell-tile__title-link` | Link-Wrapper für den Produkttitel. |
| `.upcart-public-component-upsell-tile__title` | Titel des Upsell-Produkts. |
| `.upcart-public-component-upsell-tile__rating-row` | Zeile mit Produktbewertungen. |
| `.upcart-public-component-upsell-tile__stars` | Sternebewertungs-Anzeige. |
| `.upcart-public-component-upsell-tile__star--partial` | Teilstern für Bruchteil-Bewertungen. |
| `.upcart-public-component-upsell-tile__reviews` | Anzeige der Bewertungsanzahl. |
| `.upcart-public-component-upsell-tile__price-row` | Zeile mit Preisinformationen. |
| `.upcart-public-component-upsell-tile__price-compare-at` | Originalpreis (durchgestrichen) des Upsells. |
| `.upcart-public-component-upsell-tile__price` | Aktueller Preis des Upsell-Artikels. |
| `.upcart-public-component-upsell-tile__variant-row` | Zeile mit der Variantenauswahl. |
| `.upcart-public-upsell__skeleton` | Skeleton-Platzhalter für das Upsell-Modul. |
| `.upcart-public-upsell__skeleton-title` | Skeleton für den Titel des Upsell-Bereichs. |
| `.upcart-public-upsell__skeleton-image` | Skeleton für das Bild des Upsell-Produkts. |
| `.upcart-public-upsell__skeleton-product-title` | Skeleton für den Titel des Upsell-Produkts. |
| `.upcart-public-upsell__skeleton-product-price` | Skeleton für den Preis des Upsell-Produkts. |
### **Notes-Modul**
| | |
| -------------------------------------- | -------------------------------------------------------------------- |
| **CSS-Selektor** | **Beschreibung** |
| `.upcart-public-notes` | Hauptcontainer für den Notizbereich. |
| `.upcart-public-notes__text-container` | Container für den Notiz-Textbereich. |
| `.upcart-public-notes__textarea` | Texteingabebereich zum Hinzufügen einer eigenen Notiz zum Warenkorb. |
### **Discount-Code-Modul**
| | |
| ----------------------------------------------- | ---------------------------------------------- |
| **CSS-Selektor** | **Beschreibung** |
| `.upcart-public-discount-code` | Hauptcontainer für den Rabattcode-Bereich. |
| `.upcart-public-discount-code__form` | Formular-Wrapper für die Rabattcode-Eingabe. |
| `.upcart-public-discount-code__input-wrapper` | Wrapper für das Rabattcode-Eingabefeld. |
| `.upcart-public-discount-code__input` | Eingabefeld für Rabattcodes. |
| `.upcart-public-discount-code__suffix` | Suffix-Element für das Eingabefeld. |
| `.upcart-public-discount-code__error` | Fehlermeldung bei ungültigen Codes. |
| `.upcart-public-discount-code__button` | Button zum Anwenden des Rabattcodes. |
| `.upcart-public-discount-code__skeleton` | Skeleton-Platzhalter für das Rabattcode-Modul. |
| `.upcart-public-discount-code__skeleton-input` | Skeleton für das Rabattcode-Eingabefeld. |
| `.upcart-public-discount-code__skeleton-button` | Skeleton für den Rabattcode-Anwenden-Button. |
### **Trust-Badges-Modul**
| | |
| ------------------------------------ | ----------------------------------------------------- |
| **CSS-Selektor** | **Beschreibung** |
| `.upcart-public-trust-badges` | Container für die Trust Badges. |
| `.upcart-public-trust-badges__image` | Bildelement, das in einem Trust Badge verwendet wird. |
### **Tiered-Rewards-Modul**
| | |
| -------------------------------------------------------------------------------- | --------------------------------------------------- |
| **CSS-Selektor** | **Beschreibung** |
| `.upcart-public-rewards` | Hauptcontainer für den Rewards-Bereich. |
| `.upcart-public-rewards__message` | Zeigt Fortschrittsmeldungen zu Belohnungen an. |
| `.upcart-public-rewards__bar` | Container für die Rewards-Fortschrittsleiste. |
| `.upcart-public-component-segmented-progress-bar` | Segmentierte Fortschrittsleisten-Komponente. |
| `.upcart-public-component-segmented-progress-bar__segments-container` | Container für alle Segmente der Fortschrittsleiste. |
| `.upcart-public-component-segmented-progress-bar__segment` | Einzelnes Segment der Fortschrittsleiste. |
| `.upcart-public-component-segmented-progress-bar__segment-fill` | Füllanteil eines Fortschrittsleisten-Segments. |
| `.upcart-public-component-segmented-progress-bar__milestone` | Meilenstein-Marker auf der Fortschrittsleiste. |
| `.upcart-public-component-segmented-progress-bar__milestone--bottom` | Meilenstein, der unten positioniert ist. |
| `.upcart-public-component-segmented-progress-bar__milestone--top` | Meilenstein, der oben positioniert ist. |
| `.upcart-public-component-segmented-progress-bar__milestone--middle` | Meilenstein, der in der Mitte positioniert ist. |
| `.upcart-public-component-segmented-progress-bar__milestone-icon` | Symbol, das an einem Meilenstein angezeigt wird. |
| `.upcart-public-component-segmented-progress-bar__milestone-label` | Beschriftungstext eines Meilensteins. |
| `.upcart-public-component-segmented-progress-bar__milestone-label--align-right` | Rechtsbündige Meilenstein-Beschriftung. |
| `.upcart-public-component-segmented-progress-bar__milestone-label--align-center` | Zentrierte Meilenstein-Beschriftung. |
| `.upcart-public-rewards__skeleton` | Skeleton-Container für den Rewards-Bereich. |
| `.upcart-public-rewards__skeleton-message` | Skeleton für die Rewards-Fortschrittsmeldung. |
| `.upcart-public-rewards__skeleton-bar` | Skeleton für die Rewards-Fortschrittsleiste. |
### **Cart-Items-Modul**
| | |
| ----------------------------------------------------------------- | -------------------------------------------------------- |
| **CSS-Selektor** | **Beschreibung** |
| `.upcart-public-cart-items` | Haupt-Wrapper für die Liste der Warenkorbartikel. |
| `.upcart-public-cart-item` | Wrapper für einen einzelnen Warenkorbartikel. |
| `.upcart-public-cart-items-skeleton__content` | Skeleton-Loader für Warenkorbartikel. |
| `.upcart-public-component-product-tile` | Wrapper für einen einzelnen Produktartikel im Warenkorb. |
| `.upcart-public-component-product-tile__content` | Inhaltsbereich der Produktkachel. |
| `.upcart-public-component-product-tile__image-wrapper` | Wrapper um das Produktbild. |
| `.upcart-public-component-product-tile__image` | Bild des Produkts im Warenkorb. |
| `.upcart-public-component-product-tile__info` | Informationsbereich der Produktkachel. |
| `.upcart-public-component-product-tile__header` | Header-Bereich der Produktkachel. |
| `.upcart-public-component-product-tile__product-title` | Name des Produkts im Warenkorb. |
| `.upcart-public-component-product-tile__title-link` | Link, der den Produkttitel umschließt. |
| `.upcart-public-component-product-tile__remove-button` | Button zum Entfernen des Produkts aus dem Warenkorb. |
| `.upcart-public-component-product-tile__variant` | Anzeige der Varianteninformationen. |
| `.upcart-public-component-product-tile__properties` | Wrapper für zusätzliche Produkt-Metadaten. |
| `.upcart-public-component-product-tile__bundle` | Bundle-Informationsbereich. |
| `.upcart-public-component-product-tile__product-pricing` | Preisbereich der Produktkachel. |
| `.upcart-public-component-product-tile__price-compare-at` | Originalpreis (durchgestrichen). |
| `.upcart-public-component-product-tile__price` | Endpreis, der der Kundschaft angezeigt wird. |
| `.upcart-public-component-product-tile__price-group` | Wrapper um Preis und Vergleichspreis. |
| `.upcart-public-component-product-tile__savings` | Spezifische Ersparnisse für einen Warenkorbartikel. |
| `.upcart-public-component-product-tile__controls` | Steuerungsbereich (Menge usw.). |
| `.upcart-public-component-product-tile__quantity-selector` | Wrapper der Mengenauswahl. |
| `.upcart-public-component-product-tile__quantity-minus` | Button zum Verringern der Menge. |
| `.upcart-public-component-product-tile__quantity-plus` | Button zum Erhöhen der Menge. |
| `.upcart-public-component-product-tile__discount-codes` | Auf den Artikel angewendete Rabattcodes. |
| `.upcart-public-component-product-tile__subscription-upgrade` | Bereich für das Abonnement-Upgrade. |
| `.upcart-public-component-product-tile__subscription-upgrade-btn` | Button, der das Abonnement-Upgrade anwendet. |
| `.upcart-public-component-product-tile__select-wrapper` | Wrapper für das Auswahl-Dropdown. |
| `.upcart-public-component-product-tile__select` | Auswahl-Dropdown-Element. |
| `.upcart-public-product-properties__subscription` | Zeigt Abonnementdetails für den Artikel an. |
| `.upcart-public-product-properties__item` | Einzelne Produkteigenschaft. |
| `.upcart-public-product-properties__link` | Link innerhalb der Produkteigenschaften. |
| `.upcart-public-cart-items__key-value-pair` | Schlüssel-Wert-Paar-Anzeige für Artikeleigenschaften. |
| `.upcart-public-bundle-properties` | Container für Bundle-Eigenschaften. |
| `.upcart-public-bundle-properties__variant-title` | Variantentitel für Bundle-Artikel. |
| `.upcart-public-bundle-properties__header` | Header des Bundle-Eigenschaften-Bereichs. |
| `.upcart-public-bundle-properties__item-components` | Container für Bundle-Artikel-Komponenten. |
| `.upcart-public-bundle-properties__item-component-row` | Zeile für jede Bundle-Artikel-Komponente. |
| `.upcart-public-bundle-properties__image-wrapper` | Wrapper für das Bild des Bundle-Artikels. |
| `.upcart-public-bundle-properties__content` | Inhaltsbereich für den Bundle-Artikel. |
| `.upcart-public-bundle-properties__product-title` | Produkttitel des Bundle-Artikels. |
### **Add-ons-Modul**
| | |
| ---------------------------------------------- | -------------------------------------------------- |
| **CSS-Selektor** | **Beschreibung** |
| `.upcart-public-addons` | Hauptcontainer für den Add-ons-Bereich. |
| `.upcart-public-addons__image-wrapper` | Wrapper für das Add-on-Bild. |
| `.upcart-public-addons__content-wrapper` | Inhalts-Wrapper für Add-on-Informationen. |
| `.upcart-public-addons__content-title-wrapper` | Wrapper für den Add-on-Titel. |
| `.upcart-public-addons__content-title` | Titel des Add-on-Produkts. |
| `.upcart-public-addons__content-price` | Preisbereich des Add-ons. |
| `.upcart-public-addons__compare-at-price` | Originalpreis (durchgestrichen) des Add-ons. |
| `.upcart-public-addons__price` | Aktueller Preis des Add-on-Produkts. |
| `.upcart-public-addons__content-description` | Beschreibung des Add-on-Produkts. |
| `.upcart-public-addons__toggle-wrapper` | Wrapper für den Add-on-Umschalter. |
| `.upcart-public-addons__toggle` | Umschalter zum Hinzufügen/Entfernen eines Add-ons. |
| `.upcart-public-addons__toggle-switch` | Schalter-Element des Umschalters. |
| `.upcart-public-addons__toggle-slider` | Slider-Element des Umschalters. |
| `.upcart-public-addons__skeleton` | Skeleton-Platzhalter für den Add-ons-Bereich. |
| `.upcart-public-addons__skeleton-image` | Skeleton für das Add-on-Produktbild. |
| `.upcart-public-addons__skeleton-text` | Skeleton für Textinhalte in Add-ons. |
### **Express-Payments-Modul**
| | |
| -------------------------------------------- | -------------------------------------- |
| **CSS-Selektor** | **Beschreibung** |
| `.upcart-public-express-payments__container` | Container für Express-Payment-Buttons. |
### **Cart-Summary-Modul**
| | |
| --------------------------------------------- | ------------------------------------------------- |
| **CSS-Selektor** | **Beschreibung** |
| `.upcart-public-cart-summary` | Hauptcontainer für die Warenkorb-Zusammenfassung. |
| `.upcart-public-cart-summary__discount-codes` | Container für Rabattcodes in der Zusammenfassung. |
| `.upcart-public-cart-summary__discount-label` | Label für den Rabattbereich. |
| `.upcart-public-cart-summary__slide-codes` | Gleitender Container für Rabattcodes. |
| `.upcart-public-cart-summary__total-discount` | Anzeige des gesamten Rabattbetrags. |
## **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.
##
##