> ## 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.

# Erste Schritte mit Upcart-Anpassungen

> Erfahre, wie du mit HTML, CSS und JavaScript benutzerdefinierte Funktionen und Styling in deinem Cart Drawer erstellst.

⚠️ **Wichtiger Hinweis**

Die Beispielanpassung in diesem Dokument funktioniert nur mit V1.0 der Upcart-Warenkorbmodule. Wenn du deinen Warenkorb kürzlich auf Version 2 aktualisiert hast, funktioniert dieser Anpassungscode nicht. Du musst die neuen Selektoren für Version 2 aus dem [Migrationsleitfaden](/de/upcart/upcart_v20_migration_guide) verwenden.

Bitte sieh dir die übrige Anpassungsdokumentation für V2.0-Lösungen an.

<div id="overview">
  # Übersicht
</div>

Upcart gibt dir die volle Kontrolle, um das Aussehen und Verhalten des Warenkorbs mit **Custom HTML**, **Custom CSS** und **JavaScript** zu verändern. Mit diesen Tools kannst du neue Funktionen hinzufügen, deinen Warenkorb passend zu deiner Marke gestalten oder Logik einführen, um die Funktionsweise deines Warenkorbs zu verbessern.

Diese Anleitung behandelt die Grundlagen zu jedem Bereich und zeigt, wie du loslegst. Jeder Abschnitt enthält ein kurzes visuelles Beispiel, damit du verstehst, wie Änderungen in der Praxis aussehen.

***

Bevor du beginnst, sieh dir unbedingt die [Anpassungsrichtlinie von Upcart](/de/upcart/upcart_customization_policy) an, damit du weißt, was von unserem Team unterstützt wird und was nicht.

<div id="add-content-with-html">
  ## Inhalte mit HTML hinzufügen
</div>

HTML wird verwendet, um statische Inhalte wie Text, Banner oder Schaltflächen in deinen Warenkorb einzufügen. Du kannst im **Custom HTML**-Editor aus mehreren HTML-Positionen wählen (z. B. über der Checkout-Schaltfläche, am Ende des Warenkorbs, zwischen Artikeln).

Häufige Anwendungsfälle:

* Benutzerdefinierte Nachrichten hinzufügen
* Rechtliche Hinweise oder Richtlinien-Links einfügen
* Versandfristen oder Lieferinformationen hervorheben

**Beispiel:**

```
<div style="text-align: center; font-weight: bold;">  
  Thanks for shopping with us!  
</div
```

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-html-thank-you-message.gif?s=a22b53d145994e29c3e327b272e1ce33" alt="Upcart-Custom-HTML-Editor beim Hinzufügen einer Dankesnachricht über der Checkout-Schaltfläche" width="2060" height="1080" data-path="images/upcart/customizations-custom-html-thank-you-message.gif" />

***

<div id="add-logic-with-javascript">
  ## Logik mit JavaScript hinzufügen
</div>

JavaScript steuert das Verhalten und die Logik des Warenkorbs. Du kannst damit Elemente ein- oder ausblenden, Styling bedingt anwenden oder in Echtzeit auf Warenkorbänderungen reagieren.

Du umschließt deinen Code mit einem `<script>`-Tag und platzierst ihn in **Custom HTML > Scripts (Before Load)** oder **Above Announcements**, je nachdem, wann er ausgeführt werden soll.

**Beispiel: [Den Warenkorb auf ein Upsell gleichzeitig beschränken](/de/upcart/limit_the_cart_to_one_upsell_at_a_time):**

```
<script>  
  // Show upsells again when upsells are removed  
  window.upcartSubscribeItemRemoved((event) => {  
    if (event.item?.properties?.__upcartUpsell) {  
      const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
      if (upsells) upsells.style.display = "block";  
    }  
  });  
  
  // Hide upsells once one is added  
  window.upcartSubscribeUpsellsAddedToCart(() => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    if (upsells) upsells.style.display = "none";  
  });  
  
  // Check for upsell in cart when it loads  
  window.upcartSubscribeCartLoaded((event) => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    const items = event.cart.items || [];  
    const hasUpsell = items.some(item => item?.properties?.__upcartUpsell);  
    if (upsells && hasUpsell) {  
      upsells.style.display = "none";  
    }  
  });  
</script>
```

