Overzicht

Deze aanpassing gebruikt HTML, CSS en JavaScript om de checkout te blokkeren wanneer de winkelwagen alleen upsell-artikelen bevat. Zo zorg je ervoor dat upsells worden behandeld als secundaire aanbiedingen en niet als losse aankopen, ter ondersteuning van een meer gecontroleerde en bewuste upsell-strategie. Dit zorgt ervoor dat upsell-producten binnen specifieke grenzen functioneren en benadrukt hun rol als aanvullende artikelen op primaire producten. Wanneer geïmplementeerd, wordt de checkout-knop uitgeschakeld totdat er minstens één niet-upsell-product aan de winkelwagen is toegevoegd.

Hoe het werkt

Als de winkelwagen alleen upsell-artikelen bevat, wordt de checkout-knop grijs weergegeven
Er verschijnt een waarschuwingsbericht onder de knop
Zodra een regulier product wordt toegevoegd, wordt de knop actief en verdwijnt de waarschuwing - Biedt duidelijke validatie voor scenario’s waarin upsell-producten alleen samen met bijbehorende triggerproducten worden gekocht, zoals het tonen van gerichte waarschuwingsberichten.

Deze opzet is ideaal voor winkeleigenaren of ontwikkelaars met basiskennis van JavaScript en CSS.

Stap 1: Voeg aangepaste HTML toe

Ga naar:
Upcart > Cart Editor > Settings > Custom HTML

Plak in de sectie Above announcements/rewards:

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

Legacy-opmerking: window.upcartOnCartLoaded-callbacks werken nog steeds, maar zijn verouderd en loggen consolewaarschuwingen. Gebruik upcartSubscribeCartLoaded voor alle nieuwe scripts.

Plak in de sectie Below checkout button:

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

Pas gerust de formulering van het waarschuwingsbericht aan zodat het past bij de toon van je merk.

Stap 2: Voeg aangepaste CSS toe

Ga naar:
Upcart > Cart Editor > Settings > Custom CSS Plak de volgende code:

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

Dit stijlt het waarschuwingsbericht en schakelt de checkout-knop visueel en functioneel uit.

Eindresultaat

Zodra alles is ingesteld:

Wordt de checkout geblokkeerd tenzij er minstens één niet-upsell-product in de winkelwagen zit
Informeert een bericht klanten waarom de checkout is uitgeschakeld
Voelt de ervaring soepel en passend bij je merk

Dit is vooral handig voor: het combineren van effectieve upsell-strategieën met deze technieken verbetert ook de algehele winkelervaring van de klant door onnodige conflicten in het aankoopproces te elimineren.

Het voorkomen van onbedoelde aankopen van losse upsell-artikelen
Upsells behouden als producten die alleen als add-on verkrijgbaar zijn
Zorgen voor betere controle over AOV en productbundeling

Nog steeds hulp nodig?

Als je hulp nodig hebt bij aanpassingen, raden we aan om een Shopify Expert te raadplegen over het toevoegen van HTML, CSS en zelfs JavaScript aan je cart drawer. Bekijk Shopify Experts

Aan de slag

Winkelwagenmodules

Winkelwageninstellingen

Sticky winkelwagenknop

Multicart

Aanpassingen

Analytics

Integraties en compatibiliteit

Facturering en account

Probleemoplossing

Aankopen met alleen upsells in de winkelwagen voorkomen

Overzicht

Hoe het werkt

Stap 1: Voeg aangepaste HTML toe

Plak in de sectie Above announcements/rewards:

Plak in de sectie Below checkout button:

Stap 2: Voeg aangepaste CSS toe

Eindresultaat

Nog steeds hulp nodig?

​Overzicht

​Hoe het werkt

​Stap 1: Voeg aangepaste HTML toe

​Plak in de sectie Above announcements/rewards:

​Plak in de sectie Below checkout button:

​Stap 2: Voeg aangepaste CSS toe

​Eindresultaat

​Nog steeds hulp nodig?

Overzicht

Hoe het werkt

Stap 1: Voeg aangepaste HTML toe

Plak in de sectie Above announcements/rewards:

Plak in de sectie Below checkout button:

Stap 2: Voeg aangepaste CSS toe

Eindresultaat

Nog steeds hulp nodig?