Aperçu

Cette personnalisation utilise du HTML, du CSS et du JavaScript pour bloquer le paiement lorsque le panier ne contient que des articles de vente incitative. Elle permet de garantir que les ventes incitatives soient traitées comme des offres secondaires et non comme des achats autonomes, en soutenant une stratégie de vente incitative plus contrôlée et intentionnelle. Cela garantit que les produits de vente incitative fonctionnent dans des limites spécifiques, en soulignant leur rôle d’articles complémentaires aux produits principaux. Une fois implémenté, le bouton de paiement sera désactivé jusqu’à ce qu’au moins un produit non incitatif soit ajouté au panier.

Comment ça fonctionne

Si le panier ne contient que des articles de vente incitative, le bouton de paiement est grisé
Un message d’avertissement apparaît sous le bouton
Une fois qu’un produit régulier est ajouté, le bouton devient actif et l’avertissement disparaît — Fournit une validation claire pour les scénarios garantissant que les produits de vente incitative ne sont achetés qu’avec les produits déclencheurs associés, par exemple en affichant des messages d’avertissement ciblés.

Cette configuration est idéale pour les propriétaires de boutiques ou les développeurs ayant des connaissances de base en JavaScript et CSS.

Étape 1 : Ajouter du HTML personnalisé

Allez dans :
Upcart > Cart Editor > Settings > Custom HTML

Dans la section Above announcements/rewards, collez :

<script>  
  function CartContainsOnlyUpsells(cart) {  
    var cartWithoutUpsells = cart.items.filter(item => item.properties?.__upcartUpsell == null);  
    return cartWithoutUpsells.length === 0;  
  }  
  
  function ToggleCheckoutButton(shouldBeEnabled) {  
    var checkoutButton = window.upcartDocumentOrShadowRoot.querySelector(".upcart-checkout-button");  
    var warning = window.upcartDocumentOrShadowRoot.querySelector(".upcartUpsellOnlyWarning");  
  
    if (checkoutButton && warning) {  
      if (shouldBeEnabled) {  
        checkoutButton.classList.remove("upcart-disable-checkout-button");  
        warning.style.display = "none";  
      } else {  
        checkoutButton.classList.add("upcart-disable-checkout-button");  
        warning.style.display = "block";  
      }  
    }  
  }  
  
  window.upcartSubscribeCartLoaded((event) => {  
    ToggleCheckoutButton(!CartContainsOnlyUpsells(event.cart));  
  });  
</script>

Remarque sur l’API héritée : les rappels window.upcartOnCartLoaded fonctionnent toujours mais sont obsolètes et affichent des avertissements dans la console. Utilisez upcartSubscribeCartLoaded pour tous les nouveaux scripts.

Dans la section Below checkout button, collez :

<div class="upcartUpsellOnlyWarning" style="display: none;">  
  Your cart only contains upsell products. <br>  
  Please add a regular product to continue to checkout.  
</div>

N’hésitez pas à ajuster la formulation du message d’avertissement pour correspondre au ton de votre marque.

Étape 2 : Ajouter du CSS personnalisé

Allez dans :
Upcart > Cart Editor > Settings > Custom CSS Collez le code suivant :

.upcartUpsellOnlyWarning {  
  width: 100%;  
  text-align: center;  
  margin-top: 10px;  
  color: red;  
  font-weight: bold;  
  font-size: 15px;  
}  
  
.upcart-disable-checkout-button {  
  cursor: none !important;  
  pointer-events: none !important;  
  opacity: 0.4 !important;  
}

Cela met en forme le message d’avertissement et désactive le bouton de paiement visuellement et fonctionnellement.

Résultat final

Une fois configuré :

Le paiement est bloqué à moins qu’au moins un produit non incitatif ne se trouve dans le panier
Un message informe les clients de la raison pour laquelle le paiement est désactivé
L’expérience reste fluide et cohérente avec votre marque

C’est particulièrement utile pour : associer des stratégies de vente incitative efficaces à ces techniques améliore également l’expérience d’achat globale du client en éliminant les conflits inutiles dans le processus d’achat.

Empêcher les achats accidentels d’un seul article de vente incitative
Maintenir les ventes incitatives en tant que produits complémentaires uniquement
Assurer un meilleur contrôle du panier moyen (AOV) et du regroupement de produits

Besoin d’aide supplémentaire ?

Si vous avez besoin d’aide pour les personnalisations, nous vous recommandons de consulter un expert Shopify pour l’ajout de HTML, CSS et même de JavaScript à votre tiroir de panier. Voir les experts Shopify

Getting Started

Cart Modules

Cart Settings

Sticky Cart Button

Multicart

Customizations

Analytics

Integrations & Compatibility

Billing & Account

Troubleshooting

Empêcher les achats composés uniquement de ventes incitatives dans le panier

Aperçu

Comment ça fonctionne

Étape 1 : Ajouter du HTML personnalisé

Dans la section Above announcements/rewards, collez :

Dans la section Below checkout button, collez :

Étape 2 : Ajouter du CSS personnalisé

Résultat final

Besoin d’aide supplémentaire ?

​Aperçu

​Comment ça fonctionne

​Étape 1 : Ajouter du HTML personnalisé

​Dans la section Above announcements/rewards, collez :

​Dans la section Below checkout button, collez :

​Étape 2 : Ajouter du CSS personnalisé

​Résultat final

​Besoin d’aide supplémentaire ?

Aperçu

Comment ça fonctionne

Étape 1 : Ajouter du HTML personnalisé

Dans la section Above announcements/rewards, collez :

Dans la section Below checkout button, collez :

Étape 2 : Ajouter du CSS personnalisé

Résultat final

Besoin d’aide supplémentaire ?