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 → Passage en caisse → Page de statut de la commande → Scripts supplémentaires
Ce champ accepte du HTML et du JavaScript et s’exécute après un achat validé. Utilisations courantes :
- Pixels de suivi des conversions (pour les plateformes qui n’utilisent pas encore les Événements client)
- Intégration de sondages post-achat
- Invitations à des programmes de parrainage
- Messages de remerciement personnalisés
Avec Checkout Extensibility, Shopify a repensé la page de remerciement comme une véritable cible d’extension dotée d’un éditeur visuel via Paramètres → Passage en caisse → Personnaliser.
Pour mesurer vos résultats, consultez notre article ajouter des scripts de suivi sur shopify.