⚠️ AVVISO IMPORTANTE Questi selettori si applicano solo alla Versione 2 (V2) dei moduli del carrello Upcart. Se stai usando la Versione 1 (V1), questi selettori non funzioneranno. Per i carrelli V1, consulta la documentazione dei selettori CSS della Versione 1, che copre la struttura e i selettori dei moduli legacy. Per verificare quale versione stai usando, apri il Cart Editor e guarda in cima al menu di sinistra. Un menu a discesa Cart version appare lì quando ogni modulo del carrello è sulla V2; se non lo vedi, il tuo carrello ha ancora moduli V1. Per maggiori informazioni sulla migrazione da V1 a V2, consulta la guida alla migrazione V2.0.

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

I seguenti selettori funzionano con la Versione 2 dei moduli del carrello Upcart. La V2 introduce un sistema di denominazione strutturato con prefissi di classe public e internal.

Linee guida importanti per i selettori V2

⚠️ Usa solo i selettori public per la personalizzazione

I selettori public (con prefisso upcart-public-) fanno parte dell’API stabile e sono sicuri da usare per gli stili personalizzati
I selettori internal (con prefisso upcart-internal-) sono riservati all’uso interno e possono cambiare senza preavviso

✅ FAI: usa i nomi di classe public per gli stili

/* ✅ Correct usage */   
.upcart-public-header {     
    font-size: 18px;     
    font-weight: bold;   
}

❌ NON FARE: sovrascrivere i nomi di classe internal o usare selettori profondi

/* ❌ Avoid this */   
.upcart-internal-header {     
    font-size: 18px;     
    font-weight: bold;   
}    
  
/* ❌ Avoid this */   
.upcart-public-upsell div a {     
   font-size: 18px;     
   font-weight: bold;   
}

Selettori CSS

Componenti generali


Selettore CSS	Descrizione
`.upcart-public-skeleton`	Wrapper skeleton generale di caricamento per il carrello.
`.upcart-public-component__button`	Componente pulsante generale usato in tutti i moduli.
`.upcart-public-component-loader`	Componente spinner di caricamento.
`.upcart-public-component-tag`	Wrapper del componente tag.
`.upcart-public-component-tag__icon`	Icona all’interno di un tag.
`.upcart-public-component-tag__text`	Contenuto testuale di un tag.
`.upcart-public-component-tag__remove-button`	Pulsante di rimozione (“x”) all’interno di un tag rimovibile.
`.upcart-public-component-collapse__dropdown-container`	Contenitore per le sezioni a discesa comprimibili.
`.upcart-public-component-collapse__expand-icon`	Icona che indica lo stato espandi/comprimi.
`.upcart-public-component-carousel__container`	Wrapper esterno di un carosello.
`.upcart-public-component-carousel__window`	Finestra di ritaglio in cui scorrono le slide.
`.upcart-public-component-carousel__track`	Il binario mobile che contiene le slide.
`.upcart-public-component-carousel__slide`	Una singola slide del carosello.
`.upcart-public-component-carousel__button`	Pulsante freccia precedente/successivo.
`.upcart-public-component-progress-bar`	Componente barra di avanzamento semplice (non segmentata).
`.upcart-public-component-progress-bar__track`	Binario della barra di avanzamento semplice.
`.upcart-public-component-progress-bar__fill`	Porzione riempita della barra di avanzamento semplice.
`.upcart-public-component-progress-bar__milestone`	Indicatore di traguardo sulla barra di avanzamento semplice.
`.upcart-public-component-progress-bar__milestone-icon`	Icona in corrispondenza di un traguardo sulla barra di avanzamento semplice.
`.upcart-public-component-progress-bar__milestone-label`	Etichetta in corrispondenza di un traguardo sulla barra di avanzamento semplice.

Modulo Header


Selettore CSS	Descrizione
`.upcart-public-header`	Contenitore principale dell’header del carrello.
`.upcart-public-header__logo`	Immagine del logo nell’header del carrello.
`.upcart-public-header__close-button`	Pulsante usato per chiudere il cart drawer.
`.upcart-public-header__close-button-icon`	Icona mostrata all’interno del pulsante di chiusura.

Modulo Annunci


Selettore CSS	Descrizione
`.upcart-public-announcement`	Banner o sezione degli annunci all’interno del carrello.
`.upcart-public-announcement-skeleton`	Skeleton di caricamento per la barra degli annunci.

Moduli Raccomandazioni e Upsell


