Le checkout est la dernière étape avant une vente, et pendant des années, c’était la partie d’une boutique Shopify la plus difficile à modifier. Les boutiques Shopify Plus modifiaient un fichier appelé checkout.liquid, et toutes les autres devaient se contenter du checkout tel quel.
Ce n’est plus le cas. Aujourd’hui, toutes les boutiques Shopify peuvent personnaliser leur checkout dans une certaine mesure, avec des outils qui continuent de fonctionner quand Shopify met à jour son checkout. Ce guide explique ce que vous pouvez modifier quel que soit votre forfait, ce qui nécessite Shopify Plus, et comment sont réalisées les personnalisations de checkout les plus courantes.
Ce qui a changé : Checkout Extensibility
Shopify a remplacé checkout.liquid par un ensemble d’outils appelé Checkout Extensibility. Au lieu de modifier le code du checkout, vous le personnalisez à l’aide de quatre briques :
- L’éditeur de checkout, pour l’image de marque : votre logo, vos couleurs et vos polices.
- Les Checkout UI extensions, qui ajoutent aux pages du checkout des blocs comme des bannières, des champs personnalisés et des ventes additionnelles.
- Shopify Functions, de petits éléments de logique sur mesure qui s’exécutent dans le checkout de Shopify, pour les remises et les règles de paiement et de livraison. Elles remplacent aussi Shopify Scripts, les scripts Ruby que les boutiques Plus utilisaient pour les mêmes tâches.
- Les événements client, où se trouvent désormais les pixels de suivi, à la place de l’ancien champ « Scripts supplémentaires ».
Le grand avantage, c’est que ces personnalisations sont sans risque lors des mises à jour. Quand Shopify ajoute un mode de paiement ou améliore son checkout, vos personnalisations continuent de fonctionner.
Ce que vous pouvez personnaliser avec tous les forfaits Shopify
L’image de marque dans l’éditeur de checkout
Dans votre interface administrateur Shopify, allez dans Paramètres → Paiement et cliquez sur Personnaliser. L’éditeur de checkout vous permet d’ajouter votre logo et de définir vos couleurs et vos polices, pour que le checkout ressemble au reste de votre boutique.
Les paramètres du checkout
Sur la même page de paramètres, vous choisissez comment les clients sont contactés, quels champs ils remplissent (comme le nom de l’entreprise, la ligne d’adresse 2 et le numéro de téléphone), s’ils peuvent laisser un pourboire et comment le consentement marketing est recueilli.
Les règles de paiement et de livraison
Les applications du Shopify App Store construites sur Shopify Functions peuvent masquer, renommer et réordonner les modes de paiement et de livraison, quel que soit le forfait. Par exemple, vous pouvez masquer le paiement à la livraison au-delà d’un certain montant de commande, ou renommer un mode d’expédition pour afficher son délai de livraison.
Les remises personnalisées
Les remises natives de Shopify couvrent l’essentiel. Les applications construites sur Shopify Functions ajoutent des remises plus poussées, comme les remises sur volume, les remises par paliers sur la commande et les remises qui ne s’appliquent que sous certaines conditions.
Les pages de remerciement et d’état de la commande
Les Checkout UI extensions peuvent ajouter des blocs aux pages de remerciement et d’état de la commande avec tous les forfaits, comme un sondage, un message ou une recommandation de produit.
Ce qui nécessite Shopify Plus
Deux choses sont réservées aux boutiques Shopify Plus :
- Les blocs à l’intérieur des étapes du checkout. Les Checkout UI extensions placées sur les étapes d’information, d’expédition et de paiement, comme les champs personnalisés, les badges de confiance, les bannières et les blocs de vente additionnelle, nécessitent Shopify Plus. Cela vaut pour les blocs de n’importe quelle application.
- Les applications sur mesure avec Shopify Functions. Toute boutique peut utiliser des applications de l’App Store construites sur Functions, mais seules les boutiques Plus peuvent utiliser une application sur mesure créée rien que pour elles, avec une logique propre à leur activité.
| Ce que vous voulez modifier | Tous les forfaits | Shopify Plus |
|---|---|---|
| Logo, couleurs et polices | Oui | Oui |
| Champs du formulaire, pourboires et paramètres de consentement | Oui | Oui |
| Règles de paiement et de livraison (applications de l’App Store) | Oui | Oui |
| Remises personnalisées (applications de l’App Store) | Oui | Oui |
| Blocs sur les pages de remerciement et d’état de la commande | Oui | Oui |
| Blocs et champs personnalisés dans les étapes du checkout | Non | Oui |
| Applications sur mesure avec Shopify Functions | Non | Oui |
Comment personnaliser le checkout Shopify, étape par étape
- Listez ce que vous voulez modifier, et pourquoi. Chaque modification doit résoudre un vrai problème, comme des commandes en paiement à la livraison qui échouent ou un panier moyen trop faible.
- Commencez par les paramètres et l’éditeur de checkout. Beaucoup de modifications, dont l’image de marque et les champs du formulaire, ne nécessitent aucune application.
- Utilisez une application de l’App Store pour les règles et les remises. Choisissez des applications construites sur Shopify Functions, pour que les règles s’exécutent nativement dans le checkout.
- Sur Shopify Plus, ajoutez des blocs là où ils sont utiles. Ajoutez des blocs d’application dans l’éditeur de checkout, ou faites créer par un développeur des extensions d’interface et des Functions sur mesure.
- Testez avant que vos clients ne le voient. Passez des commandes test sur mobile et sur ordinateur, avec vos remises, vos zones d’expédition et vos modes de paiement. Notre checklist BFCM comprend un test complet du checkout.
Les personnalisations courantes du checkout et comment les réaliser
| Personnalisation | Comment la réaliser | Forfait |
|---|---|---|
| Masquer le paiement à la livraison au-delà d’un montant de commande | Règle de paiement (Function) | Tous |
| Afficher les délais de livraison dans le nom des modes d’expédition | Règle de livraison (Function) | Tous |
| Achetez-en 3, économisez 10 % | Remise (Function) | Tous |
| Barre de progression vers la livraison gratuite ou vente additionnelle au checkout | Checkout UI extension | Plus |
| Champ de message cadeau ou d’instructions de livraison | Checkout UI extension | Plus |
Sans Shopify Plus, vous pouvez tout de même recueillir des informations supplémentaires, comme un message cadeau, sur la page panier, avant que les clients n’arrivent au checkout.
Checkout Engine, notre application de règles de checkout, couvre les trois premières lignes sans code, ainsi que des blocs de vente additionnelle et de confiance pour les boutiques Shopify Plus. Elle est entièrement construite sur Shopify Functions et Checkout UI Extensions.
Migrer depuis checkout.liquid ou Shopify Scripts
Si votre boutique utilisait checkout.liquid, des scripts supplémentaires ou Shopify Scripts, chaque personnalisation doit trouver une nouvelle place :
- Les remises et les règles de paiement et d’expédition issues de Scripts deviennent des Shopify Functions.
- Les contenus et champs ajoutés à checkout.liquid deviennent des checkout UI extensions.
- Le code de suivi des scripts supplémentaires passe dans les événements client.
Commencez par un audit de ce qui tourne aujourd’hui, puis reconstruisez chaque élément et testez-le avant de basculer. C’est exactement ce que fait notre service de développement Shopify Plus, assuré par l’équipe qui a créé Checkout Engine sur Shopify Functions.
Quand faire appel à un développeur
Une application est la solution la plus rapide si elle fait ce dont vous avez besoin. Un développeur vaut l’investissement quand :
- vos règles dépendent de données que seule votre entreprise possède, comme des niveaux de clients issus d’un ERP ;
- plusieurs règles interagissent et doivent être testées ensemble ;
- vous êtes sur Shopify Plus et voulez une application sur mesure avec des Functions, créée rien que pour votre boutique.
Notre équipe de développement d’applications Shopify sur mesure crée ce type de logique de checkout, de remises et d’intégrations. Réservez un appel stratégique gratuit pour parler de ce dont votre checkout a besoin.
Questions fréquentes
Puis-je personnaliser le checkout Shopify sans Shopify Plus ?
Oui, dans certaines limites. Avec tous les forfaits, vous pouvez adapter le checkout à votre marque dans l’éditeur de checkout, modifier les paramètres du checkout, utiliser des applications de l’App Store construites sur Shopify Functions pour les règles de paiement, de livraison et de remise, et ajouter des blocs aux pages de remerciement et d’état de la commande. Les blocs à l’intérieur des étapes du checkout nécessitent Shopify Plus.
Puis-je encore utiliser checkout.liquid ?
Non. Shopify a remplacé checkout.liquid par Checkout Extensibility : l’éditeur de checkout, les checkout UI extensions et Shopify Functions. Les personnalisations qui utilisaient checkout.liquid doivent être reconstruites avec ces outils.
Que sont les Shopify Functions ?
De petits éléments de logique sur mesure qui s’exécutent dans le panier et le checkout de Shopify, pour des tâches comme les remises et les règles de paiement et de livraison. Elles remplacent Shopify Scripts et continuent de fonctionner quand Shopify met à jour son checkout.
Puis-je ajouter des champs personnalisés au checkout Shopify ?
Sur Shopify Plus, oui, avec les checkout UI extensions. Avec les autres forfaits, vous pouvez recueillir des informations supplémentaires, comme un message cadeau, sur la page panier avant que les clients n’arrivent au checkout.