Skip to main content
⚠️ 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

  1. Vai su Shopify Admin > Products
  2. Clicca sul prodotto che vuoi targettizzare
  3. Copia l’ID prodotto numerico dall’URL dopo /products/
Esempio:
Userai questi ID nell’array JavaScript che controlla la visibilità.

Passaggio 2: Aggiungi HTML personalizzato

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