Selettore CSS	Descrizione
`.upcart-public-upsell`	Wrapper principale per il modulo upsell.
`.upcart-public-upsell__header`	Header della sezione upsell.
`.upcart-public-upsell__title`	Testo del titolo della sezione upsell.
`.upcart-public-upsell__shop-now-button`	Pulsante Shop Now sugli articoli di upsell.
`.upcart-public-upsell__vertical-layout-wrapper`	Wrapper per il layout verticale degli upsell.
`.upcart-public-component-upsell-tile`	Layout a scheda per ogni prodotto di upsell/raccomandazione.
`.upcart-public-component-upsell-tile__image-container`	Contenitore per l’immagine del prodotto di upsell.
`.upcart-public-component-upsell-tile__image`	Immagine del prodotto di upsell.
`.upcart-public-component-upsell-tile__info`	Sezione informativa della tile di upsell.
`.upcart-public-component-upsell-tile__title-link`	Wrapper link per il titolo del prodotto.
`.upcart-public-component-upsell-tile__title`	Titolo del prodotto di upsell.
`.upcart-public-component-upsell-tile__rating-row`	Riga contenente le valutazioni del prodotto.
`.upcart-public-component-upsell-tile__stars`	Visualizzazione della valutazione a stelle.
`.upcart-public-component-upsell-tile__star--partial`	Stella parziale per valutazioni frazionarie.
`.upcart-public-component-upsell-tile__reviews`	Visualizzazione del numero di recensioni.
`.upcart-public-component-upsell-tile__price-row`	Riga contenente le informazioni sul prezzo.
`.upcart-public-component-upsell-tile__price-compare-at`	Prezzo originale (barrato) per l’upsell.
`.upcart-public-component-upsell-tile__price`	Prezzo attuale dell’articolo di upsell.
`.upcart-public-component-upsell-tile__variant-row`	Riga contenente la selezione della variante.
`.upcart-public-upsell__skeleton`	Segnaposto skeleton per il modulo upsell.
`.upcart-public-upsell__skeleton-title`	Skeleton per il titolo della sezione upsell.
`.upcart-public-upsell__skeleton-image`	Skeleton per l’immagine del prodotto di upsell.
`.upcart-public-upsell__skeleton-product-title`	Skeleton per il titolo del prodotto di upsell.
`.upcart-public-upsell__skeleton-product-price`	Skeleton per il prezzo del prodotto di upsell.

Modulo Note


Selettore CSS	Descrizione
`.upcart-public-notes`	Contenitore principale della sezione note.
`.upcart-public-notes__text-container`	Contenitore per l’area di testo delle note.
`.upcart-public-notes__textarea`	Area di input per aggiungere una nota personalizzata al carrello.

Modulo Codice sconto


Selettore CSS	Descrizione
`.upcart-public-discount-code`	Contenitore principale della sezione codice sconto.
`.upcart-public-discount-code__form`	Wrapper del form per l’inserimento del codice sconto.
`.upcart-public-discount-code__input-wrapper`	Wrapper per il campo di input del codice sconto.
`.upcart-public-discount-code__input`	Campo di input per inserire i codici sconto.
`.upcart-public-discount-code__suffix`	Elemento suffisso per il campo di input.
`.upcart-public-discount-code__error`	Visualizzazione del messaggio di errore per codici non validi.
`.upcart-public-discount-code__button`	Pulsante per applicare il codice sconto.
`.upcart-public-discount-code__skeleton`	Segnaposto skeleton per il modulo del codice sconto.
`.upcart-public-discount-code__skeleton-input`	Skeleton per il campo di input del codice sconto.
`.upcart-public-discount-code__skeleton-button`	Skeleton per il pulsante di applicazione del codice sconto.

Modulo Trust badge


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

Modulo Ricompense a livelli


