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

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.

Module d’en-tête


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 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é : 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 (V1)

Aperçu

Note

Comment utiliser les sélecteurs CSS Upcart

À savoir avant d’ajouter du CSS

Liste de vérification pour la personnalisation CSS :

Bibliothèque de sélecteurs CSS

Paramètres généraux

Module Design

Module d’en-tête

Paramètres du corps

Module d’annonces

Module de récompenses

Module de recommandations

Module de mises à niveau d’abonnement

Module d’upsells

Paramètres des produits

Paramètres du pied de page

Module de compléments

Module de codes de réduction

Ligne des économies

Module de paiements express

Note

Module de badges de confiance

Module de notes supplémentaires

Module des paramètres Upcart

Sélecteurs de squelettes

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 :

​Bibliothèque de sélecteurs CSS

​Paramètres généraux

​Module Design

​Module d’en-tête

​Paramètres du corps

​Module d’annonces

​Module de récompenses

​Module de recommandations

​Module de mises à niveau d’abonnement

​Module d’upsells

​Paramètres des produits

​Paramètres du pied de page

​Module de compléments

​Module de codes de réduction

​Ligne des économies

​Module de paiements express

​Note

​Module de badges de confiance

​Module de notes supplémentaires

​Module des paramètres Upcart

​Sélecteurs de squelettes

​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 :

Bibliothèque de sélecteurs CSS

Paramètres généraux

Module Design

Module d’en-tête

Paramètres du corps

Module d’annonces

Module de récompenses

Module de recommandations

Module de mises à niveau d’abonnement

Module d’upsells

Paramètres des produits

Paramètres du pied de page

Module de compléments

Module de codes de réduction

Ligne des économies

Module de paiements express

Note

Module de badges de confiance

Module de notes supplémentaires

Module des paramètres Upcart

Sélecteurs de squelettes

Ressources utiles pour démarrer :