> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Iniziare con le personalizzazioni di Upcart

> Scopri come usare HTML, CSS e JavaScript per creare funzionalità e stili personalizzati nel tuo cart drawer.

⚠️ **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.](/it/upcart/upcart_v20_migration_guide)

Consulta l'altra documentazione sulle personalizzazioni per le soluzioni V2.0.

<div id="overview">
  # Panoramica
</div>

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](/it/upcart/upcart_customization_policy) così sai cosa è supportato e cosa no dal nostro team.

<div id="add-content-with-html">
  ## Aggiungere contenuti con HTML
</div>

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

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-html-thank-you-message.gif?s=a22b53d145994e29c3e327b272e1ce33" alt="Editor Custom HTML di Upcart che aggiunge un messaggio di ringraziamento sopra il pulsante di checkout" width="2060" height="1080" data-path="images/upcart/customizations-custom-html-thank-you-message.gif" />

***

<div id="add-logic-with-javascript">
  ## Aggiungere logica con JavaScript
</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](/it/upcart/limit_the_cart_to_one_upsell_at_a_time):**

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

<Note>
  **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.
</Note>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-html-hide-upsells.gif?s=eec41b0784bb4db819ee4ae1cd8a25e5" alt="Editor Custom HTML Scripts Before Load di Upcart con JavaScript che nasconde il modulo degli upsell" width="2060" height="1080" data-path="images/upcart/customizations-custom-html-hide-upsells.gif" />

***

🔧 **Nota per sviluppatori:**\
Upcart fornisce una [documentazione completa della Public API](https://rokt.notion.site/upcart-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.

***

<div id="style-your-cart-with-css">
  ## Dare stile al tuo carrello con CSS
</div>

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

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-css-editor-styling.gif?s=f676b9eef6e30c6c122028c0e7a38b6e" alt="Editor Custom CSS di Upcart che stilizza il colore del titolo degli upsell con una conferma di modifiche salvate" width="2060" height="1080" data-path="images/upcart/customizations-custom-css-editor-styling.gif" />

***

<div id="additional-resources">
  ## Risorse aggiuntive
</div>

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

* [W3Schools](https://www.w3schools.com/)
* [Codecademy](https://www.codecademy.com/?g_network=g\&g_productchannel=\&g_adid=528849219280\&g_locinterest=\&g_keyword=codecademy\&g_acctid=243-039-7011\&g_adtype=\&g_keywordid=kwd-41065460761\&g_ifcreative=\&g_campaign=account\&g_locphysical=9001394\&g_adgroupid=70492864474\&g_productid=\&g_source=%7Bsourceid%7D\&g_merchantid=\&g_placement=\&g_partition=\&g_campaignid=1726903838\&g_ifproduct=\&utm_id=t_kwd-41065460761:ag_70492864474:cp_1726903838:n_g:d_c\&utm_source=google\&utm_medium=paid-search\&utm_term=codecademy\&utm_campaign=INTL_Brand_Exact\&utm_content=528849219280\&g_adtype=search\&g_acctid=243-039-7011\&gad_source=1\&gad_campaignid=1726903838\&gbraid=0AAAAAon8KZFBIKQJ4KKGpsSVHO3yi2Njl\&gclid=CjwKCAjwx-zHBhBhEiwA7Kjq61-cNVEH2PzXZCcjcqIZS-0mCe8EEyPBJYyj4QRn5bma8OMqd3IJrBoCwjoQAvD_BwE)
* [Mozilla Developer Network (MDN)](https://developer.mozilla.org/en-US/)

<div id="support-for-customizations">
  ## Supporto per le personalizzazioni
</div>

Il team di supporto di Upcart non può aiutarti a implementare codice personalizzato. Per modifiche più avanzate, ti consigliamo di ingaggiare un [esperto Shopify](https://www.shopify.com/ca/partners/directory).