Oversigt

Denne tilpasning bruger HTML, CSS og JavaScript til at blokere checkout, når kurven kun indeholder upsell-varer. Den hjælper med at sikre, at upsells behandles som sekundære tilbud, ikke selvstændige køb, og understøtter en mere kontrolleret og bevidst upsell-strategi. Det sikrer, at upsell-produkter fungerer inden for specifikke rammer og understreger deres rolle som supplerende varer til primære produkter. Når det er implementeret, vil checkout-knappen være deaktiveret, indtil mindst ét ikke-upsell-produkt er tilføjet til kurven.

Sådan fungerer det

Hvis kurven kun indeholder upsell-varer, er checkout-knappen nedtonet
En advarselsbesked vises under knappen
Når et almindeligt produkt tilføjes, bliver knappen aktiv, og advarslen forsvinder — giver tydelig validering i scenarier, der sikrer, at upsell-produkter kun købes sammen med tilhørende trigger-produkter, såsom visning af målrettede advarselsbeskeder.

Denne opsætning er ideel til butiksejere eller udviklere med grundlæggende kendskab til JavaScript og CSS.

Trin 1: Tilføj brugerdefineret HTML

Gå til:
Upcart > Cart Editor > Settings > Custom HTML

I sektionen Above announcements/rewards skal du indsætte:

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

Bemærkning om ældre version: window.upcartOnCartLoaded-callbacks virker stadig, men er forældede og logger konsoladvarsler. Brug upcartSubscribeCartLoaded til alle nye scripts.

I sektionen Below checkout button skal du indsætte:

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

Du er velkommen til at justere ordlyden i advarselsbeskeden, så den passer til dit brands tone.

Trin 2: Tilføj brugerdefineret CSS

Gå til:
Upcart > Cart Editor > Settings > Custom CSS Indsæt følgende kode:

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

Dette styler advarselsbeskeden og deaktiverer checkout-knappen både visuelt og funktionelt.

Slutresultat

Når opsætningen er klar:

Blokeres checkout, medmindre mindst ét ikke-upsell-produkt er i kurven
Informerer en besked kunderne om, hvorfor checkout er deaktiveret
Føles oplevelsen smidig og i tråd med brandet

Dette er især nyttigt til: At kombinere effektive upsell-strategier med disse teknikker forbedrer også den samlede shoppingoplevelse ved at eliminere unødvendige konflikter i købsprocessen.

Forebyggelse af utilsigtede køb af enkeltstående upsell-varer
Fastholdelse af upsells som rene tilføjelsesprodukter
Sikring af bedre kontrol over AOV og produktbundling

Har du stadig brug for hjælp?

Hvis du har brug for hjælp til tilpasninger, anbefaler vi at rådføre dig med en Shopify Expert om at tilføje HTML, CSS og endda JavaScript til din cart drawer. Se Shopify Experts

Kom godt i gang

Kurvmoduler

Kurvindstillinger

Fastgjort kurvknap

Multicart

Tilpasninger

Analyser

Integrationer og kompatibilitet

Fakturering og konto

Fejlfinding

Forhindr køb med kun upsells i kurven

Oversigt

Sådan fungerer det

Trin 1: Tilføj brugerdefineret HTML

I sektionen Above announcements/rewards skal du indsætte:

I sektionen Below checkout button skal du indsætte:

Trin 2: Tilføj brugerdefineret CSS

Slutresultat

Har du stadig brug for hjælp?

​Oversigt

​Sådan fungerer det

​Trin 1: Tilføj brugerdefineret HTML

​I sektionen Above announcements/rewards skal du indsætte:

​I sektionen Below checkout button skal du indsætte:

​Trin 2: Tilføj brugerdefineret CSS

​Slutresultat

​Har du stadig brug for hjælp?

Oversigt

Sådan fungerer det

Trin 1: Tilføj brugerdefineret HTML

I sektionen Above announcements/rewards skal du indsætte:

I sektionen Below checkout button skal du indsætte:

Trin 2: Tilføj brugerdefineret CSS

Slutresultat

Har du stadig brug for hjælp?