> ## 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.
# Modulo Design
> Questo articolo spiega come personalizzare le impostazioni di design di Upcart.
Il modulo Design ti permette di personalizzare l'aspetto del tuo carrello, inclusi layout, colori del brand e stili dei pulsanti.
# Generale
## Eredita i font dal tema
Questa impostazione consente a Upcart di usare i font definiti nelle impostazioni del tuo tema Shopify. Per visualizzare le tue scelte di font attuali, apri il [Theme Editor di Shopify](https://help.shopify.com/en/manual/online-store/themes/customizing-themes#access-the-theme-editor) e vai alla sezione Typography.
## **🚧 Anteprima del carrello 🚧**
I font ereditati dal tuo tema non appariranno nella finestra di anteprima di Upcart, ma verranno visualizzati correttamente sul tuo negozio live.
## Mostra i prezzi barrati
Abilita questa impostazione per mostrare un prezzo barrato (noto anche come [Compare At Price](https://help.shopify.com/en/manual/discounts/sales#set-a-compare-at-price-for-a-product)) accanto a ogni articolo nel carrello. Questo riflette i prezzi scontati, in modo simile alle tue pagine prodotto.
## Abilita la riga del subtotale
Aggiunge una riga del subtotale al carrello. Attivandola compare anche un campo **Subtotal text color** sotto **Colors**, così il subtotale può essere stilizzato separatamente dal resto del testo del carrello. Con l'impostazione disattivata, quel campo colore è nascosto.
## Larghezza del carrello
Controlla la larghezza del drawer, impostata separatamente per ciascun viewport:
* **Desktop** - **Default** o **Wide**
* **Mobile** - **Full** (da bordo a bordo) o **Nearly full** (un piccolo spazio al bordo)
***
# Colori
## Colore di sfondo
Imposta il colore di sfondo principale del carrello, esclusi il footer e le card di upsell.
## Colore accento del carrello
Controlla il colore di sfondo del footer del carrello e delle card degli articoli di upsell.
## Colore del testo del carrello
Definisce il colore di tutto il testo del carrello, tranne il testo dei pulsanti e il testo di risparmio, che sono controllati separatamente.
## Colore del testo di risparmio
Imposta il colore del testo di risparmio mostrato sotto il prezzo del prodotto.
## Colore del testo del subtotale
Imposta il colore della riga del subtotale. Questo campo appare solo quando **Enable subtotal line** è attivato in **General**.
## 🚧 **Anteprima del carrello** 🚧
L'editor di anteprima potrebbe non riflettere con precisione lo stile finale. Il tema del tuo negozio potrebbe includere CSS personalizzato che influisce sulla dimensione o sul colore del testo. Verifica sempre le modifiche sul tuo negozio live.
***
# Impostazioni dei pulsanti
Upcart offre opzioni avanzate di stile per i pulsanti, inclusa la personalizzazione specifica del pulsante di checkout. Ciò include metodi per regolazioni CSS e l'integrazione con gli strumenti di branding di Shopify.
## Raggio degli angoli
Regola l'arrotondamento degli angoli dei pulsanti, da **0 px a 40 px**. `0` produce angoli netti e squadrati; `40` è il valore più arrotondato consentito dal cursore. Il valore si applica insieme al pulsante di checkout, al pulsante di upsell, al pulsante di sconto e al pulsante di upgrade.
Il cursore si ferma a 40 px. Per un pulsante completamente a forma di pillola ti serve il [CSS personalizzato](/it/upcart/custom_css) — vedi [Personalizzazione CSS avanzata](#advanced-css-customization-for-checkout-buttons) qui sotto.
## Colore dei pulsanti
Imposta il colore di sfondo per tutti i pulsanti nel carrello, inclusi:
* Pulsante di checkout
* Pulsante "Add to Cart" degli upsell
* Pulsante "Apply" degli sconti
* Pulsante di upgrade all'abbonamento. Puoi personalizzare il colore di questi pulsanti tramite il Cart Editor. Per ulteriori personalizzazioni avanzate come modifiche CSS, consulta la sezione sulla personalizzazione avanzata.
## Colore del testo dei pulsanti
Specifica il colore del testo usato in tutti i pulsanti del carrello.
## Colore del testo dei pulsanti al passaggio del mouse
Controlla il colore del testo dei pulsanti quando un cliente ci passa sopra con il mouse. Ad esempio, se impostato su verde, il testo diventerà verde al passaggio del mouse.
## Mostra il pulsante Continue shopping
Aggiunge un pulsante **Continue shopping** al carrello, permettendo ai clienti di chiudere il drawer e tornare a navigare senza usare l'icona di chiusura.
# Personalizzazione CSS avanzata per i pulsanti di checkout
Per modifiche di design significative, puoi usare codice Custom CSS per modificare il pulsante di checkout:
1. Nel Cart Editor, apri **Settings** e seleziona la scheda **Custom CSS**.
2. Utilizza il selettore CSS pertinente, come `.checkout`. Esempi di snippet CSS: per creare un pulsante a forma di pillola:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.checkout { border-radius: 9999px !important;}
```
Per aggiungere un bordo nero:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.checkout { border: 2px solid black !important;}
```
Sostituisci `.checkout` con la classe CSS effettiva del tuo pulsante. Ulteriori stili includono effetti hover, padding, colori del testo o font.
# Integrare il branding di Shopify per la personalizzazione dei pulsanti
Se usi Shopify, puoi aggiornare il design del tuo pulsante di checkout dall'admin di Shopify:
1. Accedi al tuo Shopify Admin.
2. Vai a `Settings > Checkout > Customize`.
3. Utilizza le opzioni di branding per modificare il font, l'arrotondamento o il colore per un design coerente.
