> ## 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.

# CSS personalizzato

> Scrivi CSS per personalizzare il design del cart drawer.

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

Questa sezione ti permette di modificare l'aspetto degli elementi esistenti del carrello o di applicare stili all'HTML personalizzato aggiunto tramite l'editor.

<div id="where-to-find-it">
  ## **Dove trovarlo**
</div>

Vai a:\
**Upcart > Cart Editor > Settings > Custom CSS**\
Settings è una fila di schede; Custom CSS è una di queste, insieme a Custom HTML. Se non è visibile, si trova dietro **More settings**.

<div id="how-it-works">
  ## **Come funziona**
</div>

Puoi aggiungere CSS per:

* Dare stile agli elementi predefiniti del carrello
* Modificare l'aspetto dell'HTML personalizzato
* Regolare spaziatura, allineamento, tipografia e altro

Mentre digiti, un **popup di completamento automatico** suggerirà selettori Upcart validi per velocizzare la modifica. Selezionando un suggerimento, la regola viene completata automaticamente e ti aiuta a strutturare il codice. Se le modifiche non appaiono come previsto, consulta i suggerimenti comuni per la risoluzione dei problemi, come aggiornare le cache sia nel browser sia nell'editor di Upcart, verificare la posizione del CSS e assicurarti che le tue regole CSS abbiano la specificità adeguata.

<div id="using-selectors">
  ## **Uso dei selettori**
</div>

Upcart offre un'ampia gamma di selettori personalizzati. Fai clic su **"Show list"** per visualizzare tutte le opzioni disponibili. Evita di usare selettori globali come `body`, `div` o `h3` a meno che non siano limitati con `.upcart-cart`, per evitare modifiche indesiderate al tuo negozio. Nelle situazioni in cui gli stili non vengono applicati correttamente, valuta di aumentare la specificità del CSS o di aggiungere `!important` alle tue regole CSS. In questo modo garantisci che prevalgano su eventuali stili in conflitto. Esempio:

```
.upcart-cart .upcart-checkout-button {    border-radius: 20px !important;    background-color: #CFA17E !important;    color: #1A1A1A !important;}
```

Esempio (selettore sicuro):

```
.upcart-cart h3 { font-size: 20px; }
```

<div id="example-thank-you-message-styling">
  ## **Esempio: stile del messaggio di ringraziamento**
</div>

Supponiamo che tu abbia aggiunto questo HTML personalizzato sotto il pulsante di checkout:

```
<div class="thank-you-message">Thanks for shopping with us!</div>
```

Senza CSS, il messaggio apparirà semplice. Per dargli uno stile:

```css theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.thank-you-message { color: green; font-size: 16px; font-weight: bold; text-align: center; margin-top: 5px; }
```

<div id="common-problems-and-solutions">
  # Problemi comuni e soluzioni
</div>

<div id="css-not-appearing-on-mobile-devices">
  ## Il CSS non appare sui dispositivi mobili
</div>

Se il tuo testo o i tuoi stili personalizzati non sono visibili su mobile:

* Aggiorna la pagina sia nell'**Upcart Editor** sia nel browser mobile per cancellare le versioni memorizzate nella cache.
* Assicurati che sia attiva l'ultima versione pubblicata del carrello.
* Verifica che il CSS sia salvato nella scheda **Custom CSS** in **Upcart > Cart Editor > Settings**.

<div id="discrepancies-between-editor-and-live-store">
  ## Discrepanze tra l'editor e il negozio live
</div>

Gli stili che appaiono correttamente nell'editor ma non sul sito live potrebbero richiedere una maggiore specificità dei selettori o l'aggiunta di `!important` alle regole principali.

```
.upcart-cart .upcart-checkout-button { font-size: 18px !important; background: blue !important; color: white !important; }
```

<div id="incorrect-css-selector-usage">
  ## Uso errato dei selettori CSS
</div>

Verifica che venga presa di mira la classe o l'ID corretto. Includi sempre prefissi come `.upcart-` per gli elementi specifici di Upcart, per evitare risultati indesiderati. Se lo stile non viene applicato come previsto, assicurati che il selettore `.thank-you-message` stia effettivamente puntando all'elemento HTML previsto e verifica che il codice CSS sia inserito nella scheda corretta (Upcart > Cart Editor > Settings > Custom CSS).

***

Supporto per le personalizzazioni:

Il supporto di Upcart non può aiutarti a implementare o eseguire il debug di CSS personalizzato. Per un aiuto avanzato sugli stili, ti consigliamo di collaborare con un esperto Shopify. Per la risoluzione dei problemi del CSS personalizzato, consulta la sezione dei problemi comuni per indicazioni su come risolvere problemi come stili mancanti sui dispositivi mobili, discrepanze tra l'anteprima dell'editor e il negozio live e posizionamento errato dei selettori.