⚠️ Avis important Cette personnalisation fonctionne uniquement avec la version 1 des modules de panier Upcart. Si vous avez récemment mis à niveau votre panier vers la version 2, ces personnalisations peuvent ne pas fonctionner. Vous devrez utiliser les nouveaux sélecteurs fournis pour la version 2 dans le guide de migration. Si vos personnalisations ne fonctionnent pas comme prévu, vous pouvez revenir vous-même à la version 1 du panier : dans le Cart Editor, utilisez le menu déroulant Cart version en haut du menu de gauche et choisissez V1.0 (Legacy). Le menu déroulant apparaît une fois que chaque module du panier est en V2. Nous travaillons actuellement sur de nouveaux modèles de personnalisation pour la version 2 des modules, et ils seront bientôt disponibles.

Aperçu

Cette personnalisation vous permet de masquer des parties spécifiques du panier, comme la barre de récompenses, si certains produits sont présents. Elle est utile lorsque vous souhaitez simplifier l’expérience du panier pour certains SKU ou empêcher l’affichage de promotions spécifiques à côté de certains articles. Cette configuration utilise les identifiants de produit pour détecter quels produits se trouvent dans le panier et masque un élément choisi si une correspondance est trouvée. Vous appliquerez cette logique à l’aide de HTML et CSS personnalisés dans l’éditeur Upcart.

Quand l’utiliser

Masquer la barre de récompenses lorsque des articles promotionnels sont dans le panier
Masquer des blocs de contenu personnalisés, des badges de confiance ou des sections d’upsell en fonction du type de produit
Maintenir un parcours de paiement plus épuré ou plus adapté pour des articles spécifiques

Cette approche nécessite des connaissances de base en HTML et JavaScript.

Étape 1 : Trouver les identifiants de produit

Allez dans Shopify Admin > Products
Cliquez sur le produit que vous souhaitez cibler
Copiez l’identifiant numérique du produit dans l’URL après /products/

Exemple :

/products/1234567890 → 1234567890

Vous utiliserez ces identifiants dans le tableau JavaScript qui contrôle la visibilité.

Étape 2 : Ajouter le HTML personnalisé

Allez dans Upcart > Cart Editor > Settings > Custom HTML
Collez le code suivant dans les deux emplacements HTML : Above announcements/rewards et On empty cart screen
Remplacez les valeurs dans productIDsToExclude par vos identifiants de produit
Modifiez .YOUR-CLASS-HERE pour cibler l’élément du panier que vous souhaitez masquer (par exemple : .upcart-rewards, .custom-message, .trust-badge)

<script>  
  window.upcartSubscribeCartLoaded((event) => {  
    const items = event.cart.items;  
    const productIDsToExclude = [  
      6958755512411,  
      6958755610712,  
      7736708759774  
    ];  
  
    let cartContainsExcludedItem = false;  
  
    items.forEach((item) => {  
      productIDsToExclude.forEach((id) => {  
        if (item.productId === id) {  
          cartContainsExcludedItem = true;  
        }  
      });  
    });  
  
    const targetElement = window.upcartDocumentOrShadowRoot.querySelector(".YOUR-CLASS-HERE");  
    if (targetElement) {  
      targetElement.style.display = cartContainsExcludedItem ? "none" : "block";  
    }  
  });  
</script>

Note héritée : les rappels window.upcartOnCartLoaded fonctionnent toujours mais sont obsolètes et génèrent des avertissements dans la console. Utilisez upcartSubscribeCartLoaded pour tous les nouveaux scripts.

Étape 3 : CSS de secours facultatif

Si vous souhaitez vous assurer que l’élément est masqué avant le chargement complet du panier, ajoutez ceci dans la section Custom CSS :

.YOUR-CLASS-HERE {   display: none; }

Remarque : cela peut masquer temporairement l’élément pour tous les utilisateurs jusqu’à l’exécution du JavaScript, ce qui peut provoquer un scintillement. Dans la plupart des cas, il est préférable de s’appuyer sur la méthode JavaScript.

Résultat final

Une fois la configuration terminée :

L’élément de panier ciblé (comme la barre de récompenses) sera masqué si le panier contient l’un des produits spécifiés
L’élément reste visible dans le cas contraire
Vous pouvez réutiliser cette logique pour masquer ou afficher différents éléments en fonction de règles spécifiques aux produits

Besoin d’aide supplémentaire ?

Pour des personnalisations plus complexes, nous vous recommandons de travailler avec un Shopify Expert. Il peut vous aider avec le HTML, le CSS et le JavaScript dans votre tiroir de panier. Voir les Shopify Experts

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

Masquer des éléments spécifiques du panier à l'aide des identifiants de produit

Aperçu

Quand l’utiliser

Étape 1 : Trouver les identifiants de produit

Étape 2 : Ajouter le HTML personnalisé

Étape 3 : CSS de secours facultatif

Résultat final

Besoin d’aide supplémentaire ?

​Aperçu

​Quand l’utiliser

​Étape 1 : Trouver les identifiants de produit

​Étape 2 : Ajouter le HTML personnalisé

​Étape 3 : CSS de secours facultatif

​Résultat final

​Besoin d’aide supplémentaire ?

Aperçu

Quand l’utiliser

Étape 1 : Trouver les identifiants de produit

Étape 2 : Ajouter le HTML personnalisé

Étape 3 : CSS de secours facultatif

Résultat final

Besoin d’aide supplémentaire ?