⚠️ Avviso importante Questa personalizzazione funziona solo con la Versione 1 dei moduli del carrello di Upcart. Se hai aggiornato di recente il tuo carrello alla Versione 2, queste personalizzazioni potrebbero non funzionare. Dovrai usare i nuovi selettori forniti per la Versione 2 nella guida alla migrazione. Se le tue personalizzazioni non funzionano come previsto, puoi riportare tu stesso il carrello alla Versione 1: nel Cart Editor, usa il menu a tendina Cart version in cima al menu di sinistra e scegli V1.0 (Legacy). Il menu a tendina appare quando tutti i moduli del carrello sono sulla V2. Attualmente stiamo lavorando a nuovi template di personalizzazione per la Versione 2 dei moduli, che saranno disponibili a breve.

Panoramica

Questa personalizzazione ti permette di nascondere parti specifiche del carrello, come la barra dei premi, se sono presenti determinati prodotti. È utile quando vuoi semplificare l’esperienza del carrello per certi SKU o impedire che promozioni specifiche appaiano insieme a determinati articoli. Questa configurazione usa gli ID prodotto per rilevare quali prodotti sono nel carrello e nasconde un elemento scelto se viene trovata una corrispondenza. Applicherai la logica usando HTML e CSS personalizzati nell’editor di Upcart.

Quando usarla

Nascondere la barra dei premi quando nel carrello ci sono articoli promozionali
Nascondere blocchi di contenuto personalizzato, badge di fiducia o sezioni di upsell in base al tipo di prodotto
Mantenere un flusso di checkout più pulito o più su misura per articoli specifici

Questo approccio richiede conoscenze di base di HTML e JavaScript.

Passaggio 1: Trova gli ID prodotto

Vai su Shopify Admin > Products
Clicca sul prodotto che vuoi targettizzare
Copia l’ID prodotto numerico dall’URL dopo /products/

Esempio:

/products/1234567890 → 1234567890

Userai questi ID nell’array JavaScript che controlla la visibilità.

Passaggio 2: Aggiungi HTML personalizzato

Vai su Upcart > Cart Editor > Settings > Custom HTML
Incolla il codice seguente in entrambe le posizioni HTML Above announcements/rewards e On empty cart screen
Sostituisci i valori in productIDsToExclude con i tuoi ID prodotto
Aggiorna .YOUR-CLASS-HERE per targettizzare l’elemento del carrello che vuoi nascondere (per esempio: .upcart-rewards, .custom-message, .trust-badge)

<script>  
  window.upcartSubscribeCartLoaded((event) => {  
    const items = event.cart.items;  
    const productIDsToExclude = [  
      6958755512411,  
      6958755610712,  
      7736708759774  
    ];  
  
    let cartContainsExcludedItem = false;  
  
    items.forEach((item) => {  
      productIDsToExclude.forEach((id) => {  
        if (item.productId === id) {  
          cartContainsExcludedItem = true;  
        }  
      });  
    });  
  
    const targetElement = window.upcartDocumentOrShadowRoot.querySelector(".YOUR-CLASS-HERE");  
    if (targetElement) {  
      targetElement.style.display = cartContainsExcludedItem ? "none" : "block";  
    }  
  });  
</script>

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

Passaggio 3: CSS di fallback opzionale

Se vuoi assicurarti che l’elemento sia nascosto prima che il carrello si carichi completamente, aggiungi questo nella sezione Custom CSS:

.YOUR-CLASS-HERE {   display: none; }

Nota: questo potrebbe nascondere temporaneamente l’elemento per tutti gli utenti finché il JavaScript non viene eseguito, causando possibili sfarfallii. Nella maggior parte dei casi, è meglio affidarsi al metodo JavaScript.

Risultato finale

Una volta configurato:

L’elemento del carrello targettizzato (come la barra dei premi) verrà nascosto se il carrello contiene uno dei prodotti specificati
L’elemento resta visibile negli altri casi
Puoi riutilizzare questa logica per nascondere o mostrare elementi diversi in base a regole specifiche per prodotto

Hai ancora bisogno di aiuto?

Per personalizzazioni più complesse, ti consigliamo di lavorare con un Shopify Expert. Può aiutarti con HTML, CSS e JavaScript all’interno del tuo cart drawer. Vedi gli Shopify Experts

Riferimento funzionalità del carrello

Riferimento CSS

Ricette di stile

Ricette di funzionalità

Modelli personalizzati

API pubblica di Upcart

Nascondere elementi specifici del carrello usando gli ID prodotto

Panoramica

Quando usarla

Passaggio 1: Trova gli ID prodotto

Passaggio 2: Aggiungi HTML personalizzato

Passaggio 3: CSS di fallback opzionale

Risultato finale

Hai ancora bisogno di aiuto?

​Panoramica

​Quando usarla

​Passaggio 1: Trova gli ID prodotto

​Passaggio 2: Aggiungi HTML personalizzato

​Passaggio 3: CSS di fallback opzionale

​Risultato finale

​Hai ancora bisogno di aiuto?

Panoramica

Quando usarla

Passaggio 1: Trova gli ID prodotto

Passaggio 2: Aggiungi HTML personalizzato

Passaggio 3: CSS di fallback opzionale

Risultato finale

Hai ancora bisogno di aiuto?