📝 Nota I selettori V1 hanno come target i moduli del cart drawer legacy. Se hai effettuato l’upgrade alla V2, i selettori dei moduli in questa pagina non corrispondono più — consulta la libreria dei selettori CSS V2 per i selettori attuali. Vale la pena conoscere due eccezioni: .upcart-cart e .upcart-cart-body si trovano sulla shell del drawer anziché su un modulo, quindi si applicano ancora sulla V2. Le correzioni di layout che hanno come target il drawer nel suo insieme (limitarne la larghezza, fermare l’overflow orizzontale) continuano a funzionare dopo un upgrade.

Panoramica

Se vuoi cambiare l’aspetto del tuo carrello, come nascondere un prezzo, regolare la dimensione del testo o riposizionare un pulsante, questo è il punto di partenza. Questa libreria di selettori CSS fornisce gli strumenti necessari per apportare quelle modifiche con il tuo codice personalizzato. Tutti i selettori CSS disponibili sono raggruppati in questo articolo, insieme a link a risorse utili per scrivere e testare i tuoi stili.

Nota

Sebbene mettiamo a disposizione questa libreria per tua comodità, il team di supporto di Upcart non può aiutare a costruire o correggere codice personalizzato. Questo fa parte della nostra politica di personalizzazione. Consigliamo di consultare uno Shopify Expert per soluzioni di codice personalizzato. Vedi gli Shopify Experts

Come usare i selettori CSS di Upcart

Questo articolo è una libreria di selettori CSS che puoi usare per dare stile e personalizzare il cart drawer di Upcart. Ogni selettore ha come target una parte specifica del carrello — come l’header, le righe dei prodotti, gli upsell, il modulo delle ricompense e altro ancora. Puoi usare questi selettori per:

Nascondere o ridisegnare elementi
Cambiare spaziature, font o colori
Regolare il layout in base al branding del tuo store

Per applicare il tuo CSS, apri il Cart Editor, vai su Settings, seleziona la scheda Custom CSS e incolla i tuoi stili nell’editor.

Cosa sapere prima di aggiungere CSS

Prima di lanciarti nei tuoi stili personalizzati, ecco alcuni suggerimenti per far andare tutto liscio. Renderanno più facile testare le modifiche, evitare sorprese e ottenere l’aspetto desiderato senza rompere nulla nel carrello.

Checklist per la personalizzazione CSS:

Testa in un ambiente sicuro: quando possibile, usa un’anteprima o un tema non pubblicato prima di andare live.
Inizia in piccolo: fai una modifica alla volta, così è più facile capire cosa ha funzionato o no.
Incolla gli stili nel posto giusto: usa il campo Upcart Editor > Settings > Custom CSS per aggiungere il tuo codice.
Usa lo strumento Inspect: fai clic con il tasto destro sugli elementi nel browser e seleziona Inspect per trovare e testare i selettori dal vivo.
Evita supposizioni: non tutti gli elementi appaiono in tutti i carrelli — testa con carrelli diversi (con/senza ricompense, upsell, ecc.).

Libreria dei selettori CSS

Di seguito trovi un elenco di tutti i selettori CSS disponibili in Upcart. Sono raggruppati per modulo (come header, prodotti, upsell, ecc.) per aiutarti a trovare più facilmente cosa vuoi personalizzare. Usalo come riferimento quando scrivi i tuoi stili.

Impostazioni generali

Modulo Design


Selettore CSS	Descrizione
`.upcart-cart`	Contenitore principale del cart drawer.
`.upcart-cart-body`	Contiene il contenuto principale del carrello.
`.upcart-backdrop`	L’overlay scuro che appare dietro il carrello.

Modulo Header


Selettore CSS	Descrizione
`.upcart-header`	Contenitore dell’header del carrello, inclusi logo e pulsante di chiusura.
`.upcart-header-close-button`	Pulsante usato per chiudere il cart drawer.
`.upcart-header-close-button-icon`	L’icona mostrata all’interno del pulsante di chiusura.
`.upcart-header-logo`	Mostra l’immagine del logo nell’header del carrello.
`.upcart-header-text`	Il testo del titolo mostrato nell’header del carrello.

Impostazioni del corpo

Modulo Annunci


Selettore CSS	Descrizione
`.upcart-announcement`	Banner o sezione degli annunci all’interno del carrello.
`.upcart-announcement-skeleton`	Segnaposto skeleton per la sezione degli annunci.

Modulo Ricompense


Selettore CSS	Descrizione
`.upcart-rewards`	Contenitore principale della sezione ricompense.
`.upcart-rewards-message`	Mostra i messaggi di avanzamento relativi alle ricompense.
`.upcart-rewards-bar-background`	Livello di sfondo della barra di avanzamento delle ricompense.
`.upcart-rewards-bar-foreground`	Riempimento in primo piano/avanzamento della barra delle ricompense.
`.upcart-rewards-tier`	Rappresenta un livello specifico nel sistema di ricompense.
`.upcart-rewards-tier-circle`	Indicatore circolare visivo per un livello di ricompensa.
`.upcart-rewards-tier-icon`	Icona all’interno del cerchio di un livello di ricompensa.
`.upcart-rewards-tier-description`	Testo descrittivo sotto ogni livello di ricompensa.
`.upcart-rewards-skeleton`	Contenitore skeleton per la sezione ricompense.
`.upcart-rewards-message-skeleton`	Skeleton per il messaggio di avanzamento delle ricompense.
`.upcart-rewards-bar-skeleton`	Skeleton per la barra di avanzamento delle ricompense.

Modulo Raccomandazioni


Selettore CSS	Descrizione
`.upcart-recommendation-module`	Wrapper per l’intero modulo di raccomandazione prodotti.
`.upcart-recommendations-title`	Testo del titolo della sezione raccomandazioni.
`.upcart-recommendations-shop-now-button`	Pulsante per acquistare un prodotto raccomandato direttamente dal carrello.

Modulo Upgrade abbonamento


Selettore CSS	Descrizione
`.upcart-subscription-upgrade-section`	Sezione per promuovere gli upgrade di abbonamento nel carrello.
`.upcart-subscription-upgrade-button`	Pulsante usato per attivare un upgrade di abbonamento.
`.upcart-subscription-upgrade-dropdown`	Menu a discesa per selezionare le opzioni di upgrade di abbonamento disponibili.

Modulo Upsell


Selettore CSS	Descrizione
`.upcart-upsells`	Contenitore principale della sezione upsell.
`.upcart-upsells-module`	Wrapper per il modulo upsell.
`.upcart-upsells-title`	Titolo della sezione upsell.
`.upcart-upsells-button`	Pulsante per aggiungere gli articoli di upsell al carrello.
`.upcart-upsell-item-card`	Layout a scheda per ogni prodotto di upsell.
`.upcart-upsell-item-title`	Titolo del prodotto di upsell.
`.upcart-upsell-item-image-wrapper`	Wrapper attorno all’immagine del prodotto di upsell.
`.upcart-upsell-item-image`	Immagine del prodotto di upsell.
`.upcart-upsell-item-price`	Prezzo dell’articolo di upsell.
`.upcart-upsell-item-price-row`	Riga contenente prezzo e prezzo di confronto.
`.upcart-upsell-item-compare-price`	Prezzo originale (barrato) per l’upsell.
`.upcart-upsell-item-variant-selector`	Menu a discesa delle varianti per i prodotti di upsell.

Impostazioni prodotto


Selettore CSS	Descrizione
`.upcart-products-section`	Contenitore di tutti i prodotti nel carrello.
`.upcart-product-item`	Wrapper per un singolo articolo prodotto.
`.upcart-product-title`	Nome del prodotto nel carrello.
`.upcart-product-title-link`	Link che avvolge il titolo del prodotto.
`.upcart-item-prices-row`	Riga che contiene le informazioni sul prezzo.
`.upcart-item-price`	Prezzo finale mostrato al cliente.
`.upcart-item-compare-price`	Prezzo originale (barrato).
`.upcart-product-savings`	Risparmio specifico per un articolo del carrello.
`.upcart-item-option`	Contenitore per le opzioni prodotto come taglia o colore.
`.upcart-item-option-category`	Etichetta per la categoria dell’opzione prodotto.
`.upcart-item-option-value`	Valore dell’opzione prodotto selezionata.
`.upcart-item-properties`	Wrapper per metadati aggiuntivi del prodotto.
`.upcart-item-property`	Singola proprietà del prodotto.
`.upcart-item-property-subscription`	Mostra i dettagli dell’abbonamento per l’articolo.
`.upcart-product-quantity-input`	Campo di input della quantità per il prodotto.
`.upcart-product-quantity-minus`	Pulsante per diminuire la quantità.
`.upcart-product-quantity-plus`	Pulsante per aumentare la quantità.
`.upcart-product-image-wrapper`	Wrapper attorno all’immagine del prodotto.
`.upcart-quantity-warning`	Contenitore per eventuali messaggi di limite di quantità.
`.upcart-quantity-warning-text`	Testo dell’avviso di quantità mostrato all’utente.

Modulo Add-on


Selettore CSS	Descrizione
`.upcart-addons`	Contenitore principale della sezione add-on.
`.upcart-addons-title`	Titolo della sezione add-on.
`.upcart-addons-product-description`	Descrizione del prodotto add-on.
`.upcart-addons-price`	Prezzo del prodotto add-on.
`.upcart-addons-compare-price`	Prezzo originale (barrato) dell’add-on.
`.upcart-addons-toggle`	Interruttore per aggiungere/rimuovere un add-on.
`.upcart-addons-image-wrapper`	Wrapper per l’immagine dell’add-on.

Modulo Codici sconto

Riga dei risparmi


Selettore CSS	Descrizione
`.upcart-savings-row`	Wrapper per l’intera sezione sconti/risparmi nel carrello.
`.styles_Footer__savingsCodes__`	Contenitore per l’etichetta (“Discounts”) e i codici sconto associati.
`.upcart-discount-code-badge`	Wrapper per ogni badge di codice sconto mostrato nell’interfaccia.
`.upcart-discount-code-icon`	Contenitore per l’icona dello sconto (es. il simbolo SVG del biglietto).
`.upcart-discount-code-text`	Rappresentazione testuale del codice sconto (es. “AUTO 5”).
`.upcart-savings-amount`	Mostra l’importo effettivamente risparmiato con gli sconti.

Modulo Pagamenti express

Nota

I pulsanti Express Payments in Upcart fungono da contenitori visivi, mentre il contenuto e le funzionalità al loro interno sono completamente controllati da Shopify. Di conseguenza, non possiamo modificarne il comportamento o l’aspetto. Consulta la guida al modulo Express Payments per maggiori informazioni.


Selettore CSS	Descrizione
`.upcart-express-pay-buttons-container`	Contenitore per tutti i pulsanti di pagamento express.
`.upcart-express-pay-buttons-row`	Layout a riga per i pulsanti di pagamento express.
`.upcart-express-pay-button`	Selettore generico per un pulsante di pagamento express.
`.upcart-express-pay-button-shop-pay`	Pulsante specifico per Shop Pay.
`.upcart-express-pay-button-google-pay`	Pulsante specifico per Google Pay.
`.upcart-express-pay-button-paypal`	Pulsante specifico per PayPal.
`.upcart-express-pay-button-apple-pay`	Pulsante specifico per Apple Pay.
`.upcart-express-pay-button-amazon-pay`	Pulsante specifico per Amazon Pay.
`.upcart-express-pay-button-meta-pay`	Pulsante specifico per Meta Pay.

Modulo Trust badge


Selettore CSS	Descrizione
`.upcart-trust-badge`	Contenitore per i trust badge.
`.upcart-trust-badge-image`	Elemento immagine usato in un trust badge.

Modulo Note aggiuntive


Selettore CSS	Descrizione
`.NotesModule_NotesModule__`	Contenitore per le note aggiuntive.
`.NotesModule_NotesModule__titleContainer__`	Contenitore del titolo della sezione note
`.NotesModule_NotesModule__dropdownContainer__`	Titolo per il menu a discesa della sezione note
`.NotesModule_NotesModule__textModule__ textarea`	Area di input per aggiungere una nota personalizzata al carrello.

Modulo Impostazioni di Upcart

Selettori skeleton


Selettore CSS	Descrizione
`.upcart-skeleton`	Wrapper skeleton generale di caricamento per il carrello.
`.upcart-product-item-skeleton`	Segnaposto durante il caricamento di un prodotto.
`.upcart-product-image-skeleton`	Segnaposto per un’immagine di prodotto.
`.upcart-product-title-skeleton`	Segnaposto per il testo del titolo del prodotto.
`.upcart-product-price-container-skeleton`	Segnaposto per l’area dei prezzi.
`.upcart-product-quantity-skeleton`	Segnaposto per i controlli della quantità.
`.upcart-item-option-skeleton`	Segnaposto per le opzioni dell’articolo.
`.upcart-upsells-module-skeleton`	Skeleton per il modulo upsell.
`.upcart-upsells-title-skeleton`	Skeleton per il titolo della sezione upsell.
`.upcart-upsell-item-image-skeleton`	Skeleton per l’immagine del prodotto di upsell.
`.upcart-upsell-item-title-skeleton`	Skeleton per il titolo del prodotto di upsell.
`.upcart-upsell-item-price-skeleton`	Skeleton per il prezzo del prodotto di upsell.
`.upcart-upsells-button-skeleton`	Skeleton per il pulsante di azione dell’upsell.
`.upcart-trust-badge-skeleton`	Skeleton per il contenitore del trust badge.
`.upcart-trust-badge-image-skeleton`	Skeleton per l’immagine del trust badge.
`.upcart-announcement-skeleton`	Segnaposto skeleton per gli annunci.
`.upcart-rewards-skeleton`	Skeleton per la sezione ricompense.
`.upcart-rewards-message-skeleton`	Skeleton per i messaggi delle ricompense.
`.upcart-rewards-bar-skeleton`	Skeleton per la barra di avanzamento delle ricompense.
`.upcart-addons-skeleton`	Skeleton per la sezione add-on.
`.upcart-addons-image-wrapper-skeleton`	Skeleton per l’immagine del prodotto add-on.
`.upcart-addons-skeleton-text-container`	Skeleton per il contenuto testuale negli add-on.
`.upcart-discount-code-module-skeleton`	Skeleton per il modulo del codice sconto.
`.upcart-discount-code-input-skeleton`	Skeleton per l’input del codice sconto.
`.upcart-discount-code-button-skeleton`	Skeleton per il pulsante di applicazione del codice sconto.
`.upcart-checkout-button-container-skeleton`	Skeleton per il wrapper del pulsante di checkout.
`.upcart-checkout-button-skeleton`	Skeleton per il pulsante di checkout.
`.upcart-express-pay-buttons-container-skeleton`	Skeleton per il contenitore dei pagamenti express.
`.upcart-express-pay-button-skeleton`	Skeleton per il singolo pulsante di pagamento express.

Risorse utili per iniziare:

Iniziare con il CSS personalizzato: scopri come aggiungere CSS personalizzato in Upcart in sicurezza.
Introduzione alle personalizzazioni in Upcart: capisci come funziona la personalizzazione e da dove iniziare.
Usa l’AI per scrivere codice personalizzato per Upcart: ottieni aiuto per scrivere CSS o JavaScript con semplici prompt.
Best practice per aumentare le conversioni del carrello: ottimizza il design del tuo carrello con consigli comprovati.

Riferimento funzionalità del carrello

Riferimento CSS

Ricette di stile

Ricette di funzionalità

Modelli personalizzati

API pubblica di Upcart

Libreria dei selettori CSS di Upcart (V1)

Panoramica

Nota

Come usare i selettori CSS di Upcart

Cosa sapere prima di aggiungere CSS

Checklist per la personalizzazione CSS:

Libreria dei selettori CSS

Impostazioni generali

Modulo Design

Modulo Header

Impostazioni del corpo

Modulo Annunci

Modulo Ricompense

Modulo Raccomandazioni

Modulo Upgrade abbonamento

Modulo Upsell

Impostazioni prodotto

Impostazioni del footer

Modulo Add-on

Modulo Codici sconto

Riga dei risparmi

Modulo Pagamenti express

Nota

Modulo Trust badge

Modulo Note aggiuntive

Modulo Impostazioni di Upcart

Selettori skeleton

Risorse utili per iniziare:

​Panoramica

​Nota

​Come usare i selettori CSS di Upcart

​Cosa sapere prima di aggiungere CSS

​Checklist per la personalizzazione CSS:

​Libreria dei selettori CSS

​Impostazioni generali

​Modulo Design

​Modulo Header

​Impostazioni del corpo

​Modulo Annunci

​Modulo Ricompense

​Modulo Raccomandazioni

​Modulo Upgrade abbonamento

​Modulo Upsell

​Impostazioni prodotto

​Impostazioni del footer

​Modulo Add-on

​Modulo Codici sconto

​Riga dei risparmi

​Modulo Pagamenti express

​Nota

​Modulo Trust badge

​Modulo Note aggiuntive

​Modulo Impostazioni di Upcart

​Selettori skeleton

​Risorse utili per iniziare:

Panoramica

Nota

Come usare i selettori CSS di Upcart

Cosa sapere prima di aggiungere CSS

Checklist per la personalizzazione CSS:

Libreria dei selettori CSS

Impostazioni generali

Modulo Design

Modulo Header

Impostazioni del corpo

Modulo Annunci

Modulo Ricompense

Modulo Raccomandazioni

Modulo Upgrade abbonamento

Modulo Upsell

Impostazioni prodotto

Impostazioni del footer

Modulo Add-on

Modulo Codici sconto

Riga dei risparmi

Modulo Pagamenti express

Nota

Modulo Trust badge

Modulo Note aggiuntive

Modulo Impostazioni di Upcart

Selettori skeleton

Risorse utili per iniziare: