Points clés
checkout.liquidest uniquement disponible sur Shopify Plus (et Shopify POS Pro). Les forfaits standards n’y ont pas accès.- Vous le trouverez ici : Boutique en ligne → Thèmes → Actions → Modifier le code →
layout/checkout.liquid.- Shopify déprécie checkout.liquid au profit de Checkout Extensibility — les nouvelles personnalisations doivent utiliser cette nouvelle approche.
- Checkout Extensibility (extensions UI de checkout + Shopify Functions) est la solution à long terme prise en charge pour toutes les personnalisations du checkout sur Plus.
Le checkout est la page la plus cruciale de votre boutique. Une mise en page de checkout personnalisée, des éléments de réassurance ajoutés ou un upsell bien placé peuvent considérablement améliorer votre taux de conversion. Sur Shopify Plus, vous avez les outils pour créer tout ça — 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
Shopify a déprécié checkout.liquid pour les pages de remerciement et de statut de commande en août 2024. Il est prévu que les pages d'information et d'expédition soient dépréciées en août 2025, suivies de la page de paiement. Prévoyez de migrer vers Checkout Extensibility bien avant les échéances qui vous concernent — Shopify annonce les dates environ 12 mois à l'avance.
checkout.liquid vous donne un contrôle total sur le HTML du checkout via les templates Liquid. Checkout Extensibility est un framework plus encadré mais supporté officiellement : vous construisez des extensions UI basées sur React qui s'affichent dans des zones prédéfinies, avec des Shopify Functions pour la logique côté serveur. Vous avez moins de flexibilité brute, mais c'est supporté par Shopify et pérenne.
Oui — mais les données du champ doivent être gérées lors de la soumission (stockées en tant que line item properties, envoyées à un webhook ou sauvegardées dans un customer metafield). Avec Checkout Extensibility, l'extension d'interface utilisateur Customer Information gère les champs personnalisés de façon beaucoup plus propre, avec une validation et une soumission natives.
Historiquement oui — les deux vivaient dans le même fichier checkout.liquid. Depuis la dépréciation d'août 2024, la page de statut de commande est gérée par Checkout Extensibility, et non plus par checkout.liquid. Les modifications existantes de checkout.liquid pour le contenu des pages thank-you / order-status ont cessé de s'appliquer à cette date.
Oui, si vous faites de nouvelles personnalisations. Développer de nouvelles fonctionnalités sur une plateforme dépréciée vous obligera à tout refaire une fois la dépréciation effective. Vos personnalisations existantes peuvent rester sur checkout.liquid jusqu'à la date limite de migration, mais faites vos nouveaux développements sur Checkout Extensibility à partir de maintenant.
Pour mesurer vos résultats, lisez comment ajouter des scripts de tracking à Shopify.