⚠️ 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 verwenden. Bitte sieh dir die übrige Anpassungsdokumentation für V2.0-Lösungen an.

Übersicht

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 an, damit du weißt, was von unserem Team unterstützt wird und was nicht.

Inhalte mit HTML hinzufügen

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

Upcart-Custom-HTML-Editor beim Hinzufügen einer Dankesnachricht über der Checkout-Schaltfläche

Logik mit JavaScript hinzufügen

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:

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

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.

Upcart-Custom-HTML-Editor Scripts Before Load mit JavaScript, das das Upsell-Modul ausblendet

🔧 Hinweis für Entwickler:
Upcart stellt eine vollständige Dokumentation der öffentlichen 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.

Gestalte deinen Warenkorb mit CSS

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;  
}

Upcart-Custom-CSS-Editor beim Gestalten der Upsell-Titelfarbe mit einer Bestätigung der gespeicherten Änderungen

Zusätzliche Ressourcen

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

Support für Anpassungen

Das Support-Team von Upcart kann nicht bei der Implementierung von benutzerdefiniertem Code helfen. Für fortgeschrittenere Änderungen empfehlen wir, einen Shopify-Experten zu beauftragen.

Erste Schritte

Warenkorb-Module

Warenkorb-Einstellungen

Sticky-Warenkorb-Button

Multicart

Anpassungen

Analytics

Integrationen & Kompatibilität

Abrechnung & Konto

Fehlerbehebung

Erste Schritte mit Upcart-Anpassungen

Übersicht

Inhalte mit HTML hinzufügen

Logik mit JavaScript hinzufügen

Gestalte deinen Warenkorb mit CSS

Zusätzliche Ressourcen

Support für Anpassungen

​Übersicht

​Inhalte mit HTML hinzufügen

​Logik mit JavaScript hinzufügen

​Gestalte deinen Warenkorb mit CSS

​Zusätzliche Ressourcen

​Support für Anpassungen

Übersicht

Inhalte mit HTML hinzufügen

Logik mit JavaScript hinzufügen

Gestalte deinen Warenkorb mit CSS

Zusätzliche Ressourcen

Support für Anpassungen