Points clés
checkout.liquidest uniquement disponible sur Shopify Plus (et Shopify PDV Pro). Les forfaits standards n’y ont pas accès.- Pour y accéder : Boutique en ligne → Thèmes → Actions → Modifier le code →
layout/checkout.liquid.- Shopify abandonne checkout.liquid au profit de Checkout Extensibility — les nouvelles personnalisations doivent utiliser la nouvelle approche.
- Checkout Extensibility (Checkout UI Extensions + Shopify Functions) est l’approche à long terme prise en charge pour toute personnalisation du checkout sur Plus.
Le checkout (ou passage en caisse) est la page la plus stratégique de votre boutique. Une mise en page personnalisée, l’ajout de signaux de confiance ou un upsell bien placé peuvent améliorer considérablement votre taux de conversion. Sur Shopify Plus, vous disposez des outils pour y parvenir — mais le paysage évolue.
Qui peut accéder à checkout.liquid ?
Uniquement les marchands Shopify Plus. Le fichier checkout.liquid n’apparaît pas dans l’éditeur de code pour les forfaits Basic, Shopify ou Advanced. Les forfaits standards ne peuvent modifier le paiement que via Paramètres → Passage en caisse (paramètres visuels limités) et le champ “Scripts supplémentaires” de la “Page de statut de la commande”.
Note pour PDV Pro : checkout.liquid est également accessible sur Shopify PDV Pro, mais ce guide se concentre sur la personnalisation du checkout en ligne.
Accéder à checkout.liquid
- Allez dans Boutique en ligne → Thèmes → Actions → Modifier le code
- Cherchez le dossier
layout/ - Trouvez
checkout.liquid— il n’est visible que sur les forfaits Plus
Si vous ne le voyez pas, votre boutique n’est pas sur Shopify Plus.
Sur le même sujet : Modifier les libellés des champs de paiement sur Shopify.
Dupliquez toujours votre thème avant de modifier checkout.liquid. Une erreur dans checkout.liquid peut casser tout votre flux de paiement, empêchant tout achat sur le site.
Ce que vous pouvez personnaliser avec checkout.liquid
Ajouter des éléments de confiance
Le checkout est le moment où l’anxiété d’achat est à son maximum. L’ajout de signaux de confiance dans checkout.liquid peut réduire les abandons de panier :
<!-- À ajouter dans l'en-tête ou la barre latérale du checkout -->
<div class="checkout-trust-bar">
<span>🔒 Paiement sécurisé</span>
<span>Retours gratuits sur toutes les commandes</span>
<span>Livraison en 2-3 jours ouvrés</span>
</div>Le Liquid du paiement Shopify dispose de zones spécifiques où du contenu personnalisé peut être inséré : content_for_header, content_for_main, etc. Consultez la documentation de Shopify sur checkout.liquid pour obtenir la liste actuelle des variables prises en charge.
En-tête et pied de page de paiement personnalisés
Par défaut, votre checkout hérite d’une version simplifiée de l’en-tête de votre thème (logo uniquement) et d’un pied de page générique. Dans checkout.liquid, vous pouvez ajouter des éléments de marque, des liens de navigation personnalisés et un contenu de pied de page qui correspond à votre marque.
Sur le même sujet : Ajouter des badges de confiance au paiement Shopify.
Ajouter du CSS personnalisé
<!-- Dans la section <head> de checkout.liquid -->
<style>
.checkout-trust-bar {
display: flex;
gap: 24px;
justify-content: center;
padding: 12px;
background: #f5f5f5;
font-size: 12px;
}
</style>L’avertissement important : checkout.liquid est bientôt déprécié
Shopify a annoncé que checkout.liquid sera déprécié en août 2024 pour les pages de remerciement et de statut de commande, et la dépréciation pour les autres pages de paiement approche. Les nouvelles personnalisations de paiement doivent être créées à l’aide de Checkout Extensibility, et non de checkout.liquid.
Si votre boutique utilise toujours checkout.liquid pour certaines fonctionnalités, il continuera de fonctionner jusqu’à la date de dépréciation statuée par Shopify — mais vous devriez prévoir une migration.
Checkout Extensibility — la nouvelle approche
Checkout Extensibility est la plateforme actuelle de personnalisation du paiement de Shopify. Elle se compose de :
Checkout UI Extensions — Des composants basés sur React qui s’affichent à des emplacements spécifiques du checkout. C’est l’équivalent du HTML de checkout.liquid, mais géré via l’interface administrateur de Shopify (Paramètres → Passage en caisse → Personnaliser).
Shopify Functions — Une logique côté serveur qui s’exécute pendant le traitement du paiement (logiques de réduction, personnalisation du paiement et de la livraison).
Ce que Checkout Extensibility permet de faire
- Ajouter des blocs UI personnalisés au checkout : bannière d’information, texte personnalisé, champs de formulaire
- Ajouter des offres d’upsell dans la barre latérale du paiement
- Implémenter une logique de réduction sur mesure
- Personnaliser l’affichage des moyens de paiement
- Ajouter des pages d’upsell post-achat
Accéder à Checkout Extensibility
Paramètres → Passage en caisse → Personnaliser — cela ouvre l’éditeur visuel du checkout. Vous pouvez y déplacer des éléments, activer/désactiver des sections et ajouter des blocs d’extension.
Pour créer des UI extensions personnalisées, faire appel à un développeur utilisant la CLI de Shopify pour déployer le code est nécessaire. C’est plus complexe que de modifier checkout.liquid, mais c’est l’approche à long terme officiellement supportée.
Ce que Fudge fait et ne fait pas pour le checkout
Fudge crée et modifie les pages au sein de votre thème Shopify — pages produits, landing pages, pages de collection, sections personnalisées. La personnalisation du checkout est un système distinct du thème (régi par checkout.liquid et Checkout Extensibility).
Pour les éléments de conversion en amont du paiement — barres sticky d’ajout au panier, upsells sur les pages produits, personnalisation du tiroir de panier, comptes à rebours, badges de confiance — Fudge est le bon outil. Décrivez ce que vous voulez, Fudge génère le code sous forme de brouillon.
Pour les personnalisations spécifiques au checkout sur les forfaits Plus, il faudra utiliser checkout.liquid (ancienne méthode) ou Checkout Extensibility (nouvelle approche).
Page de remerciement / Page de statut de commande
La page de confirmation de commande (la page de “remerciement”) est accessible sur tous les forfaits Shopify via :
Paramètres → Paiement → Page de statut de la commande → Scripts supplémentaires
Ce champ accepte le HTML et le JavaScript et s’exécute après un achat réussi. Utilisations courantes :
- Pixels de suivi des conversions (pour les plateformes n’utilisant pas les Customer Events)
- Intégrations de sondages post-achat
- Invitations au programme de parrainage
- Messages de remerciement personnalisés
Avec Checkout Extensibility, Shopify a repensé la page de remerciement comme une véritable cible d’extension avec un éditeur visuel dans Paramètres → Paiement → Personnaliser.
FAQ
Quand checkout.liquid sera-t-il déprécié ?
Shopify a déprécié checkout.liquid pour les pages de remerciement et de statut de commande en août 2024. La dépréciation des pages d’information et d’expédition est prévue pour août 2025, suivie par la page de paiement. Planifiez votre migration vers Checkout Extensibility bien avant les dates butoirs — Shopify annonce les dates environ 12 mois à l’avance.
Quelle est la différence concrète entre checkout.liquid et Checkout Extensibility ?
checkout.liquid offre un contrôle total des templates Liquid sur le HTML du checkout. Checkout Extensibility est un framework plus encadré mais officiellement pris en charge : vous créez des extensions d’UI basées sur React qui s’affichent dans des zones prédéfinies, plus des Shopify Functions pour la logique côté serveur. Moins de flexibilité brute, mais supporté par Shopify et forward-compatible.
Puis-je ajouter des champs de formulaire personnalisés avec checkout.liquid ?
Oui — mais les données des champs doivent être gérées lors de la soumission (stockage sous forme de line item properties, envoi à un webhook, ou sauvegarde dans un metafield client). Avec Checkout Extensibility, l’extension d’UI Customer Information gère les champs personnalisés beaucoup plus proprement, avec une validation et une soumission natives.
Est-ce que les modifications de checkout.liquid affecteront la page de statut de la commande ?
Historiquement oui — les deux se trouvaient dans le même fichier checkout.liquid. Depuis la dépréciation d’août 2024, la page de statut de la commande est régie par Checkout Extensibility, et non plus par checkout.liquid. Vos modifications existantes sur checkout.liquid pour les pages de remerciement / statut de la commande ont cessé de s’appliquer à cette date.
Dois-je migrer vers Checkout Extensibility dès maintenant même si checkout.liquid fonctionne encore ?
Oui, si vous effectuez de nouvelles personnalisations. Développer de nouvelles fonctionnalités sur une plateforme dépréciée vous obligera à tout refaire lorsque la dépréciation définitive tombera. Les personnalisations existantes peuvent rester sur checkout.liquid jusqu’à la date limite de migration. Dorénavant, effectuez vos nouveaux développements sur Checkout Extensibility.
Pour mesurer les résultats, consultez notre guide pour ajouter des scripts de suivi à Shopify.