⚠️ Avviso importante L’esempio di personalizzazione in questo documento funziona solo con la V1.0 dei moduli carrello di Upcart. Se hai recentemente aggiornato il tuo carrello alla Versione 2, questi codici di personalizzazione non funzioneranno. Dovrai usare i nuovi selettori forniti per la Versione 2 nella guida alla migrazione. Consulta l’altra documentazione sulle personalizzazioni per le soluzioni V2.0.

Panoramica

Upcart ti dà il pieno controllo per modificare l’aspetto e il comportamento del carrello usando Custom HTML, Custom CSS e JavaScript. Questi strumenti ti permettono di aggiungere nuove funzionalità, dare stile al tuo carrello per adattarlo al tuo brand o introdurre logica per migliorare il funzionamento del tuo carrello. Questa guida copre le basi di ciascuno e mostra come iniziare. Ogni sezione include un rapido esempio visivo per aiutarti a capire come appaiono le modifiche nella pratica.

Prima di iniziare, assicurati di rivedere la politica di personalizzazione di Upcart così sai cosa è supportato e cosa no dal nostro team.

Aggiungere contenuti con HTML

L’HTML viene usato per aggiungere contenuti statici come testi, banner o pulsanti nel tuo carrello. Puoi scegliere tra più posizioni HTML nell’editor Custom HTML (ad es. sopra il pulsante di checkout, in fondo al carrello, tra gli articoli). Casi d’uso comuni:

Aggiungere messaggi personalizzati
Inserire avvertenze legali o link alle policy
Evidenziare scadenze di spedizione o informazioni di consegna

Esempio:

<div style="text-align: center; font-weight: bold;">  
  Thanks for shopping with us!  
</div

Editor Custom HTML di Upcart che aggiunge un messaggio di ringraziamento sopra il pulsante di checkout

Aggiungere logica con JavaScript

JavaScript controlla il comportamento e la logica del carrello. Puoi usarlo per mostrare o nascondere elementi, applicare stili in modo condizionale o rispondere alle modifiche del carrello in tempo reale. Avvolgerai il tuo codice in un tag <script> e lo inserirai in Custom HTML > Scripts (Before Load) o Above Announcements, a seconda di quando deve essere eseguito. Esempio: Limitare il carrello a un upsell alla volta:

<script>  
  // Show upsells again when upsells are removed  
  window.upcartSubscribeItemRemoved((event) => {  
    if (event.item?.properties?.__upcartUpsell) {  
      const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
      if (upsells) upsells.style.display = "block";  
    }  
  });  
  
  // Hide upsells once one is added  
  window.upcartSubscribeUpsellsAddedToCart(() => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    if (upsells) upsells.style.display = "none";  
  });  
  
  // Check for upsell in cart when it loads  
  window.upcartSubscribeCartLoaded((event) => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    const items = event.cart.items || [];  
    const hasUpsell = items.some(item => item?.properties?.__upcartUpsell);  
    if (upsells && hasUpsell) {  
      upsells.style.display = "none";  
    }  
  });  
</script>

Nota legacy: le callback window.upcartOnItemRemoved, window.upcartOnAddUpsell e window.upcartOnCartLoaded funzionano ancora, ma sono deprecate e registrano avvisi in console. Usa upcartSubscribeItemRemoved, upcartSubscribeUpsellsAddedToCart e upcartSubscribeCartLoaded per tutti i nuovi script.

Editor Custom HTML Scripts Before Load di Upcart con JavaScript che nasconde il modulo degli upsell

🔧 Nota per sviluppatori:
Upcart fornisce una documentazione completa della Public API che elenca tutte le funzioni, le variabili e i pattern di best practice disponibili per le personalizzazioni avanzate. Ti consigliamo di consultarla quando crei script o integrazioni più complessi.

Dare stile al tuo carrello con CSS

Il CSS controlla l’aspetto degli elementi nel tuo carrello. Usalo per regolare spaziature, colori, dimensioni dei font o per nascondere elementi indesiderati. Custom CSS è una delle schede in Settings (dietro More settings se la fila di schede è troppo piena). Casi d’uso comuni:

Cambiare i colori del titolo del prodotto o dei pulsanti
Regolare la dimensione o l’allineamento del font
Aggiungere spaziatura tra le sezioni

Esempio: cambiare il colore del titolo degli upsell nella V1.0:

.upcart-upsells-title {  
  color: #C20075 !important;  
  font-size: 25px;  
  font-style: italic;  
  text-align: center;  
}

Editor Custom CSS di Upcart che stilizza il colore del titolo degli upsell con una conferma di modifiche salvate

Risorse aggiuntive

Vuoi migliorare le tue competenze in HTML, CSS o JavaScript? Dai un’occhiata a questi strumenti gratuiti:

Supporto per le personalizzazioni

Il team di supporto di Upcart non può aiutarti a implementare codice personalizzato. Per modifiche più avanzate, ti consigliamo di ingaggiare un esperto Shopify.

Per iniziare

Moduli del carrello

Impostazioni del carrello

Pulsante carrello fisso

Multicart

Personalizzazioni

Analisi

Integrazioni e compatibilità

Fatturazione e account

Risoluzione dei problemi

Iniziare con le personalizzazioni di Upcart

Panoramica

Aggiungere contenuti con HTML

Aggiungere logica con JavaScript

Dare stile al tuo carrello con CSS

Risorse aggiuntive

Supporto per le personalizzazioni

​Panoramica

​Aggiungere contenuti con HTML

​Aggiungere logica con JavaScript

​Dare stile al tuo carrello con CSS

​Risorse aggiuntive

​Supporto per le personalizzazioni

Panoramica

Aggiungere contenuti con HTML

Aggiungere logica con JavaScript

Dare stile al tuo carrello con CSS

Risorse aggiuntive

Supporto per le personalizzazioni