Erfahre, wie du mit HTML, CSS und JavaScript benutzerdefinierte Funktionen und Styling in deinem Cart Drawer erstellst.
⚠️ Wichtiger HinweisDie 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.
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.
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
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.
🔧 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.
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
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.
War diese Seite hilfreich?
⌘I
Assistant
Responses are generated using AI and may contain mistakes.
