⚠️ 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, 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.

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. Nous vous recommandons de consulter un expert Shopify pour les solutions de code personnalisé. Voir les experts Shopify

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

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.

Consignes importantes pour les sélecteurs V2

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

Sélecteurs CSS

Composants généraux


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.

Module d’en-tête


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.

Module d’annonces


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.

Modules de recommandation et d’upsell


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.

Module de notes


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.

Module de code de réduction


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.

Module de badges de confiance


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.

Module de récompenses à paliers


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.

Module des articles du panier


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.

Module de compléments


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.

Module de paiements express


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

Module de résumé du panier


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.

Ressources utiles pour démarrer :

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

Référence des fonctionnalités du panier

Référence CSS

Recettes de style

Recettes de fonctionnalités

Modèles personnalisés

API publique Upcart

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

Aperçu

NOTE

Comment utiliser les sélecteurs CSS Upcart

À savoir avant d’ajouter du CSS

Liste de vérification pour la personnalisation CSS :

Consignes importantes pour les sélecteurs V2

Sélecteurs CSS

Composants généraux

Module d’en-tête

Module d’annonces

Modules de recommandation et d’upsell

Module de notes

Module de code de réduction

Module de badges de confiance

Module de récompenses à paliers

Module des articles du panier

Module de compléments

Module de paiements express

Module de résumé du panier

Ressources utiles pour démarrer :

​Aperçu

​NOTE

​

​Comment utiliser les sélecteurs CSS Upcart

​À savoir avant d’ajouter du CSS

​Liste de vérification pour la personnalisation CSS :

​Consignes importantes pour les sélecteurs V2

​

​Sélecteurs CSS

​Composants généraux

​

​Module d’en-tête

​Module d’annonces

​Modules de recommandation et d’upsell

​Module de notes

​Module de code de réduction

​Module de badges de confiance

​Module de récompenses à paliers

​Module des articles du panier

​Module de compléments

​Module de paiements express

​Module de résumé du panier

​Ressources utiles pour démarrer :

​

​

Aperçu

NOTE

Comment utiliser les sélecteurs CSS Upcart

À savoir avant d’ajouter du CSS

Liste de vérification pour la personnalisation CSS :

Consignes importantes pour les sélecteurs V2

Sélecteurs CSS

Composants généraux

Module d’en-tête

Module d’annonces

Modules de recommandation et d’upsell

Module de notes

Module de code de réduction

Module de badges de confiance

Module de récompenses à paliers

Module des articles du panier

Module de compléments

Module de paiements express

Module de résumé du panier

Ressources utiles pour démarrer :