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

> Questo articolo illustra i selettori CSS disponibili in Upcart Versione 2, pensati per supportare stili personalizzati per il cart drawer aggiornato e la nuova struttura dei moduli.

⚠️ **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](/it/upcart/upcart_css_selector_library_v1)**, 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](/it/upcart/upcart_v20_migration_guide).

<div id="overview">
  # Panoramica
</div>

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.

<div id="note">
  ## NOTA
</div>

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)

##

<div id="how-to-use-upcart-css-selectors">
  # Come usare i selettori CSS di Upcart
</div>

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.

<div id="what-to-know-before-adding-css">
  # Cosa sapere prima di aggiungere CSS
</div>

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.

<div id="css-customization-checklist">
  ## Checklist per la personalizzazione CSS:
</div>

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

<div id="important-guidelines-for-v2-selectors">
  ## **Linee guida importanti per i selettori V2**
</div>

⚠️ **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;   
}
```

#

<div id="css-selectors">
  # Selettori CSS
</div>

<div id="general-components">
  ### **Componenti generali**
</div>

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

#

<div id="header-module">
  ### **Modulo Header**
</div>

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

<div id="announcements-module">
  ### **Modulo Annunci**
</div>

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

<div id="recommendation-and-upsell-modules">
  ### **Moduli Raccomandazioni e Upsell**
</div>

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

<div id="notes-module">
  ### **Modulo Note**
</div>

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

<div id="discount-code-module">
  ### **Modulo Codice sconto**
</div>

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

<div id="trust-badges-module">
  ### **Modulo Trust badge**
</div>

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

<div id="tiered-rewards-module">
  ### **Modulo Ricompense a livelli**
</div>

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

<div id="cart-items-module">
  ### **Modulo Articoli del carrello**
</div>

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

<div id="add-ons-module">
  ### **Modulo Add-on**
</div>

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

<div id="express-payments-module">
  ### **Modulo Pagamenti express**
</div>

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

<div id="cart-summary-module">
  ### **Modulo Riepilogo carrello**
</div>

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

<div id="helpful-resources-to-get-started">
  ## **Risorse utili per iniziare:**
</div>

* **[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.

##

##