<Note>
  **Legacy-Hinweis:** Die Callbacks `window.upcartOnItemRemoved`, `window.upcartOnAddUpsell` und `window.upcartOnCartLoaded` funktionieren noch, sind aber veraltet und erzeugen Konsolenwarnungen. Verwende `upcartSubscribeItemRemoved`, `upcartSubscribeUpsellsAddedToCart` und `upcartSubscribeCartLoaded` für alle neuen Skripte.
</Note>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-html-hide-upsells.gif?s=eec41b0784bb4db819ee4ae1cd8a25e5" alt="Upcart-Custom-HTML-Editor Scripts Before Load mit JavaScript, das das Upsell-Modul ausblendet" width="2060" height="1080" data-path="images/upcart/customizations-custom-html-hide-upsells.gif" />

***

🔧 **Hinweis für Entwickler:**\
Upcart stellt eine vollständige [Dokumentation der öffentlichen API](https://rokt.notion.site/upcart-public-api) bereit, die alle Funktionen, Variablen und Best-Practice-Muster für fortgeschrittene Anpassungen auflistet. Wir empfehlen, diese beim Erstellen komplexerer Skripte oder Integrationen durchzusehen.

***

<div id="style-your-cart-with-css">
  ## Gestalte deinen Warenkorb mit CSS
</div>

CSS steuert das Erscheinungsbild der Elemente in deinem Warenkorb. Verwende es, um Abstände, Farben und Schriftgrößen anzupassen oder unerwünschte Elemente auszublenden. **Custom CSS** ist einer der Tabs unter **Settings** (hinter **More settings**, wenn die Tab-Reihe überläuft).

Häufige Anwendungsfälle:

* Farben von Produkttiteln oder Schaltflächen ändern
* Schriftgröße oder Ausrichtung anpassen
* Abstände zwischen Abschnitten hinzufügen

**Beispiel: Farbe des Upsell-Titels in V1.0 ändern:**

```
.upcart-upsells-title {  
  color: #C20075 !important;  
  font-size: 25px;  
  font-style: italic;  
  text-align: center;  
}
```

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-css-editor-styling.gif?s=f676b9eef6e30c6c122028c0e7a38b6e" alt="Upcart-Custom-CSS-Editor beim Gestalten der Upsell-Titelfarbe mit einer Bestätigung der gespeicherten Änderungen" width="2060" height="1080" data-path="images/upcart/customizations-custom-css-editor-styling.gif" />

***

<div id="additional-resources">
  ## Zusätzliche Ressourcen
</div>

Du möchtest deine HTML-, CSS- oder JavaScript-Kenntnisse verbessern? Sieh dir diese kostenlosen Tools an:

* [W3Schools](https://www.w3schools.com/)
* [Codecademy](https://www.codecademy.com/?g_network=g\&g_productchannel=\&g_adid=528849219280\&g_locinterest=\&g_keyword=codecademy\&g_acctid=243-039-7011\&g_adtype=\&g_keywordid=kwd-41065460761\&g_ifcreative=\&g_campaign=account\&g_locphysical=9001394\&g_adgroupid=70492864474\&g_productid=\&g_source=%7Bsourceid%7D\&g_merchantid=\&g_placement=\&g_partition=\&g_campaignid=1726903838\&g_ifproduct=\&utm_id=t_kwd-41065460761:ag_70492864474:cp_1726903838:n_g:d_c\&utm_source=google\&utm_medium=paid-search\&utm_term=codecademy\&utm_campaign=INTL_Brand_Exact\&utm_content=528849219280\&g_adtype=search\&g_acctid=243-039-7011\&gad_source=1\&gad_campaignid=1726903838\&gbraid=0AAAAAon8KZFBIKQJ4KKGpsSVHO3yi2Njl\&gclid=CjwKCAjwx-zHBhBhEiwA7Kjq61-cNVEH2PzXZCcjcqIZS-0mCe8EEyPBJYyj4QRn5bma8OMqd3IJrBoCwjoQAvD_BwE)
* [Mozilla Developer Network (MDN)](https://developer.mozilla.org/en-US/)

<div id="support-for-customizations">
  ## Support für Anpassungen
</div>

Das Support-Team von Upcart kann nicht bei der Implementierung von benutzerdefiniertem Code helfen. Für fortgeschrittenere Änderungen empfehlen wir, einen [Shopify-Experten](https://www.shopify.com/ca/partners/directory) zu beauftragen.