Skip to main content
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 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) accanto a ogni articolo nel carrello. Questo riflette i prezzi scontati, in modo simile alle tue pagine prodotto. Articolo del carrello che mostra il prezzo originale barrato accanto al prezzo scontato e al risparmio

​
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. Impostazioni Colors di Upcart con il colore accento del carrello applicato a card di upsell rosa

​
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. Articolo del carrello con il testo dell'importo di risparmio evidenziato in magenta

​
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 — vedi Personalizzazione CSS avanzata qui sotto.
Cursore del raggio degli angoli impostato a 16 pixel che arrotonda il pulsante di checkout

​
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:
    Per aggiungere un bordo nero:
    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.
Anteprima del cart drawer di Upcart con un pulsante Add di upsell e il pulsante di checkout