> ## 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 (V1)
> Cet article présente les sélecteurs CSS disponibles dans Upcart Version 1, vous permettant d'appliquer un style personnalisé à l'ancien tiroir de panier.
📝 **Note**
Les sélecteurs V1 ciblent les modules de l'ancien tiroir de panier. Si vous avez effectué la mise à niveau vers V2, les sélecteurs de modules de cette page ne correspondent plus — consultez la [bibliothèque de sélecteurs CSS V2](/fr/upcart/upcart_css_selector_library_v2) pour les sélecteurs actuels.
Deux exceptions méritent d'être connues : `.upcart-cart` et `.upcart-cart-body` se trouvent sur l'enveloppe du tiroir plutôt que sur un module, ils s'appliquent donc toujours en V2. Les corrections de mise en page qui ciblent le tiroir dans son ensemble (limitation de sa largeur, arrêt du débordement horizontal) continuent de fonctionner après une mise à niveau.
# Aperçu
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.
## **Note**
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)
# Comment utiliser les sélecteurs CSS Upcart
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.
# À savoir avant d'ajouter du CSS
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.
## Liste de vérification pour la personnalisation CSS :
* **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.).
# Bibliothèque de sélecteurs CSS
Vous trouverez ci-dessous la liste de tous les sélecteurs CSS disponibles dans Upcart. Ils sont regroupés par **module** (comme l'en-tête, les produits, les upsells, etc.) pour vous permettre de trouver plus facilement ce que vous souhaitez personnaliser. Utilisez ceci comme référence lorsque vous écrivez vos propres styles.
## Paramètres généraux
### Module Design
| | |
| ------------------- | -------------------------------------------------------- |
| **Sélecteur CSS** | **Description** |
| `.upcart-cart` | Conteneur principal du tiroir de panier. |
| `.upcart-cart-body` | Contient le contenu principal du panier. |
| `.upcart-backdrop` | La superposition sombre qui apparaît derrière le panier. |
| | |
| ---------------------------------- | ------------------------------------------------------------------------------ |
| **Sélecteur CSS** | **Description** |
| `.upcart-header` | Conteneur de l'en-tête du panier, y compris le logo et le bouton de fermeture. |
| `.upcart-header-close-button` | Bouton utilisé pour fermer le tiroir de panier. |
| `.upcart-header-close-button-icon` | L'icône affichée dans le bouton de fermeture. |
| `.upcart-header-logo` | Affiche l'image du logo dans l'en-tête du panier. |
| `.upcart-header-text` | Le texte du titre affiché dans l'en-tête du panier. |
## Paramètres du corps
### Module d'annonces
| | |
| ------------------------------- | --------------------------------------------------- |
| **Sélecteur CSS** | **Description** |
| `.upcart-announcement` | Bannière ou section d'annonce dans le panier. |
| `.upcart-announcement-skeleton` | Espace réservé squelette pour la section d'annonce. |
### Module de récompenses
| | |
| ---------------------------------- | ------------------------------------------------------------------- |
| **Sélecteur CSS** | **Description** |
| `.upcart-rewards` | Conteneur principal de la section des récompenses. |
| `.upcart-rewards-message` | Affiche les messages de progression liés aux récompenses. |
| `.upcart-rewards-bar-background` | Couche d'arrière-plan de la barre de progression des récompenses. |
| `.upcart-rewards-bar-foreground` | Remplissage de progression/premier plan de la barre de récompenses. |
| `.upcart-rewards-tier` | Représente un palier spécifique du système de récompenses. |
| `.upcart-rewards-tier-circle` | Indicateur circulaire visuel d'un palier de récompense. |
| `.upcart-rewards-tier-icon` | Icône à l'intérieur du cercle d'un palier de récompense. |
| `.upcart-rewards-tier-description` | Texte de description sous chaque palier de récompense. |
| `.upcart-rewards-skeleton` | Conteneur squelette pour la section des récompenses. |
| `.upcart-rewards-message-skeleton` | Squelette pour le message de progression des récompenses. |
| `.upcart-rewards-bar-skeleton` | Squelette pour la barre de progression des récompenses. |
### Module de recommandations
| | |
| ----------------------------------------- | ----------------------------------------------------------------------- |
| **Sélecteur CSS** | **Description** |
| `.upcart-recommendation-module` | Enveloppe de l'ensemble du module de recommandation de produits. |
| `.upcart-recommendations-title` | Texte du titre de la section des recommandations. |
| `.upcart-recommendations-shop-now-button` | Bouton pour acheter un produit recommandé directement depuis le panier. |
### Module de mises à niveau d'abonnement
| | |
| --------------------------------------- | ----------------------------------------------------------------------------------------- |
| **Sélecteur CSS** | **Description** |
| `.upcart-subscription-upgrade-section` | Section de promotion des mises à niveau d'abonnement dans le panier. |
| `.upcart-subscription-upgrade-button` | Bouton utilisé pour déclencher une mise à niveau d'abonnement. |
| `.upcart-subscription-upgrade-dropdown` | Liste déroulante pour sélectionner les options de mise à niveau d'abonnement disponibles. |
### Module d'upsells
| | |
| -------------------------------------- | ---------------------------------------------------------- |
| **Sélecteur CSS** | **Description** |
| `.upcart-upsells` | Conteneur principal de la section des upsells. |
| `.upcart-upsells-module` | Enveloppe du module d'upsells. |
| `.upcart-upsells-title` | Titre de la section des upsells. |
| `.upcart-upsells-button` | Bouton pour ajouter des articles d'upsell au panier. |
| `.upcart-upsell-item-card` | Mise en page en carte pour chaque produit d'upsell. |
| `.upcart-upsell-item-title` | Titre du produit d'upsell. |
| `.upcart-upsell-item-image-wrapper` | Enveloppe autour de l'image du produit d'upsell. |
| `.upcart-upsell-item-image` | Image du produit d'upsell. |
| `.upcart-upsell-item-price` | Prix de l'article d'upsell. |
| `.upcart-upsell-item-price-row` | Ligne contenant le prix et le prix comparé. |
| `.upcart-upsell-item-compare-price` | Prix d'origine (barré) de l'upsell. |
| `.upcart-upsell-item-variant-selector` | Liste déroulante des variantes pour les produits d'upsell. |
### Paramètres des produits
| | |
| ------------------------------------ | --------------------------------------------------------------- |
| **Sélecteur CSS** | **Description** |
| `.upcart-products-section` | Conteneur de tous les produits du panier. |
| `.upcart-product-item` | Enveloppe d'un article de produit individuel. |
| `.upcart-product-title` | Nom du produit dans le panier. |
| `.upcart-product-title-link` | Lien qui entoure le titre du produit. |
| `.upcart-item-prices-row` | Ligne contenant les informations de prix. |
| `.upcart-item-price` | Prix final affiché au client. |
| `.upcart-item-compare-price` | Prix d'origine (barré). |
| `.upcart-product-savings` | Économies spécifiques pour un article du panier. |
| `.upcart-item-option` | Conteneur des options de produit comme la taille ou la couleur. |
| `.upcart-item-option-category` | Étiquette de la catégorie d'option de produit. |
| `.upcart-item-option-value` | Valeur de l'option de produit sélectionnée. |
| `.upcart-item-properties` | Enveloppe des métadonnées supplémentaires du produit. |
| `.upcart-item-property` | Propriété individuelle du produit. |
| `.upcart-item-property-subscription` | Affiche les détails d'abonnement de l'article. |
| `.upcart-product-quantity-input` | Champ de saisie de la quantité du produit. |
| `.upcart-product-quantity-minus` | Bouton pour diminuer la quantité. |
| `.upcart-product-quantity-plus` | Bouton pour augmenter la quantité. |
| `.upcart-product-image-wrapper` | Enveloppe autour de l'image du produit. |
| `.upcart-quantity-warning` | Conteneur de tout message de limite de quantité. |
| `.upcart-quantity-warning-text` | Texte de l'avertissement de quantité affiché à l'utilisateur. |
### Module de compléments
| | |
| ------------------------------------ | -------------------------------------------------- |
| **Sélecteur CSS** | **Description** |
| `.upcart-addons` | Conteneur principal de la section des compléments. |
| `.upcart-addons-title` | Titre de la section des compléments. |
| `.upcart-addons-product-description` | Description du produit complémentaire. |
| `.upcart-addons-price` | Prix du produit complémentaire. |
| `.upcart-addons-compare-price` | Prix d'origine (barré) du complément. |
| `.upcart-addons-toggle` | Interrupteur pour ajouter/retirer un complément. |
| `.upcart-addons-image-wrapper` | Enveloppe pour l'image du complément. |
### Module de codes de réduction
### Ligne des économies
| | |
| -------------------------------- | -------------------------------------------------------------------------- |
| **Sélecteur CSS** | **Description** |
| `.upcart-savings-row` | Enveloppe de toute la section réductions/économies du panier. |
| `.styles_Footer__savingsCodes__` | Conteneur de l'étiquette ("Discounts") et des codes de réduction associés. |
| `.upcart-discount-code-badge` | Enveloppe de chaque badge de code de réduction affiché dans l'interface. |
| `.upcart-discount-code-icon` | Conteneur de l'icône de réduction (par exemple, symbole de ticket SVG). |
| `.upcart-discount-code-text` | Représentation textuelle du code de réduction (par exemple, "AUTO 5"). |
| `.upcart-savings-amount` | Affiche le montant réel économisé grâce aux réductions. |
### Module de paiements express
## Note
Les boutons de paiements express dans Upcart servent de conteneurs visuels, tandis que le contenu et les fonctionnalités qu'ils renferment sont entièrement contrôlés par Shopify. Par conséquent, nous ne pouvons pas modifier leur comportement ou leur apparence. Consultez le guide du [**module de paiements express**](/fr/upcart/express_payments_module) pour plus d'informations.
| | |
| --------------------------------------- | ------------------------------------------------------ |
| **Sélecteur CSS** | **Description** |
| `.upcart-express-pay-buttons-container` | Conteneur de tous les boutons de paiement express. |
| `.upcart-express-pay-buttons-row` | Mise en page en ligne des boutons de paiement express. |
| `.upcart-express-pay-button` | Sélecteur général d'un bouton de paiement express. |
| `.upcart-express-pay-button-shop-pay` | Bouton spécifique pour Shop Pay. |
| `.upcart-express-pay-button-google-pay` | Bouton spécifique pour Google Pay. |
| `.upcart-express-pay-button-paypal` | Bouton spécifique pour PayPal. |
| `.upcart-express-pay-button-apple-pay` | Bouton spécifique pour Apple Pay. |
| `.upcart-express-pay-button-amazon-pay` | Bouton spécifique pour Amazon Pay. |
| `.upcart-express-pay-button-meta-pay` | Bouton spécifique pour Meta Pay. |
### Module de badges de confiance
| | |
| --------------------------- | --------------------------------------------------- |
| **Sélecteur CSS** | **Description** |
| `.upcart-trust-badge` | Conteneur des badges de confiance. |
| `.upcart-trust-badge-image` | Élément d'image utilisé dans un badge de confiance. |
### Module de notes supplémentaires
| | |
| ------------------------------------------------- | ------------------------------------------------------------- |
| **Sélecteur CSS** | **Description** |
| `.NotesModule_NotesModule__` | Conteneur des notes supplémentaires. |
| `.NotesModule_NotesModule__titleContainer__` | Conteneur du titre de la section des notes |
| `.NotesModule_NotesModule__dropdownContainer__` | Titre de la liste déroulante de la section des notes |
| `.NotesModule_NotesModule__textModule__ textarea` | Zone de saisie pour ajouter une note personnalisée au panier. |
## Module des paramètres Upcart
### Sélecteurs de squelettes
| | |
| ------------------------------------------------ | ------------------------------------------------------- |
| **Sélecteur CSS** | **Description** |
| `.upcart-skeleton` | Enveloppe générale du chargeur squelette du panier. |
| `.upcart-product-item-skeleton` | Espace réservé pendant le chargement d'un produit. |
| `.upcart-product-image-skeleton` | Espace réservé pour une image de produit. |
| `.upcart-product-title-skeleton` | Espace réservé pour le texte du titre du produit. |
| `.upcart-product-price-container-skeleton` | Espace réservé pour la zone de prix. |
| `.upcart-product-quantity-skeleton` | Espace réservé pour les contrôles de quantité. |
| `.upcart-item-option-skeleton` | Espace réservé pour les options de l'article. |
| `.upcart-upsells-module-skeleton` | Squelette du module d'upsells. |
| `.upcart-upsells-title-skeleton` | Squelette du titre de la section d'upsell. |
| `.upcart-upsell-item-image-skeleton` | Squelette de l'image du produit d'upsell. |
| `.upcart-upsell-item-title-skeleton` | Squelette du titre du produit d'upsell. |
| `.upcart-upsell-item-price-skeleton` | Squelette du prix du produit d'upsell. |
| `.upcart-upsells-button-skeleton` | Squelette du bouton d'action d'upsell. |
| `.upcart-trust-badge-skeleton` | Squelette du conteneur de badge de confiance. |
| `.upcart-trust-badge-image-skeleton` | Squelette de l'image du badge de confiance. |
| `.upcart-announcement-skeleton` | Espace réservé squelette pour les annonces. |
| `.upcart-rewards-skeleton` | Squelette de la section des récompenses. |
| `.upcart-rewards-message-skeleton` | Squelette des messages de récompense. |
| `.upcart-rewards-bar-skeleton` | Squelette de la barre de progression des récompenses. |
| `.upcart-addons-skeleton` | Squelette de la section des compléments. |
| `.upcart-addons-image-wrapper-skeleton` | Squelette de l'image du produit complémentaire. |
| `.upcart-addons-skeleton-text-container` | Squelette du contenu textuel des compléments. |
| `.upcart-discount-code-module-skeleton` | Squelette du module de code de réduction. |
| `.upcart-discount-code-input-skeleton` | Squelette du champ de saisie du code de réduction. |
| `.upcart-discount-code-button-skeleton` | Squelette du bouton d'application du code de réduction. |
| `.upcart-checkout-button-container-skeleton` | Squelette de l'enveloppe du bouton de paiement. |
| `.upcart-checkout-button-skeleton` | Squelette du bouton de paiement. |
| `.upcart-express-pay-buttons-container-skeleton` | Squelette du conteneur de paiement express. |
| `.upcart-express-pay-button-skeleton` | Squelette d'un bouton de paiement express individuel. |
## **Ressources utiles pour démarrer :**
* **[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.