⚠️ Avis important L’exemple de personnalisation de ce document ne fonctionne qu’avec la V1.0 des modules de panier Upcart. Si vous avez récemment mis à niveau votre panier vers la version 2, ces codes de personnalisation ne fonctionneront pas. Vous devrez utiliser les nouveaux sélecteurs fournis pour la version 2 dans le guide de migration. Veuillez consulter les autres documentations de personnalisation pour les solutions V2.0.

Aperçu

Upcart vous donne un contrôle total pour modifier l’apparence et le comportement du panier à l’aide de Custom HTML, Custom CSS et JavaScript. Ces outils vous permettent d’ajouter de nouvelles fonctionnalités, de styliser votre panier pour qu’il corresponde à votre marque, ou d’introduire de la logique pour améliorer le fonctionnement de votre panier. Ce guide couvre les bases de chacun et montre comment démarrer. Chaque section comprend un exemple visuel rapide pour vous aider à comprendre à quoi ressemblent les modifications en pratique.

Avant de commencer, assurez-vous de consulter la politique de personnalisation d’Upcart afin de savoir ce qui est pris en charge ou non par notre équipe.

Ajouter du contenu avec HTML

Le HTML est utilisé pour ajouter du contenu statique comme du texte, des bannières ou des boutons dans votre panier. Vous pouvez choisir parmi plusieurs emplacements HTML dans l’éditeur Custom HTML (par ex. au-dessus du bouton de paiement, en bas du panier, entre les articles). Cas d’utilisation courants :

Ajouter des messages personnalisés
Insérer des mentions légales ou des liens vers des politiques
Mettre en avant des dates limites d’expédition ou des informations de livraison

Exemple :

<div style="text-align: center; font-weight: bold;">  
  Thanks for shopping with us!  
</div

Éditeur Custom HTML d'Upcart ajoutant un message de remerciement au-dessus du bouton de paiement

Ajouter de la logique avec JavaScript

JavaScript contrôle le comportement et la logique du panier. Vous pouvez l’utiliser pour afficher ou masquer des éléments, appliquer des styles de manière conditionnelle, ou réagir aux changements du panier en temps réel. Vous devrez encadrer votre code dans une balise <script> et le placer dans Custom HTML > Scripts (Before Load) ou Above Announcements, selon le moment où il doit s’exécuter. Exemple : Limiter le panier à un upsell à la fois :

<script>  
  // Show upsells again when upsells are removed  
  window.upcartSubscribeItemRemoved((event) => {  
    if (event.item?.properties?.__upcartUpsell) {  
      const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
      if (upsells) upsells.style.display = "block";  
    }  
  });  
  
  // Hide upsells once one is added  
  window.upcartSubscribeUpsellsAddedToCart(() => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    if (upsells) upsells.style.display = "none";  
  });  
  
  // Check for upsell in cart when it loads  
  window.upcartSubscribeCartLoaded((event) => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    const items = event.cart.items || [];  
    const hasUpsell = items.some(item => item?.properties?.__upcartUpsell);  
    if (upsells && hasUpsell) {  
      upsells.style.display = "none";  
    }  
  });  
</script>

Note sur l’héritage : les callbacks window.upcartOnItemRemoved, window.upcartOnAddUpsell et window.upcartOnCartLoaded fonctionnent toujours mais sont obsolètes et génèrent des avertissements dans la console. Utilisez upcartSubscribeItemRemoved, upcartSubscribeUpsellsAddedToCart et upcartSubscribeCartLoaded pour tous les nouveaux scripts.

Éditeur Scripts Before Load de Custom HTML d'Upcart avec du JavaScript masquant le module d'upsells

🔧 Note pour les développeurs :
Upcart fournit une documentation complète de l’API publique qui liste toutes les fonctions, variables et bonnes pratiques disponibles pour les personnalisations avancées. Nous vous recommandons de la consulter lorsque vous créez des scripts ou des intégrations plus complexes.

Styliser votre panier avec CSS

Le CSS contrôle l’apparence des éléments de votre panier. Utilisez-le pour ajuster les espacements, les couleurs, les tailles de police ou masquer des éléments indésirables. Custom CSS est l’un des onglets sous Settings (derrière More settings si la rangée d’onglets déborde). Cas d’utilisation courants :

Changer la couleur des titres de produit ou des boutons
Ajuster la taille ou l’alignement de la police
Ajouter de l’espacement entre les sections

Exemple : Changer la couleur du titre d’upsell en V1.0 :

.upcart-upsells-title {  
  color: #C20075 !important;  
  font-size: 25px;  
  font-style: italic;  
  text-align: center;  
}

Éditeur Custom CSS d'Upcart stylisant la couleur du titre d'upsell avec une confirmation de modifications enregistrées

Ressources supplémentaires

Vous souhaitez améliorer vos compétences en HTML, CSS ou JavaScript ? Consultez ces outils gratuits :

Support pour les personnalisations

L’équipe de support d’Upcart ne peut pas vous aider à implémenter du code personnalisé. Pour des modifications plus avancées, nous vous recommandons d’engager un Shopify Expert.

Prise en main

Modules de panier

Paramètres du panier

Bouton de panier flottant

Multicart

Personnalisations

Analyses

Intégrations et compatibilité

Facturation et compte

Dépannage

Premiers pas avec les personnalisations Upcart

Aperçu

Ajouter du contenu avec HTML

Ajouter de la logique avec JavaScript

Styliser votre panier avec CSS

Ressources supplémentaires

Support pour les personnalisations

​Aperçu

​Ajouter du contenu avec HTML

​Ajouter de la logique avec JavaScript

​Styliser votre panier avec CSS

​Ressources supplémentaires

​Support pour les personnalisations

Aperçu

Ajouter du contenu avec HTML

Ajouter de la logique avec JavaScript

Styliser votre panier avec CSS

Ressources supplémentaires

Support pour les personnalisations