Scopri come usare HTML, CSS e JavaScript per creare funzionalità e stili personalizzati nel tuo cart drawer.
⚠️ Avviso importanteL’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.
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.
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
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.
🔧 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.
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:
Il team di supporto di Upcart non può aiutarti a implementare codice personalizzato. Per modifiche più avanzate, ti consigliamo di ingaggiare un esperto Shopify.
Questa pagina è stata utile?
⌘I
Assistant
Responses are generated using AI and may contain mistakes.
