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

# Come personalizzare la larghezza del carrello su mobile

> Questo articolo spiega come personalizzare la larghezza del carrello su mobile usando il CSS.

<div id="introduction">
  # **Introduzione**
</div>

Benvenuto in questo tutorial sulla personalizzazione della larghezza del carrello su mobile secondo le tue preferenze! Regolare la larghezza del carrello su mobile può migliorare notevolmente l'esperienza di acquisto dei tuoi clienti, assicurando che il carrello sia facile da visualizzare e da usare su schermi più piccoli. Questa personalizzazione ti permette di controllare il layout, facendo in modo che si integri perfettamente con il design complessivo del tuo negozio e che tutto resti pulito e ordinato.

Questi passaggi sono pensati per proprietari di negozi o sviluppatori con conoscenze di base di CSS. Modificando la larghezza del carrello su mobile, puoi migliorare l'usabilità e rendere il processo di checkout più fluido per i tuoi clienti, aumentando potenzialmente le conversioni e la soddisfazione dei clienti.

Iniziamo e facciamo in modo che il tuo carrello mobile appaia e funzioni esattamente come vuoi tu!

<div id="accessing-custom-css-settings">
  ## **Accedere alle impostazioni Custom CSS**
</div>

Per iniziare a personalizzare il CSS del tuo Upcart, segui questi passaggi:

1. Apri l'**app Upcart** nella tua dashboard.
2. Vai al **Cart Editor**.
3. Apri **Settings** e seleziona la scheda **Custom CSS** (dietro **More settings** se la riga delle schede va in overflow).

<div id="applying-custom-css">
  ## **Applicare il CSS personalizzato**
</div>

Una volta nella sezione Custom CSS, puoi cambiare la larghezza del carrello su mobile seguendo i passaggi qui sotto. Cambia il numero da 90% a qualsiasi valore desideri: più grande è il numero, più spazio occupa il carrello sullo schermo. (nota: questo vale sia per Upcart V1.0 sia per V2.0)

1. Individua l'area di input CSS.
2. Copia e incolla il codice seguente nell'area di input CSS:

```
.upcart-cart {   
  --widthOfMobileCart: 90%;   
}   
  
/* MOBILE WIDTH STYLING*/   
@media only screen and (max-width: 600px) {              
  [class*="styles_CartPreview__right__"] {   
    right: calc(var(--widthOfMobileCart) * -1);   
  }   
  
  [class*="styles_CartPreview__right__"]  
  [class*="styles_active__"] {   
    right: var(--widthOfMobileCart);   
  }   
  
  [class*="styles_CartPreview__"] {  
    width: var(--widthOfMobileCart);   
  }  
  
  .upcart-backdrop,  
  [class*="styles_CartPreview__empty__"],   
  [class*="styles_CartPreview__card__"],   
  [class*="styles_CartPreview__upsells__"],      
  [class*="styles_CartPreview__bottomModules__"],  
  .upcart-cart-body {   
    width: 100% !important;   
  }  
}
```

<div id="conclusion">
  # **Conclusione**
</div>

Seguendo questo tutorial, hai personalizzato con successo la larghezza del carrello su mobile, rendendolo più intuitivo e in linea con il design del tuo negozio. Questi piccoli cambiamenti possono avere un grande impatto sull'esperienza di acquisto dei tuoi clienti, rendendo più facile per loro navigare e acquistare da dispositivi mobili.

<div id="still-need-help">
  ## Hai ancora bisogno di aiuto?
</div>

Se ti serve assistenza con le personalizzazioni, ti consigliamo di consultare uno Shopify Expert per aggiungere HTML, CSS e persino JavaScript al tuo cart drawer.

[Vedi gli Shopify Experts](https://www.shopify.com/partners/directory)