Apprenez à utiliser HTML, CSS et JavaScript pour créer des fonctionnalités et des styles personnalisés dans votre tiroir de panier.
⚠️ Avis importantL’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.
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.
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
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.
🔧 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.
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 :
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.
Cette page vous a-t-elle été utile ?
⌘I
Assistant
Responses are generated using AI and may contain mistakes.
