E-commerce
23 décembre 2025
Vos clients doivent parfois préciser un digicode, un étage ou un créneau, alors que pour d'autres commandes ces informations n'apportent rien. Afficher systématiquement un champ libre au checkout allonge le parcours et augmente le risque d'abandon lorsque la question n'est pas pertinente. Les instructions de livraison conditionnelles consistent à n'afficher la saisie que lorsque le contexte du panier, du produit ou de l'adresse le justifie. Sur Shopify, cette logique s'appuie en général sur les Checkout UI extensions et sur le stockage des réponses dans des metafields, comme le montre le tutoriel officiel Add a field to checkout pour des instructions de livraison. Ce guide résume le modèle mental, les contraintes de plateforme (notamment Shopify Plus), une logique d'affichage et des bonnes pratiques alignées sur la documentation Shopify. Pour approfondir l'écosystème technique au-delà du checkout, voir aussi nos ressources de développement Shopify.
Sommaire
Qu'est-ce qu'une instruction conditionnelle ?
Il s'agit d'un champ (instructions de livraison, consignes de dépôt, message cadeau, précision pour transporteur) qui n'apparaît que lorsque des critères métier sont remplis : présence d'un article fragile, livraison à une adresse identifiée comme complexe, méthode d'expédition sélectionnée, métadonnée produit activant un besoin de créneau, etc. L'objectif est de réduire le bruit cognitif pour la majorité des commandes tout en capturant l'information critique quand elle existe. Côté données, la valeur saisie doit rejoindre un emplacement exploitable en préparation (souvent un metafield lié au panier ou à la commande) pour éviter qu'elle ne reste dans un simple commentaire informel.
Friction au checkout et objectif produit
Shopify rappelle que le checkout est le moment où le client finalise coordonnées, livraison et paiement. Toute extension doit rester cohérente avec une expérience fiable, efficace et respectueuse des attentes d'achat. Un champ supplémentaire non justifié augmente la charge de lecture et la probabilité d'erreur ; un champ conditionnel bien conçu vise l'inverse : montrer l'information au bon moment, avec un libellé explicite (par exemple préciser digicode et étage plutôt qu'un vague « Commentaire »).
Checkout UI extensions : rappels utiles
Les extensions d'interface permettent d'ajouter du contenu à des emplacements définis du parcours de paiement. La documentation distingue des cibles liées aux étapes du checkout et des blocs positionnables plus librement. Les composants s'appuient sur la bibliothèque UI de checkout : l'interface est rendue de façon native, hérite des réglages de marque du marchand et n'autorise pas la surcharge CSS arbitraire, ce qui aide à garder une expérience homogène. Les extensions s'exécutent dans un environnement isolé ; elles n'accèdent pas au DOM du checkout ni aux données de paiement sensibles, ce qui fait partie du modèle de sécurité décrit dans la référence des Checkout UI extensions.
« Les extensions UI de checkout sont un moyen sûr et sécurisé de personnaliser l'apparence et le fonctionnement de la page de paiement sans compromettre la sécurité du checkout ou des données clients. »
Shopify, Checkout UI extensions (section Security)
À l'édition, Shopify impose une limite de taille de bundle (64 KB) pour préserver des temps de chargement corrects : un point à intégrer dès la conception si vous combinez plusieurs composants ou validations.
Shopify Plus et périmètre du checkout
Selon la documentation, les Checkout UI extensions pour les étapes information, livraison et paiement ne sont disponibles que pour les boutiques Shopify Plus. Le tutoriel officiel d'ajout de champ pour des instructions de livraison indique également que les Checkout UI extensions concernées sont réservées aux marchands Plus. Il est donc essentiel de cadrer votre projet : une PME sur un plan standard pourra devoir combiner d'autres leviers (notes de commande lorsque disponibles, apps publiques, parcours post-achat) jusqu'à une montée de gamme ou un besoin app validé sur Plus.
Sujet | Ce que dit la doc Shopify | Implication pour votre feature |
|---|---|---|
Étapes information / livraison / paiement | Extensions UI associées : périmètre Plus | Valider le plan boutique avant d'investir le développement |
Checkout éditable | Le marchand place les blocs via l'éditeur de checkout | Prévoir tests sur plusieurs placements |
Sécurité | Sandbox, pas d'accès paiement | Ne pas promettre de personnalisation hors composants supportés |
Metafields, champs et tutoriel « add field »
Le guide Add a field to checkout montre comment créer un champ personnalisé pour collecter des instructions de livraison, puis enregistrer la valeur dans un metafield de panier et l'afficher dans l'admin. Vous pouvez vous en inspirer pour d'autres cas d'usage de champs personnalisés. Avant de coder, Shopify recommande de lire les guidelines UX pour les champs afin d'harmoniser libellés, facultatif / obligatoire et validation.
Sur le plan technique, la doc « Apps in checkout » explique que les marchands installent l'app depuis l'admin et positionnent l'extension via l'éditeur de checkout. Les extensions sont présentées comme faciles à installer et compatibles avec les évolutions de Shopify Checkout, Shop Pay ou le checkout une page. Pour la validation côté client, le portail développeur renvoie aussi vers des tutoriels de validation côté client lorsqu'il faut bloquer la progression si une règle métier n'est pas respectée.
Exemples de règles d'affichage
La logique conditionnelle dépend des signaux exposés par les API d'extension : lignes du panier (SKU, metafields produit), méthode d'expédition, pays ou champs d'adresse, attributs que vous maintenez vous-même. Gardez les règles lisibles et testables : une cascade obscure est difficile à debugger lorsqu'un client signale un champ manquant.
Condition illustrative | Comportement possible | Point d'attention |
|---|---|---|
Produit avec metafield « livraison_créneau » | Afficher sélection de date ou créneau | Aligner avec la promesse transporteur réelle |
Adresse sans ligne 2 mais code postal urbain dense | Afficher champ instructions (digicode) | Éviter les doublons si l'adresse est complétée plus tard |
Panier contenant article personnalisé | Afficher champ de précision | Limiter la longueur et filtrer les caractères si besoin |
Méthode « point relais » sélectionnée | Afficher consigne spécifique au relais | Vérifier la disponibilité des données côté API |
Les exemples ci-dessus sont des schémas de conception : l'implémentation exacte dépend des APIs accessibles à votre extension et des politiques de données du marchand.
Cartographie des leviers (UI, Functions, pixels)
La page Apps in checkout rappelle que plusieurs types d'extensions complètent le checkout : UI extensions pour l'interface, Functions pour la logique métier côté plateforme, Web pixel extensions pour la mesure, et des extensions de paiement selon les besoins. Pour des instructions conditionnelles, l'UI extension répond surtout à la question « que voit et saisit le client ? » ; une Function peut répondre à « quelles options de livraison ou quelles validations s'appliquent ? » sans exposer de complexité inutile à l'écran.
Levier | Rôle typique | Lien avec instructions livraison |
|---|---|---|
Checkout UI extension | Champs, bannières, validations client | Afficher ou masquer la saisie, guider l'utilisateur |
Shopify Functions | Règles serveur (livraison, remises, validations) | Filtrer méthodes ou imposer contraintes panier |
Web pixel | Mesure et analytics | Suivre l'usage du champ, pas pour la collecte primaire |
Combiner ces briques permet de garder une interface sobre tout en appliquant des règles strictes lorsque le panier contient des articles incompatibles avec un mode de livraison choisi. Documentez la frontière entre « affichage » et « règle » pour éviter que deux composants ne contredisent le même message au client.
Panier, commande et systèmes tiers
Lorsque vous capturez une information avant la finalisation, elle vit d'abord dans le contexte du panier. Le tutoriel officiel relie le champ à un metafield de panier pour que la valeur survive aux interactions de checkout et puisse être relue côté admin. Après création de la commande, les équipes logistiques consomment souvent l'API Admin, des webhooks ou des connecteurs WMS : documentez le nom du metafield, son namespace et les règles de migration si vous changez de schéma. Si vous dupliquez l'information à plusieurs endroits, prévoyez une source de vérité pour éviter les divergences entre ce que voit le préparateur et ce que lit le transporteur.
Pour des règles plus « serveur » (par exemple empêcher une méthode de livraison ou forcer une validation quantitative), Shopify oriente vers les Shopify Functions et les tutoriels associés (options de livraison, validation panier). Combiner UI extension et Function permet de séparer : collecte et aide à la saisie côté interface, règles d'éligibilité côté logique métier centralisée.
Accessibilité, performance et guidelines
Respectez les guidelines UX checkout : formulations claires, hiérarchie visuelle sobre, validation immédiate lorsque le champ est obligatoire sous certaines conditions. Prévoyez la localisation si vous vendez dans plusieurs langues : les fichiers de locales fournis avec l'extension supportent typiquement `fr.json` en complément de la locale par défaut. Du côté performance, limitez les appels réseau synchrones inutiles et surveillez la taille du bundle.
Checklist avant mise en production
Confirmer le plan Shopify et le périmètre d'extension autorisé pour les étapes ciblées.
Valider les exigences de design pour les apps checkout : accessibilité, cohérence avec le branding, absence de contenu trompeur.
Passer le checkout réel avec plusieurs profils d'adresse, plusieurs méthodes d'expédition et, si vous shippez à l'international, des formats d'adresse variés.
Vérifier Shop Pay et le parcours mobile : une grande partie du trafic e-commerce est mobile.
Prévoir un plan de rollback : désactivation de l'extension ou feature flag côté serveur si un bug bloque la conversion.
Former le support interne : que répondre si un client ne voit pas le champ alors qu'il pense remplir les critères ?
Options hors développement custom
Si vous n'êtes pas sur Plus ou si vous limitez le temps développeur, explorez les apps de l'App Store qui encapsulent déjà des scénarios de champs. Vérifiez la compatibilité avec Checkout Extensibility et la feuille de route de votre thème. Certaines enseignes combinent un champ léger en panier, un email post-achat automatisé ou un chatbot pour compléter les informations manquantes : ce n'est pas équivalent fonctionnellement, mais peut suffire à court terme.
Bonnes pratiques et erreurs à éviter
Bonnes pratiques
Afficher un champ uniquement lorsque le panier ou l'adresse le justifie, pour réduire la charge cognitive.
Écrire des libellés contextualisés : « Instructions pour le livreur (digicode, étage) » plutôt qu'un intitulé générique.
Persister la valeur dans un metafield exploitable par la préparation et les intégrations logistiques.
Prévoir une limite de caractères raisonnable et une validation côté client si la règle métier l'exige.
Tester plusieurs placements dans l'éditeur de checkout et avec Shop Pay lorsque pertinent.
Documenter la logique métier pour les équipes support : elles doivent comprendre quand le champ apparaît.
Erreurs fréquentes
Ignorer la contrainte Plus sur les étapes concernées et découvrir le blocage en fin de projet.
Multiplier les champs « au cas où » : chaque composant ajoute du poids et de la complexité.
Oublier la persistance structurée : texte perdu hors metafield commande / panier synchronisé.
Règles imbriquées opaques : préférez des conditions nommées et testées automatiquement.
Libellés ambigus qui génèrent des réponses inutilisables pour l'entrepôt.
Les avantages
Checkout plus court pour les parcours simples, tout en capturant les cas complexes.
Meilleure qualité des données transmises à l'expédition et moins d'allers-retours email.
Alignement avec les recommandations UX Shopify sur la clarté et l'efficacité.
Base technique moderne (extensions) compatible avec l'évolution du checkout Shopify.
Compléter avec un chatbot
Un checkout affiné ne remplace pas une bonne réponse aux questions préalables : délais, retrait magasin, produits réglementés. Un chatbot IA comme Qstomy peut clarifier ces points avant paiement et réduire les abandons dus au doute. Voir aussi intégration chatbot IA sur Shopify et le guide chatbot e-commerce.
Résumé
Les instructions de livraison conditionnelles visent à n'afficher un champ utile que lorsque le contexte l'exige, puis à stocker la réponse dans un metafield exploitable. Sur Shopify, les Checkout UI extensions sont l'outil moderne décrit dans la documentation, avec des règles de disponibilité Shopify Plus sur les étapes clés du tunnel et un tutoriel officiel pour un champ d'instructions relié au panier. Couplez la logique métier à des guidelines UX, des tests réels dans l'éditeur de checkout et une veille sur les exigences de distribution des apps. Enfin, gardez une trace des versions d'API d'extension que vous ciblez : les mises à jour du schéma `shopify.extension.toml` et du CLI Shopify peuvent impacter le rendu ou les capacités réseau de votre extension.
FAQ
Faut-il du développement ?
Pour une extension personnalisée, oui : le parcours décrit dans la documentation s'appuie sur Shopify CLI, le code d'extension et la configuration `shopify.extension.toml`. Des apps clé en main peuvent réduire le besoin de code maison.
Est-ce réservé à Shopify Plus ?
Les extensions d'interface sur les étapes information, livraison et paiement du checkout sont limitées aux boutiques Plus selon la référence officielle. Vérifiez votre plan avant de lancer un projet.
Où stocker la valeur ?
Le tutoriel « add field » illustre un enregistrement vers un metafield de panier et l'affichage dans l'admin ; d'autres architectures peuvent viser la commande selon votre flux. L'important est la cohérence avec vos outils de préparation.
Peut-on bloquer le paiement si le champ est vide ?
Oui, via des mécanismes de validation côté client documentés pour les extensions, ou des validations serveur avec Shopify Functions selon le besoin. Chaque approche a des implications de maintenance.
Risque de lenteur ?
Shopify limite la taille du bundle des extensions UI. Restez dans les composants prévus, évitez les appels réseau inutiles et suivez les bonnes pratiques réseau décrites pour les extensions.
Pourquoi ne pas multiplier les études tierces sur l'abandon ?
Les pourcentages d'abandon varient fortement selon les secteurs et méthodologies. Ici, l'accent est mis sur les exigences Shopify et une conception prudente des champs, plutôt que sur des chiffres externes difficiles à comparer.
Comment tester dans l'éditeur de checkout ?
La documentation de test des extensions renvoie vers l'éditeur de checkout pour positionner les blocs et prévisualiser le rendu. Utilisez les scénarios de test recommandés (y compris les références de placement pour les extensions de type bloc) afin de valider plusieurs configurations avant la mise en ligne.
Que devient checkout.liquid ?
Les personnalisations historiques basées sur checkout.liquid sont en déclin au profit de Shopify Extensions dans Checkout. Si votre boutique migre, planifiez le remplacement des scripts par des extensions conformes aux guides d'upgrade Shopify pour éviter des interruptions le jour du passage ou lors des mises à jour majeures de Shopify.
Données personnelles et conformité
Si vous collectez des informations sensibles, vérifiez les règles de traitement, la finalité affichée au client et les éventuelles exigences de déclaration auprès des autorités de protection des données. Les apps qui accèdent à des données clients protégées doivent suivre les processus de conformité décrits par Shopify pour les développeurs.
Aller plus loin
23 décembre 2025
