Überblick

Diese Anpassung verwendet HTML, CSS und JavaScript, um den Checkout zu blockieren, wenn der Warenkorb nur Upsell-Artikel enthält. Sie hilft sicherzustellen, dass Upsells als sekundäre Angebote und nicht als eigenständige Käufe behandelt werden, und unterstützt so eine kontrolliertere und gezieltere Upsell-Strategie. Das stellt sicher, dass Upsell-Produkte innerhalb bestimmter Grenzen funktionieren und ihre Rolle als ergänzende Artikel zu Hauptprodukten betont wird. Nach der Implementierung wird die Checkout-Schaltfläche deaktiviert, bis mindestens ein Nicht-Upsell-Produkt zum Warenkorb hinzugefügt wird.

So funktioniert es

Wenn der Warenkorb nur Upsell-Artikel enthält, wird die Checkout-Schaltfläche ausgegraut
Unter der Schaltfläche erscheint eine Warnmeldung
Sobald ein reguläres Produkt hinzugefügt wird, wird die Schaltfläche aktiv und die Warnung verschwindet – Bietet eine klare Validierung für Szenarien, in denen sichergestellt werden soll, dass Upsell-Produkte nur mit den zugehörigen Trigger-Produkten gekauft werden, z. B. durch gezielte Warnmeldungen.

Diese Einrichtung ist ideal für Store-Betreiber oder Entwickler mit Grundkenntnissen in JavaScript und CSS.

Schritt 1: Benutzerdefiniertes HTML hinzufügen

Gehe zu:
Upcart > Cart Editor > Settings > Custom HTML

Füge im Abschnitt Above announcements/rewards Folgendes ein:

<script>  
  function CartContainsOnlyUpsells(cart) {  
    var cartWithoutUpsells = cart.items.filter(item => item.properties?.__upcartUpsell == null);  
    return cartWithoutUpsells.length === 0;  
  }  
  
  function ToggleCheckoutButton(shouldBeEnabled) {  
    var checkoutButton = window.upcartDocumentOrShadowRoot.querySelector(".upcart-checkout-button");  
    var warning = window.upcartDocumentOrShadowRoot.querySelector(".upcartUpsellOnlyWarning");  
  
    if (checkoutButton && warning) {  
      if (shouldBeEnabled) {  
        checkoutButton.classList.remove("upcart-disable-checkout-button");  
        warning.style.display = "none";  
      } else {  
        checkoutButton.classList.add("upcart-disable-checkout-button");  
        warning.style.display = "block";  
      }  
    }  
  }  
  
  window.upcartSubscribeCartLoaded((event) => {  
    ToggleCheckoutButton(!CartContainsOnlyUpsells(event.cart));  
  });  
</script>

Hinweis zur Legacy-API: window.upcartOnCartLoaded-Callbacks funktionieren noch, sind aber veraltet und erzeugen Konsolenwarnungen. Verwende upcartSubscribeCartLoaded für alle neuen Skripte.

Füge im Abschnitt Below checkout button Folgendes ein:

<div class="upcartUpsellOnlyWarning" style="display: none;">  
  Your cart only contains upsell products. <br>  
  Please add a regular product to continue to checkout.  
</div>

Du kannst den Wortlaut der Warnmeldung gerne an den Ton deiner Marke anpassen.

Schritt 2: Benutzerdefiniertes CSS hinzufügen

Gehe zu:
Upcart > Cart Editor > Settings > Custom CSS Füge den folgenden Code ein:

.upcartUpsellOnlyWarning {  
  width: 100%;  
  text-align: center;  
  margin-top: 10px;  
  color: red;  
  font-weight: bold;  
  font-size: 15px;  
}  
  
.upcart-disable-checkout-button {  
  cursor: none !important;  
  pointer-events: none !important;  
  opacity: 0.4 !important;  
}

Das stylt die Warnmeldung und deaktiviert die Checkout-Schaltfläche visuell und funktional.

Endergebnis

Nach der Einrichtung:

Der Checkout ist blockiert, solange sich nicht mindestens ein Nicht-Upsell-Produkt im Warenkorb befindet
Eine Meldung informiert Kunden, warum der Checkout deaktiviert ist
Das Erlebnis fühlt sich reibungslos und markenkonform an

Das ist besonders hilfreich für: Die Kombination effektiver Upsell-Strategien mit diesen Techniken verbessert außerdem das gesamte Einkaufserlebnis der Kunden, indem unnötige Konflikte im Kaufprozess beseitigt werden.

Verhindern versehentlicher Einzelkäufe von Upsell-Artikeln
Beibehalten von Upsells als reine Zusatzprodukte
Bessere Kontrolle über AOV und Produkt-Bundling

Brauchst du weitere Hilfe?

Wenn du Unterstützung bei Anpassungen brauchst, empfehlen wir dir, einen Shopify-Experten zum Hinzufügen von HTML, CSS und sogar JavaScript zu deinem Cart Drawer zu konsultieren. Shopify-Experten ansehen

Erste Schritte

Warenkorb-Module

Warenkorb-Einstellungen

Sticky-Warenkorb-Button

Multicart

Anpassungen

Analytics

Integrationen & Kompatibilität

Abrechnung & Konto

Fehlerbehebung

Reine Upsell-Käufe im Warenkorb verhindern

Überblick

So funktioniert es

Schritt 1: Benutzerdefiniertes HTML hinzufügen

Füge im Abschnitt Above announcements/rewards Folgendes ein:

Füge im Abschnitt Below checkout button Folgendes ein:

Schritt 2: Benutzerdefiniertes CSS hinzufügen

Endergebnis

Brauchst du weitere Hilfe?

​Überblick

​So funktioniert es

​Schritt 1: Benutzerdefiniertes HTML hinzufügen

​Füge im Abschnitt Above announcements/rewards Folgendes ein:

​Füge im Abschnitt Below checkout button Folgendes ein:

​Schritt 2: Benutzerdefiniertes CSS hinzufügen

​Endergebnis

​Brauchst du weitere Hilfe?

Überblick

So funktioniert es

Schritt 1: Benutzerdefiniertes HTML hinzufügen

Füge im Abschnitt Above announcements/rewards Folgendes ein:

Füge im Abschnitt Below checkout button Folgendes ein:

Schritt 2: Benutzerdefiniertes CSS hinzufügen

Endergebnis

Brauchst du weitere Hilfe?