Panoramica

Questa personalizzazione usa HTML, CSS e JavaScript per bloccare il checkout quando il carrello contiene solo articoli upsell. Aiuta a garantire che gli upsell siano trattati come offerte secondarie, non come acquisti autonomi, supportando una strategia di upsell più controllata e intenzionale. Questo garantisce che i prodotti upsell funzionino entro confini specifici, sottolineando il loro ruolo di articoli complementari ai prodotti principali. Una volta implementata, il pulsante di checkout sarà disabilitato finché almeno un prodotto non-upsell non viene aggiunto al carrello.

Come funziona

Se il carrello contiene solo articoli upsell, il pulsante di checkout appare in grigio
Un messaggio di avviso appare sotto il pulsante
Una volta aggiunto un prodotto normale, il pulsante diventa attivo e l’avviso scompare - Fornisce una validazione chiara per gli scenari in cui i prodotti upsell devono essere acquistati solo con i prodotti trigger associati, come la visualizzazione di messaggi di avviso mirati.

Questa configurazione è ideale per proprietari di negozi o sviluppatori con conoscenze di base di JavaScript e CSS.

Passaggio 1: Aggiungi HTML personalizzato

Vai su:
Upcart > Cart Editor > Settings > Custom HTML

Nella sezione Above announcements/rewards, incolla:

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

Nota legacy: i callback window.upcartOnCartLoaded funzionano ancora ma sono deprecati e generano avvisi nella console. Usa upcartSubscribeCartLoaded per tutti i nuovi script.

Nella sezione Below checkout button, incolla:

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

Sentiti libero di modificare il testo del messaggio di avviso per adattarlo al tono del tuo brand.

Passaggio 2: Aggiungi CSS personalizzato

Vai su:
Upcart > Cart Editor > Settings > Custom CSS Incolla il codice seguente:

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

Questo applica uno stile al messaggio di avviso e disabilita il pulsante di checkout sia visivamente sia funzionalmente.

Risultato finale

Una volta configurato:

Il checkout è bloccato a meno che nel carrello ci sia almeno un prodotto non-upsell
Un messaggio informa i clienti del perché il checkout è disabilitato
L’esperienza risulta fluida e in linea con il brand

Questo è particolarmente utile per: abbinare strategie di upsell efficaci a queste tecniche migliora anche l’esperienza di acquisto complessiva del cliente eliminando conflitti inutili nel processo di acquisto.

Prevenire acquisti accidentali di un singolo articolo upsell
Mantenere gli upsell come prodotti solo aggiuntivi
Garantire un migliore controllo sull’AOV e sul bundling dei prodotti

Hai ancora bisogno di aiuto?

Se ti serve assistenza con le personalizzazioni, ti consigliamo di consultare uno Shopify Expert per aggiungere HTML, CSS e persino JavaScript al tuo cart drawer. Vedi gli Shopify Experts

Per iniziare

Moduli del carrello

Impostazioni del carrello

Pulsante carrello fisso

Multicart

Personalizzazioni

Analisi

Integrazioni e compatibilità

Fatturazione e account

Risoluzione dei problemi

Impedire acquisti di soli upsell nel carrello

Panoramica

Come funziona

Passaggio 1: Aggiungi HTML personalizzato

Nella sezione Above announcements/rewards, incolla:

Nella sezione Below checkout button, incolla:

Passaggio 2: Aggiungi CSS personalizzato

Risultato finale

Hai ancora bisogno di aiuto?

​Panoramica

​Come funziona

​Passaggio 1: Aggiungi HTML personalizzato

​Nella sezione Above announcements/rewards, incolla:

​Nella sezione Below checkout button, incolla:

​Passaggio 2: Aggiungi CSS personalizzato

​Risultato finale

​Hai ancora bisogno di aiuto?

Panoramica

Come funziona

Passaggio 1: Aggiungi HTML personalizzato

Nella sezione Above announcements/rewards, incolla:

Nella sezione Below checkout button, incolla:

Passaggio 2: Aggiungi CSS personalizzato

Risultato finale

Hai ancora bisogno di aiuto?