Selettore CSS	Descrizione
`.upcart-public-rewards`	Contenitore principale della sezione ricompense.
`.upcart-public-rewards__message`	Mostra i messaggi di avanzamento relativi alle ricompense.
`.upcart-public-rewards__bar`	Contenitore per la barra di avanzamento delle ricompense.
`.upcart-public-component-segmented-progress-bar`	Componente barra di avanzamento segmentata.
`.upcart-public-component-segmented-progress-bar__segments-container`	Contenitore per tutti i segmenti della barra di avanzamento.
`.upcart-public-component-segmented-progress-bar__segment`	Singolo segmento della barra di avanzamento.
`.upcart-public-component-segmented-progress-bar__segment-fill`	Porzione riempita di un segmento della barra di avanzamento.
`.upcart-public-component-segmented-progress-bar__milestone`	Indicatore di traguardo sulla barra di avanzamento.
`.upcart-public-component-segmented-progress-bar__milestone--bottom`	Traguardo posizionato in basso.
`.upcart-public-component-segmented-progress-bar__milestone--top`	Traguardo posizionato in alto.
`.upcart-public-component-segmented-progress-bar__milestone--middle`	Traguardo posizionato al centro.
`.upcart-public-component-segmented-progress-bar__milestone-icon`	Icona mostrata in corrispondenza di un traguardo.
`.upcart-public-component-segmented-progress-bar__milestone-label`	Testo dell’etichetta per un traguardo.
`.upcart-public-component-segmented-progress-bar__milestone-label--align-right`	Etichetta del traguardo allineata a destra.
`.upcart-public-component-segmented-progress-bar__milestone-label--align-center`	Etichetta del traguardo allineata al centro.
`.upcart-public-rewards__skeleton`	Contenitore skeleton per la sezione ricompense.
`.upcart-public-rewards__skeleton-message`	Skeleton per il messaggio di avanzamento delle ricompense.
`.upcart-public-rewards__skeleton-bar`	Skeleton per la barra di avanzamento delle ricompense.

Modulo Articoli del carrello


Selettore CSS	Descrizione
`.upcart-public-cart-items`	Wrapper principale per l’elenco degli articoli del carrello.
`.upcart-public-cart-item`	Wrapper del singolo articolo del carrello.
`.upcart-public-cart-items-skeleton__content`	Skeleton di caricamento per gli articoli del carrello.
`.upcart-public-component-product-tile`	Wrapper per un singolo articolo prodotto nel carrello.
`.upcart-public-component-product-tile__content`	Area del contenuto della tile prodotto.
`.upcart-public-component-product-tile__image-wrapper`	Wrapper attorno all’immagine del prodotto.
`.upcart-public-component-product-tile__image`	Immagine del prodotto nel carrello.
`.upcart-public-component-product-tile__info`	Sezione informativa della tile prodotto.
`.upcart-public-component-product-tile__header`	Sezione header della tile prodotto.
`.upcart-public-component-product-tile__product-title`	Nome del prodotto nel carrello.
`.upcart-public-component-product-tile__title-link`	Link che avvolge il titolo del prodotto.
`.upcart-public-component-product-tile__remove-button`	Pulsante per rimuovere il prodotto dal carrello.
`.upcart-public-component-product-tile__variant`	Visualizzazione delle informazioni sulla variante.
`.upcart-public-component-product-tile__properties`	Wrapper per metadati aggiuntivi del prodotto.
`.upcart-public-component-product-tile__bundle`	Sezione informativa del bundle.
`.upcart-public-component-product-tile__product-pricing`	Sezione dei prezzi della tile prodotto.
`.upcart-public-component-product-tile__price-compare-at`	Prezzo originale (barrato).
`.upcart-public-component-product-tile__price`	Prezzo finale mostrato al cliente.
`.upcart-public-component-product-tile__price-group`	Wrapper attorno al prezzo e al prezzo di confronto.
`.upcart-public-component-product-tile__savings`	Risparmio specifico per un articolo del carrello.
`.upcart-public-component-product-tile__controls`	Sezione dei controlli (quantità, ecc.).
`.upcart-public-component-product-tile__quantity-selector`	Wrapper del selettore di quantità.
`.upcart-public-component-product-tile__quantity-minus`	Pulsante per diminuire la quantità.
`.upcart-public-component-product-tile__quantity-plus`	Pulsante per aumentare la quantità.
`.upcart-public-component-product-tile__discount-codes`	Codici sconto applicati all’articolo.
`.upcart-public-component-product-tile__subscription-upgrade`	Sezione upgrade abbonamento.
`.upcart-public-component-product-tile__subscription-upgrade-btn`	Pulsante che applica l’upgrade dell’abbonamento.
`.upcart-public-component-product-tile__select-wrapper`	Wrapper per il menu a discesa di selezione.
`.upcart-public-component-product-tile__select`	Elemento del menu a discesa di selezione.
`.upcart-public-product-properties__subscription`	Mostra i dettagli dell’abbonamento per l’articolo.
`.upcart-public-product-properties__item`	Singola proprietà del prodotto.
`.upcart-public-product-properties__link`	Link all’interno delle proprietà del prodotto.
`.upcart-public-cart-items__key-value-pair`	Visualizzazione coppia chiave-valore per le proprietà dell’articolo.
`.upcart-public-bundle-properties`	Contenitore per le proprietà del bundle.
`.upcart-public-bundle-properties__variant-title`	Titolo della variante per gli articoli del bundle.
`.upcart-public-bundle-properties__header`	Header per la sezione delle proprietà del bundle.
`.upcart-public-bundle-properties__item-components`	Contenitore per i componenti dell’articolo bundle.
`.upcart-public-bundle-properties__item-component-row`	Riga per ogni componente dell’articolo bundle.
`.upcart-public-bundle-properties__image-wrapper`	Wrapper per l’immagine dell’articolo bundle.
`.upcart-public-bundle-properties__content`	Area del contenuto per l’articolo bundle.
`.upcart-public-bundle-properties__product-title`	Titolo del prodotto per l’articolo bundle.

Modulo Add-on


Selettore CSS	Descrizione
`.upcart-public-addons`	Contenitore principale della sezione add-on.
`.upcart-public-addons__image-wrapper`	Wrapper per l’immagine dell’add-on.
`.upcart-public-addons__content-wrapper`	Wrapper del contenuto per le informazioni dell’add-on.
`.upcart-public-addons__content-title-wrapper`	Wrapper per il titolo dell’add-on.
`.upcart-public-addons__content-title`	Titolo del prodotto add-on.
`.upcart-public-addons__content-price`	Sezione del prezzo per l’add-on.
`.upcart-public-addons__compare-at-price`	Prezzo originale (barrato) dell’add-on.
`.upcart-public-addons__price`	Prezzo attuale del prodotto add-on.
`.upcart-public-addons__content-description`	Descrizione del prodotto add-on.
`.upcart-public-addons__toggle-wrapper`	Wrapper per l’interruttore dell’add-on.
`.upcart-public-addons__toggle`	Interruttore per aggiungere/rimuovere un add-on.
`.upcart-public-addons__toggle-switch`	Elemento switch dell’interruttore.
`.upcart-public-addons__toggle-slider`	Elemento slider dell’interruttore.
`.upcart-public-addons__skeleton`	Segnaposto skeleton per la sezione add-on.
`.upcart-public-addons__skeleton-image`	Skeleton per l’immagine del prodotto add-on.
`.upcart-public-addons__skeleton-text`	Skeleton per il contenuto testuale negli add-on.

Modulo Pagamenti express


Selettore CSS	Descrizione
`.upcart-public-express-payments__container`	Contenitore per i pulsanti di pagamento express.

Modulo Riepilogo carrello


Selettore CSS	Descrizione
`.upcart-public-cart-summary`	Contenitore principale del riepilogo del carrello.
`.upcart-public-cart-summary__discount-codes`	Contenitore per i codici sconto nel riepilogo.
`.upcart-public-cart-summary__discount-label`	Etichetta per la sezione sconti.
`.upcart-public-cart-summary__slide-codes`	Contenitore scorrevole per i codici sconto.
`.upcart-public-cart-summary__total-discount`	Visualizzazione dell’importo totale dello sconto.

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 (V2)

Panoramica

NOTA

Come usare i selettori CSS di Upcart

Cosa sapere prima di aggiungere CSS

Checklist per la personalizzazione CSS:

Linee guida importanti per i selettori V2

Selettori CSS

Componenti generali

Modulo Header

Modulo Annunci

Moduli Raccomandazioni e Upsell

Modulo Note

Modulo Codice sconto

Modulo Trust badge

Modulo Ricompense a livelli

Modulo Articoli del carrello

Modulo Add-on

Modulo Pagamenti express

Modulo Riepilogo carrello

Risorse utili per iniziare:

​Panoramica

​NOTA

​

​Come usare i selettori CSS di Upcart

​Cosa sapere prima di aggiungere CSS

​Checklist per la personalizzazione CSS:

​Linee guida importanti per i selettori V2

​

​Selettori CSS

​Componenti generali

​

​Modulo Header

​Modulo Annunci

​Moduli Raccomandazioni e Upsell

​Modulo Note

​Modulo Codice sconto

​Modulo Trust badge

​Modulo Ricompense a livelli

​Modulo Articoli del carrello

​Modulo Add-on

​Modulo Pagamenti express

​Modulo Riepilogo carrello

​Risorse utili per iniziare:

​

​

Panoramica

NOTA

Come usare i selettori CSS di Upcart

Cosa sapere prima di aggiungere CSS

Checklist per la personalizzazione CSS:

Linee guida importanti per i selettori V2

Selettori CSS

Componenti generali

Modulo Header

Modulo Annunci

Moduli Raccomandazioni e Upsell

Modulo Note

Modulo Codice sconto

Modulo Trust badge

Modulo Ricompense a livelli

Modulo Articoli del carrello

Modulo Add-on

Modulo Pagamenti express

Modulo Riepilogo carrello

Risorse utili per iniziare: