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

# Bibliothèque de sélecteurs CSS Upcart (V2)

> Cet article présente les sélecteurs CSS disponibles dans Upcart Version 2, conçus pour prendre en charge le style personnalisé du tiroir de panier et de la structure de modules mis à jour.

⚠️ **AVIS IMPORTANT**

Ces sélecteurs s'appliquent **uniquement à la Version 2 (V2)** des modules de panier Upcart. Si vous utilisez la **Version 1 (V1)**, ces sélecteurs ne fonctionneront pas.

Pour les paniers V1, veuillez consulter la **[documentation des sélecteurs CSS Version 1](/fr/upcart/upcart_css_selector_library_v1)**, qui couvre la structure de modules et les sélecteurs de l'ancienne version.

Pour vérifier quelle version vous utilisez, ouvrez le Cart Editor et regardez en haut du menu de gauche. Une liste déroulante **Cart version** y apparaît une fois que chaque module du panier est en V2 ; si vous ne la voyez pas, votre panier contient encore des modules V1. Pour plus d'informations sur la migration de V1 vers V2, consultez le [guide de migration V2.0](/fr/upcart/upcart_v20_migration_guide).

<div id="overview">
  # Aperçu
</div>

Si vous souhaitez modifier l'apparence de votre panier, comme masquer un prix, ajuster la taille du texte ou repositionner un bouton, c'est ici qu'il faut commencer. Cette bibliothèque de sélecteurs CSS vous fournit les outils nécessaires pour effectuer ces modifications avec votre propre code personnalisé.

Tous les sélecteurs CSS disponibles sont regroupés dans cet article, avec des liens vers des ressources utiles pour écrire et tester vos styles.

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

Bien que nous fournissions cette bibliothèque pour votre commodité, l'équipe d'assistance Upcart **ne peut pas vous aider à créer ou corriger du code personnalisé.** Cela fait partie de notre [politique de personnalisation](/fr/upcart/upcart_customization_policy).

Nous vous recommandons de consulter un expert Shopify pour les solutions de code personnalisé.

[Voir les experts Shopify](https://www.shopify.com/ca/partners/directory)

##

<div id="how-to-use-upcart-css-selectors">
  # Comment utiliser les sélecteurs CSS Upcart
</div>

Cet article est une **bibliothèque de sélecteurs CSS** que vous pouvez utiliser pour styliser et personnaliser votre tiroir de panier Upcart. Chaque sélecteur cible une partie spécifique du panier — comme l'en-tête, les lignes de produits, les upsells, le module de récompenses, et plus encore.

Vous pouvez utiliser ces sélecteurs pour :

* Masquer ou restyliser des éléments
* Modifier les espacements, les polices ou les couleurs
* Ajuster la mise en page selon l'image de marque de votre boutique

Pour appliquer votre CSS, ouvrez le Cart Editor, allez dans **Settings**, sélectionnez l'onglet **Custom CSS** et collez vos styles dans l'éditeur.

<div id="what-to-know-before-adding-css">
  # À savoir avant d'ajouter du CSS
</div>

Avant de vous lancer dans vos styles personnalisés, voici quelques conseils pour que tout se passe bien. Ils faciliteront les tests de vos modifications, éviteront les surprises et vous aideront à obtenir le rendu souhaité sans rien casser dans votre panier.

<div id="css-customization-checklist">
  ## Liste de vérification pour la personnalisation CSS :
</div>

* **Testez dans un environnement sûr :** utilisez un aperçu ou un thème non publié lorsque c'est possible avant la mise en ligne.

* **Commencez petit :** effectuez une modification à la fois pour suivre plus facilement ce qui a fonctionné ou non.

* **Collez les styles au bon endroit :** utilisez le champ **Upcart Editor > Settings > Custom CSS** pour ajouter votre code.

* **Utilisez l'outil d'inspection :** faites un clic droit sur les éléments dans votre navigateur et sélectionnez **Inspect** pour trouver et tester les sélecteurs en direct.

* **Évitez les suppositions :** tous les éléments n'apparaissent pas dans tous les paniers — testez avec différents paniers (avec/sans récompenses, upsells, etc.).

Les sélecteurs suivants fonctionnent avec la Version 2 des modules de panier Upcart. La V2 introduit un système de nommage structuré avec des préfixes de classes **publics** et **internes**.

<div id="important-guidelines-for-v2-selectors">
  ## **Consignes importantes pour les sélecteurs V2**
</div>

⚠️ **Utilisez uniquement les sélecteurs publics pour la personnalisation**

* **Les sélecteurs publics** (préfixés par `upcart-public-`) font partie de l'API stable et peuvent être utilisés en toute sécurité pour le style personnalisé
* **Les sélecteurs internes** (préfixés par `upcart-internal-`) sont réservés à un usage interne et peuvent changer sans préavis

✅ **À FAIRE :** utiliser les noms de classes publics pour le style

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

❌ **À ÉVITER :** remplacer les noms de classes internes ou utiliser des sélecteurs profonds

```
/* ❌ 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">
  # Sélecteurs CSS
</div>

<div id="general-components">
  ### **Composants généraux**
</div>

|                                                          |                                                               |
| -------------------------------------------------------- | ------------------------------------------------------------- |
| **Sélecteur CSS**                                        | **Description**                                               |
| `.upcart-public-skeleton`                                | Enveloppe générale du chargeur squelette du panier.           |
| `.upcart-public-component__button`                       | Composant de bouton général utilisé dans les modules.         |
| `.upcart-public-component-loader`                        | Composant d'indicateur de chargement.                         |
| `.upcart-public-component-tag`                           | Enveloppe du composant d'étiquette.                           |
| `.upcart-public-component-tag__icon`                     | Icône à l'intérieur d'une étiquette.                          |
| `.upcart-public-component-tag__text`                     | Contenu textuel d'une étiquette.                              |
| `.upcart-public-component-tag__remove-button`            | Bouton de suppression ("x") dans une étiquette amovible.      |
| `.upcart-public-component-collapse__dropdown-container`  | Conteneur des sections déroulantes repliables.                |
| `.upcart-public-component-collapse__expand-icon`         | Icône indiquant l'état déplié/replié.                         |
| `.upcart-public-component-carousel__container`           | Enveloppe externe d'un carrousel.                             |
| `.upcart-public-component-carousel__window`              | Fenêtre de découpage dans laquelle défilent les diapositives. |
| `.upcart-public-component-carousel__track`               | La piste mobile qui contient les diapositives.                |
| `.upcart-public-component-carousel__slide`               | Une diapositive de carrousel individuelle.                    |
| `.upcart-public-component-carousel__button`              | Bouton fléché précédent/suivant.                              |
| `.upcart-public-component-progress-bar`                  | Composant de barre de progression simple (non segmentée).     |
| `.upcart-public-component-progress-bar__track`           | Piste de la barre de progression simple.                      |
| `.upcart-public-component-progress-bar__fill`            | Partie remplie de la barre de progression simple.             |
| `.upcart-public-component-progress-bar__milestone`       | Marqueur de jalon sur la barre de progression simple.         |
| `.upcart-public-component-progress-bar__milestone-icon`  | Icône d'un jalon sur la barre de progression simple.          |
| `.upcart-public-component-progress-bar__milestone-label` | Étiquette d'un jalon sur la barre de progression simple.      |

#

<div id="header-module">
  ### **Module d'en-tête**
</div>

|                                            |                                                 |
| ------------------------------------------ | ----------------------------------------------- |
| **Sélecteur CSS**                          | **Description**                                 |
| `.upcart-public-header`                    | Conteneur principal de l'en-tête du panier.     |
| `.upcart-public-header__logo`              | Image du logo dans l'en-tête du panier.         |
| `.upcart-public-header__close-button`      | Bouton utilisé pour fermer le tiroir de panier. |
| `.upcart-public-header__close-button-icon` | Icône affichée dans le bouton de fermeture.     |

<div id="announcements-module">
  ### **Module d'annonces**
</div>

|                                        |                                               |
| -------------------------------------- | --------------------------------------------- |
| **Sélecteur CSS**                      | **Description**                               |
| `.upcart-public-announcement`          | Bannière ou section d'annonce dans le panier. |
| `.upcart-public-announcement-skeleton` | Chargeur squelette de la barre d'annonce.     |

<div id="recommendation-and-upsell-modules">
  ### **Modules de recommandation et d'upsell**
</div>

|                                                          |                                                                       |
| -------------------------------------------------------- | --------------------------------------------------------------------- |
| **Sélecteur CSS**                                        | **Description**                                                       |
| `.upcart-public-upsell`                                  | Enveloppe principale du module d'upsell.                              |
| `.upcart-public-upsell__header`                          | En-tête de la section d'upsell.                                       |
| `.upcart-public-upsell__title`                           | Texte du titre de la section d'upsell.                                |
| `.upcart-public-upsell__shop-now-button`                 | Bouton Shop Now sur les articles d'upsell.                            |
| `.upcart-public-upsell__vertical-layout-wrapper`         | Enveloppe de la mise en page verticale des upsells.                   |
| `.upcart-public-component-upsell-tile`                   | Mise en page en carte pour chaque produit d'upsell/de recommandation. |
| `.upcart-public-component-upsell-tile__image-container`  | Conteneur de l'image du produit d'upsell.                             |
| `.upcart-public-component-upsell-tile__image`            | Image du produit d'upsell.                                            |
| `.upcart-public-component-upsell-tile__info`             | Section d'informations de la tuile d'upsell.                          |
| `.upcart-public-component-upsell-tile__title-link`       | Enveloppe de lien pour le titre du produit.                           |
| `.upcart-public-component-upsell-tile__title`            | Titre du produit d'upsell.                                            |
| `.upcart-public-component-upsell-tile__rating-row`       | Ligne contenant les évaluations du produit.                           |
| `.upcart-public-component-upsell-tile__stars`            | Affichage de la note en étoiles.                                      |
| `.upcart-public-component-upsell-tile__star--partial`    | Étoile partielle pour les notes fractionnaires.                       |
| `.upcart-public-component-upsell-tile__reviews`          | Affichage du nombre d'avis.                                           |
| `.upcart-public-component-upsell-tile__price-row`        | Ligne contenant les informations de prix.                             |
| `.upcart-public-component-upsell-tile__price-compare-at` | Prix d'origine (barré) de l'upsell.                                   |
| `.upcart-public-component-upsell-tile__price`            | Prix actuel de l'article d'upsell.                                    |
| `.upcart-public-component-upsell-tile__variant-row`      | Ligne contenant la sélection de variante.                             |
| `.upcart-public-upsell__skeleton`                        | Espace réservé squelette pour le module d'upsell.                     |
| `.upcart-public-upsell__skeleton-title`                  | Squelette du titre de la section d'upsell.                            |
| `.upcart-public-upsell__skeleton-image`                  | Squelette de l'image du produit d'upsell.                             |
| `.upcart-public-upsell__skeleton-product-title`          | Squelette du titre du produit d'upsell.                               |
| `.upcart-public-upsell__skeleton-product-price`          | Squelette du prix du produit d'upsell.                                |

<div id="notes-module">
  ### **Module de notes**
</div>

|                                        |                                                                        |
| -------------------------------------- | ---------------------------------------------------------------------- |
| **Sélecteur CSS**                      | **Description**                                                        |
| `.upcart-public-notes`                 | Conteneur principal de la section des notes.                           |
| `.upcart-public-notes__text-container` | Conteneur de la zone de texte des notes.                               |
| `.upcart-public-notes__textarea`       | Zone de saisie de texte pour ajouter une note personnalisée au panier. |

<div id="discount-code-module">
  ### **Module de code de réduction**
</div>

|                                                 |                                                               |
| ----------------------------------------------- | ------------------------------------------------------------- |
| **Sélecteur CSS**                               | **Description**                                               |
| `.upcart-public-discount-code`                  | Conteneur principal de la section du code de réduction.       |
| `.upcart-public-discount-code__form`            | Enveloppe du formulaire de saisie du code de réduction.       |
| `.upcart-public-discount-code__input-wrapper`   | Enveloppe du champ de saisie du code de réduction.            |
| `.upcart-public-discount-code__input`           | Champ de saisie pour entrer les codes de réduction.           |
| `.upcart-public-discount-code__suffix`          | Élément de suffixe du champ de saisie.                        |
| `.upcart-public-discount-code__error`           | Affichage du message d'erreur pour les codes non valides.     |
| `.upcart-public-discount-code__button`          | Bouton pour appliquer le code de réduction.                   |
| `.upcart-public-discount-code__skeleton`        | Espace réservé squelette pour le module de code de réduction. |
| `.upcart-public-discount-code__skeleton-input`  | Squelette du champ de saisie du code de réduction.            |
| `.upcart-public-discount-code__skeleton-button` | Squelette du bouton d'application du code de réduction.       |

<div id="trust-badges-module">
  ### **Module de badges de confiance**
</div>

|                                      |                                                     |
| ------------------------------------ | --------------------------------------------------- |
| **Sélecteur CSS**                    | **Description**                                     |
| `.upcart-public-trust-badges`        | Conteneur des badges de confiance.                  |
| `.upcart-public-trust-badges__image` | Élément d'image utilisé dans un badge de confiance. |

<div id="tiered-rewards-module">
  ### **Module de récompenses à paliers**
</div>

|                                                                                  |                                                            |
| -------------------------------------------------------------------------------- | ---------------------------------------------------------- |
| **Sélecteur CSS**                                                                | **Description**                                            |
| `.upcart-public-rewards`                                                         | Conteneur principal de la section des récompenses.         |
| `.upcart-public-rewards__message`                                                | Affiche les messages de progression liés aux récompenses.  |
| `.upcart-public-rewards__bar`                                                    | Conteneur de la barre de progression des récompenses.      |
| `.upcart-public-component-segmented-progress-bar`                                | Composant de barre de progression segmentée.               |
| `.upcart-public-component-segmented-progress-bar__segments-container`            | Conteneur de tous les segments de la barre de progression. |
| `.upcart-public-component-segmented-progress-bar__segment`                       | Segment individuel de la barre de progression.             |
| `.upcart-public-component-segmented-progress-bar__segment-fill`                  | Partie remplie d'un segment de la barre de progression.    |
| `.upcart-public-component-segmented-progress-bar__milestone`                     | Marqueur de jalon sur la barre de progression.             |
| `.upcart-public-component-segmented-progress-bar__milestone--bottom`             | Jalon positionné en bas.                                   |
| `.upcart-public-component-segmented-progress-bar__milestone--top`                | Jalon positionné en haut.                                  |
| `.upcart-public-component-segmented-progress-bar__milestone--middle`             | Jalon positionné au milieu.                                |
| `.upcart-public-component-segmented-progress-bar__milestone-icon`                | Icône affichée à un jalon.                                 |
| `.upcart-public-component-segmented-progress-bar__milestone-label`               | Texte de l'étiquette d'un jalon.                           |
| `.upcart-public-component-segmented-progress-bar__milestone-label--align-right`  | Étiquette de jalon alignée à droite.                       |
| `.upcart-public-component-segmented-progress-bar__milestone-label--align-center` | Étiquette de jalon centrée.                                |
| `.upcart-public-rewards__skeleton`                                               | Conteneur squelette de la section des récompenses.         |
| `.upcart-public-rewards__skeleton-message`                                       | Squelette du message de progression des récompenses.       |
| `.upcart-public-rewards__skeleton-bar`                                           | Squelette de la barre de progression des récompenses.      |

<div id="cart-items-module">
  ### **Module des articles du panier**
</div>

|                                                                   |                                                              |
| ----------------------------------------------------------------- | ------------------------------------------------------------ |
| **Sélecteur CSS**                                                 | **Description**                                              |
| `.upcart-public-cart-items`                                       | Enveloppe principale de la liste des articles du panier.     |
| `.upcart-public-cart-item`                                        | Enveloppe d'un article de panier individuel.                 |
| `.upcart-public-cart-items-skeleton__content`                     | Chargeur squelette des articles du panier.                   |
| `.upcart-public-component-product-tile`                           | Enveloppe d'un article de produit individuel dans le panier. |
| `.upcart-public-component-product-tile__content`                  | Zone de contenu de la tuile de produit.                      |
| `.upcart-public-component-product-tile__image-wrapper`            | Enveloppe autour de l'image du produit.                      |
| `.upcart-public-component-product-tile__image`                    | Image du produit dans le panier.                             |
| `.upcart-public-component-product-tile__info`                     | Section d'informations de la tuile de produit.               |
| `.upcart-public-component-product-tile__header`                   | Section d'en-tête de la tuile de produit.                    |
| `.upcart-public-component-product-tile__product-title`            | Nom du produit dans le panier.                               |
| `.upcart-public-component-product-tile__title-link`               | Lien qui entoure le titre du produit.                        |
| `.upcart-public-component-product-tile__remove-button`            | Bouton pour retirer le produit du panier.                    |
| `.upcart-public-component-product-tile__variant`                  | Affichage des informations de variante.                      |
| `.upcart-public-component-product-tile__properties`               | Enveloppe des métadonnées supplémentaires du produit.        |
| `.upcart-public-component-product-tile__bundle`                   | Section d'informations sur le bundle.                        |
| `.upcart-public-component-product-tile__product-pricing`          | Section de tarification de la tuile de produit.              |
| `.upcart-public-component-product-tile__price-compare-at`         | Prix d'origine (barré).                                      |
| `.upcart-public-component-product-tile__price`                    | Prix final affiché au client.                                |
| `.upcart-public-component-product-tile__price-group`              | Enveloppe autour du prix et du prix comparé.                 |
| `.upcart-public-component-product-tile__savings`                  | Économies spécifiques pour un article du panier.             |
| `.upcart-public-component-product-tile__controls`                 | Section des contrôles (quantité, etc.).                      |
| `.upcart-public-component-product-tile__quantity-selector`        | Enveloppe du sélecteur de quantité.                          |
| `.upcart-public-component-product-tile__quantity-minus`           | Bouton pour diminuer la quantité.                            |
| `.upcart-public-component-product-tile__quantity-plus`            | Bouton pour augmenter la quantité.                           |
| `.upcart-public-component-product-tile__discount-codes`           | Codes de réduction appliqués à l'article.                    |
| `.upcart-public-component-product-tile__subscription-upgrade`     | Section de mise à niveau d'abonnement.                       |
| `.upcart-public-component-product-tile__subscription-upgrade-btn` | Bouton qui applique la mise à niveau d'abonnement.           |
| `.upcart-public-component-product-tile__select-wrapper`           | Enveloppe de la liste déroulante de sélection.               |
| `.upcart-public-component-product-tile__select`                   | Élément de liste déroulante de sélection.                    |
| `.upcart-public-product-properties__subscription`                 | Affiche les détails d'abonnement de l'article.               |
| `.upcart-public-product-properties__item`                         | Propriété individuelle du produit.                           |
| `.upcart-public-product-properties__link`                         | Lien dans les propriétés du produit.                         |
| `.upcart-public-cart-items__key-value-pair`                       | Affichage clé-valeur des propriétés de l'article.            |
| `.upcart-public-bundle-properties`                                | Conteneur des propriétés du bundle.                          |
| `.upcart-public-bundle-properties__variant-title`                 | Titre de variante pour les articles du bundle.               |
| `.upcart-public-bundle-properties__header`                        | En-tête de la section des propriétés du bundle.              |
| `.upcart-public-bundle-properties__item-components`               | Conteneur des composants d'article du bundle.                |
| `.upcart-public-bundle-properties__item-component-row`            | Ligne pour chaque composant d'article du bundle.             |
| `.upcart-public-bundle-properties__image-wrapper`                 | Enveloppe de l'image d'article du bundle.                    |
| `.upcart-public-bundle-properties__content`                       | Zone de contenu de l'article du bundle.                      |
| `.upcart-public-bundle-properties__product-title`                 | Titre du produit pour l'article du bundle.                   |

<div id="add-ons-module">
  ### **Module de compléments**
</div>

|                                                |                                                         |
| ---------------------------------------------- | ------------------------------------------------------- |
| **Sélecteur CSS**                              | **Description**                                         |
| `.upcart-public-addons`                        | Conteneur principal de la section des compléments.      |
| `.upcart-public-addons__image-wrapper`         | Enveloppe de l'image du complément.                     |
| `.upcart-public-addons__content-wrapper`       | Enveloppe du contenu des informations du complément.    |
| `.upcart-public-addons__content-title-wrapper` | Enveloppe du titre du complément.                       |
| `.upcart-public-addons__content-title`         | Titre du produit complémentaire.                        |
| `.upcart-public-addons__content-price`         | Section de prix du complément.                          |
| `.upcart-public-addons__compare-at-price`      | Prix d'origine (barré) du complément.                   |
| `.upcart-public-addons__price`                 | Prix actuel du produit complémentaire.                  |
| `.upcart-public-addons__content-description`   | Description du produit complémentaire.                  |
| `.upcart-public-addons__toggle-wrapper`        | Enveloppe de l'interrupteur du complément.              |
| `.upcart-public-addons__toggle`                | Interrupteur pour ajouter/retirer un complément.        |
| `.upcart-public-addons__toggle-switch`         | Élément d'interrupteur de la bascule.                   |
| `.upcart-public-addons__toggle-slider`         | Élément de curseur de la bascule.                       |
| `.upcart-public-addons__skeleton`              | Espace réservé squelette de la section des compléments. |
| `.upcart-public-addons__skeleton-image`        | Squelette de l'image du produit complémentaire.         |
| `.upcart-public-addons__skeleton-text`         | Squelette du contenu textuel des compléments.           |

<div id="express-payments-module">
  ### **Module de paiements express**
</div>

|                                              |                                            |
| -------------------------------------------- | ------------------------------------------ |
| **Sélecteur CSS**                            | **Description**                            |
| `.upcart-public-express-payments__container` | Conteneur des boutons de paiement express. |

<div id="cart-summary-module">
  ### **Module de résumé du panier**
</div>

|                                               |                                                  |
| --------------------------------------------- | ------------------------------------------------ |
| **Sélecteur CSS**                             | **Description**                                  |
| `.upcart-public-cart-summary`                 | Conteneur principal du résumé du panier.         |
| `.upcart-public-cart-summary__discount-codes` | Conteneur des codes de réduction dans le résumé. |
| `.upcart-public-cart-summary__discount-label` | Étiquette de la section des réductions.          |
| `.upcart-public-cart-summary__slide-codes`    | Conteneur coulissant des codes de réduction.     |
| `.upcart-public-cart-summary__total-discount` | Affichage du montant total de la réduction.      |

<div id="helpful-resources-to-get-started">
  ## **Ressources utiles pour démarrer :**
</div>

* **[Premiers pas avec le CSS personnalisé](/fr/upcart/custom_css) :** apprenez à ajouter du CSS personnalisé en toute sécurité dans Upcart.
* **[Introduction aux personnalisations dans Upcart](/fr/upcart/getting_started_with_upcart_customizations) :** comprenez comment fonctionne la personnalisation et par où commencer.
* **[Utiliser l'IA pour écrire du code personnalisé pour Upcart](/fr/upcart/ai_prompt_suggestions_for_adding_custom_code_to_your_upcart_settings) :** obtenez de l'aide pour écrire du CSS ou du JavaScript à l'aide de simples invites.
* **[Bonnes pratiques pour augmenter les conversions du panier](/fr/upcart/best_practices_to_increase_upcart_conversions) :** optimisez le design de votre panier avec des conseils éprouvés.

##

##