⚠️ 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 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.

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

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.

Header-Modul


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: 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 (V2)

Übersicht

HINWEIS

So verwendest du Upcart-CSS-Selektoren

Was du vor dem Hinzufügen von CSS wissen solltest

Checkliste für CSS-Anpassungen:

Wichtige Richtlinien für V2-Selektoren

CSS-Selektoren

Allgemeine Komponenten

Header-Modul

Announcements-Modul

Recommendation- und Upsell-Module

Notes-Modul

Discount-Code-Modul

Trust-Badges-Modul

Tiered-Rewards-Modul

Cart-Items-Modul

Add-ons-Modul

Express-Payments-Modul

Cart-Summary-Modul

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:

​Wichtige Richtlinien für V2-Selektoren

​CSS-Selektoren

​Allgemeine Komponenten

​Header-Modul

​Announcements-Modul

​Recommendation- und Upsell-Module

​Notes-Modul

​Discount-Code-Modul

​Trust-Badges-Modul

​Tiered-Rewards-Modul

​Cart-Items-Modul

​Add-ons-Modul

​Express-Payments-Modul

​Cart-Summary-Modul

​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:

Wichtige Richtlinien für V2-Selektoren

CSS-Selektoren

Allgemeine Komponenten

Header-Modul

Announcements-Modul

Recommendation- und Upsell-Module

Notes-Modul

Discount-Code-Modul

Trust-Badges-Modul

Tiered-Rewards-Modul

Cart-Items-Modul

Add-ons-Modul

Express-Payments-Modul

Cart-Summary-Modul

Hilfreiche Ressourcen für den Einstieg: