> ## 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. # Libreria dei selettori CSS di Upcart (V1) > Questo articolo illustra i selettori CSS disponibili in Upcart Versione 1, permettendoti di applicare stili personalizzati al cart drawer legacy. 📝 **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](/it/upcart/upcart_css_selector_library_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](/it/upcart/upcart_customization_policy). Consigliamo di consultare uno Shopify Expert per soluzioni di codice personalizzato. [Vedi gli Shopify Experts](https://www.shopify.com/ca/partners/directory)
# 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**](/it/upcart/express_payments_module) 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](/it/upcart/custom_css):** scopri come aggiungere CSS personalizzato in Upcart in sicurezza. * **[Introduzione alle personalizzazioni in Upcart](/it/upcart/getting_started_with_upcart_customizations):** capisci come funziona la personalizzazione e da dove iniziare. * **[Usa l'AI per scrivere codice personalizzato per Upcart](/it/upcart/ai_prompt_suggestions_for_adding_custom_code_to_your_upcart_settings):** ottieni aiuto per scrivere CSS o JavaScript con semplici prompt. * **[Best practice per aumentare le conversioni del carrello](/it/upcart/best_practices_to_increase_upcart_conversions):** ottimizza il design del tuo carrello con consigli comprovati.