Broken checkout sur Shopify - Causes & solutions

Symptômes : comment confirmer le diagnostic

Avant de toucher au code, identifie précisément le symptôme. Sur Shopify, chaque symptôme pointe vers une famille de causes différente — un bouton « Payer » mort n'a rien à voir avec un « aucune option d'expédition disponible ».

Segmente immédiatement la panne selon trois axes, c'est ce qui fait gagner le plus de temps : tous les clients ou seulement certains ? Tous navigateurs ou mobile uniquement ? Le blocage est-il au paiement, à la livraison, ou la page checkout ne charge tout simplement pas ?

• Bouton « Payer maintenant » / « Checkout » inactif ou sans réaction au clic (souvent un conflit JS d'app upsell ou de pixel).
• Clic sur Checkout depuis le tiroir panier → freeze de 2-3 secondes → renvoi sur la page précédente (bug « cart drawer freeze », fréquent avec apps de cart drawer custom).
• Message « aucune option d'expédition n'est disponible » (no shipping methods available) : zone d'expédition ou poids produit non couverts.
• « Le paiement a été désactivé pour cette boutique » (Checkout has been disabled for this store) : problème de forfait ou de facturation.
• « Cette boutique ne peut pas accepter les paiements pour le moment » (This store is currently unable to accept payments) : Shopify Payments en attente de vérification ou suspendu.
• Panier qui se vide soudainement, ou « skip checkout » qui ramène au moyen de paiement précédent sans pouvoir le changer.
• Erreur générique « Something went wrong » : à creuser via la console navigateur, souvent un script tiers.

1. Reproduis la commande toi-même avec un vrai produit, en navigation privée (incognito) pour écarter une extension ou un cache navigateur.
2. Reteste depuis un autre appareil et un autre réseau (4G du téléphone) : si ça marche ailleurs, le problème est côté client, pas côté boutique.
3. Note le symptôme EXACT (capture d'écran + message littéral) : c'est ce qui oriente tout le reste du diagnostic.

Impact business immédiat

Un checkout cassé n'est pas un bug d'affichage : c'est une fuite directe de revenu, et elle est rarement détectée tôt parce qu'aucune alerte ne se déclenche. Tu continues à voir du trafic et des ajouts panier dans tes analytics — seul le nombre de commandes chute.

L'effet est aussi durable : un client qui échoue au paiement revient rarement, et un pic de panne pendant une campagne payante brûle ton budget acquisition à coût constant pour zéro conversion.

• Perte sèche de commandes en temps réel, proportionnelle à ton trafic du moment (pire pendant soldes, BFCM, drop produit).
• Coût d'acquisition qui explose : tu paies toujours Meta/Google Ads, mais le ROAS tombe à zéro sur la période de panne.
• Hausse mécanique du taux d'abandon de panier visible dans Commandes → Paiements abandonnés (Orders → Abandoned checkouts).
• Avis clients négatifs et tickets SAV (« impossible de payer »), qui dégradent la confiance à moyen terme.
• Si la panne touche le pixel de conversion (cas Checkout Extensibility, voir plus bas), tes campagnes perdent aussi leurs données d'optimisation — double peine.

Causes classées par probabilité

Voici les causes réelles d'un checkout Shopify cassé, de la plus fréquente à la plus rare. Attaque-les dans cet ordre : tu résous la majorité des cas avant d'arriver à la moitié de la liste.

• 1. Conflit d'app tierce (la plus fréquente) : apps d'upsell, de cart drawer, de bundles, ReCharge, Bold, convertisseurs de devises. Elles injectent du JS qui casse le bouton de paiement. Attention au code résiduel : une app désinstallée peut laisser des Web Pixels ou des liquid snippets actifs.
• 2. Shopify Payments / passerelle mal configurée ou en mode test : un mode test resté activé bloque les vraies cartes ; une passerelle non vérifiée renvoie « This store is currently unable to accept payments ».
• 3. Frais de livraison manquants pour l'adresse client : aucune zone d'expédition ne couvre le pays/région, ou le poids du produit dépasse les paliers définis → « aucune option d'expédition n'est disponible ».
• 4. Checkout Extensibility / dépréciation checkout.liquid : Additional Scripts non migrés, pixels Thank You / Order Status cassés depuis août 2025 (détaillé dans la section versions).
• 5. Erreur de taxes : configuration TVA incohérente (TVA France/UE mal paramétrée, override sur un produit) qui bloque le calcul du total.
• 6. Stock / localisation : produit en rupture (« Continuer la vente quand le stock est épuisé » décoché) ou emplacement non assigné à la zone de vente.
• 7. Erreur de thème / code : modification manuelle de cart.liquid, theme.liquid ou d'un snippet injectant du JS bloquant ; Google Tag Manager mal configuré.
• 8. SSL / domaine / DNS : certificat non provisionné après un changement de domaine, redirection cassée vers checkout.shopify.com.
• 9. Panne serveur Shopify : rare mais réelle — toujours vérifier status.shopify.com d'abord.
• 10. Côté client : bloqueur de pub, VPN, extension navigateur, cache. Écarté dès le test incognito.

Diagnostic : les commandes à lancer

Shopify ne donne pas accès aux logs serveur du checkout. Tes seuls vrais outils sont la console navigateur, l'onglet réseau, et les outils Shopify (Theme Inspector, Web Pixels). Voici la séquence reproductible, du plus rapide au plus technique.

Commence par la checklist 60 secondes : c'est le filtre qui t'évite de plonger dans le code pour rien.

Ensuite, ouvre la console (F12 → onglet Console) sur la page checkout et lance la commande qui filtre le bruit pour isoler les vraies erreurs JS bloquantes. Puis inspecte le réseau pour repérer une requête en erreur (4xx/5xx) sur le flux de paiement.

• Checklist 60 sec : status.shopify.com (pas de panne ?) → Paramètres → Paiements : mode test désactivé ? → test en incognito → test depuis un autre appareil/réseau.
• La console est ton log serveur de substitution : 90 % des conflits d'app y laissent une trace (TypeError, script tiers).
• Le test « thème Dawn » est le diagnostic définitif pour isoler un bug de code vs un bug d'app.

1. Ouvre la console navigateur sur la page de paiement et capture les erreurs JS rouges, en notant le fichier source de chaque erreur (révèle l'app coupable).
2. Repère dans l'onglet Réseau toute requête en échec sur le flux checkout/payment.
3. Liste les apps front-facing actives et coupe-les une par une pour isoler le conflit.
4. Duplique ton thème, applique Dawn (thème Shopify par défaut) en aperçu, et reteste : si le checkout remarche sous Dawn, le bug vient de ton thème.
5. Vérifie les pixels actifs dans Paramètres → Événements clients (Settings → Customer events) — un custom pixel mal écrit casse le checkout.

// F12 > Console, sur la page de paiement
// Capturer toutes les erreurs runtime et leur origine
window.addEventListener('error', e => {
  console.warn('[CHECKOUT ERROR]', e.message, '→', e.filename, ':' + e.lineno);
});
// Lister les scripts tiers chargés (apps, pixels, GTM)
[...document.scripts]
  .map(s => s.src)
  .filter(src => src && !src.includes('shopify'))
  .forEach(src => console.log('3rd-party:', src));

// Surveille les appels réseau qui échouent pendant le checkout
performance.getEntriesByType('resource')
  .filter(r => /pay|checkout|graphql|shipping/i.test(r.name))
  .forEach(r => console.log(r.responseStatus || '?', r.name));
// Cherche un status 4xx/5xx sur shipping_rates ou payment

# Récupère le thème en cours, le sert en local sans toucher au live
shopify theme pull --store ta-boutique.myshopify.com
shopify theme dev --store ta-boutique.myshopify.com

# Cherche tout JS résiduel injecté dans le panier / le checkout hérité
grep -rn "checkout" snippets/ sections/ layout/theme.liquid
grep -rn "ScriptTag\|additional_scripts\|<script" templates/cart.* snippets/

# À lancer depuis Apps > (un client API) ou l'app GraphiQL
# 1. Le store peut-il encaisser ?
query {
  shop {
    name
    plan { displayName }
    paymentSettings { supportedDigitalWallets }
  }
}
# 2. Script Tags hérités encore actifs (cause checkout cassé post-migration)
query {
  scriptTags(first: 20) {
    edges { node { id src displayScope } }
  }
}

Solutions pas-à-pas

Applique les correctifs dans l'ordre des causes les plus probables. Après chaque action, refais une commande test en incognito avant de passer à la suivante — sinon tu ne sauras pas ce qui a réellement réglé le problème.

1. Désactive les apps suspectes en commençant par la dernière installée et les apps d'upsell/cart drawer/devises. Désinstalle (pas seulement désactive) si besoin, puis purge le code résiduel : Paramètres → Événements clients pour les pixels orphelins, et le thème pour les snippets liquid laissés par l'app.
2. Vérifie le mode test : Paramètres → Paiements (Settings → Payments) → Shopify Payments → s'assurer que « Activer le mode test » est désactivé. Contrôle aussi que la passerelle n'est pas « en attente de vérification » dans Finances → Transactions.
3. Corrige les frais de livraison : Paramètres → Expédition et livraison (Settings → Shipping and delivery) → vérifie que la zone couvre le pays du client et que les paliers de poids/prix incluent le panier concerné. Ajoute un tarif « par défaut » de secours si besoin.
4. Contrôle le stock et l'emplacement : Produits → [Produit] → Inventaire → Emplacements (Products → Inventory → Locations) — l'emplacement doit être assigné à la zone de vente et la variante en stock (ou « continuer la vente » coché).
5. Vérifie les taxes : Paramètres → Taxes et droits de douane (Settings → Taxes and duties) — supprime tout override incohérent qui empêche le calcul du total.
6. Teste sous thème par défaut : Boutique en ligne → Thèmes (Online Store → Themes) → duplique ton thème, publie Dawn en test. Si ça marche, restaure ton thème depuis une sauvegarde antérieure au bug ou retire la modif fautive identifiée au diagnostic.
7. Contrôle le forfait et le domaine : Paramètres → Forfait (Settings → Plan) si message de checkout désactivé ; Paramètres → Domaines (Settings → Domains) pour vérifier le SSL et la redirection.
8. Si tout est sain côté boutique et que status.shopify.com signale un incident, communique avec tes clients et redirige temporairement vers un canal alternatif (DM, lien de paiement) le temps que Shopify rétablisse.

Spécificités par version

C'est le point que la quasi-totalité des guides concurrents ignore, et c'est aujourd'hui une cause réelle et active de checkout cassé. Shopify a déprécié checkout.liquid en deux phases, et les deux deadlines sont passées.

Phase 1 — 13 août 2024 : les pages information, expédition et paiement migrées de force vers Checkout Extensibility. Phase 2 — 28 août 2025 : pages Thank You + Order Status, ainsi que les Additional Scripts et les Script Tags. Conséquence en juin 2026 : toute personnalisation checkout.liquid restante, les Additional Scripts non migrés et les pixels/analytics encore posés sur Thank You / Order Status sont cassés ou silencieusement inactifs.

Deadline imminente à surveiller : Shopify Scripts (réductions, paiement, livraison via Ruby) cessent de fonctionner le 30 juin 2026. Si tu utilises encore Shopify Scripts, il te reste très peu de temps pour migrer vers Shopify Functions, sinon tes règles de réduction/paiement sauteront.

• Shopify Basic / Shopify / Advanced : pas d'accès à checkout.liquid. Tes leviers sont les apps d'extension de checkout (UI extensions limitées), les pixels et la config admin. Les UI extensions avancées et Functions restent réservées à Shopify Plus.
• Shopify Plus : seul forfait à avoir eu checkout.liquid. Si ta boutique l'utilisait encore, c'est probablement TA cause de panne aujourd'hui — migre vers Checkout Extensibility (blocs, UI extensions, Functions).
• Thèmes OS 2.0 (Dawn, Craft, Sense) : sections JSON et app blocks ; un app block mal supprimé peut casser le panier qui précède le checkout.
• Web Pixels vs Additional Scripts : les anciens Additional Scripts (boîte de texte dans Paramètres → Paiement) ne sont plus exécutés sur le nouveau checkout. Tout tracking de conversion doit passer par un Web Pixel (Paramètres → Événements clients) ou un custom pixel propre.

Cas mobile : le checkout qui casse uniquement sur smartphone

La majorité du trafic e-commerce est mobile, et certains bugs de checkout n'apparaissent QUE sur petit écran. Aucun guide de fond ne traite ce cas, alors qu'il représente une part énorme des pannes vécues.

La cause typique : une app d'upsell ou un sticky bar dont le bouton se superpose au bouton « Payer » sur viewport étroit, rendant ce dernier non cliquable. Sur Chrome Android, on observe aussi des ratés du tap sur le bouton de paiement, et le cart drawer custom qui freeze puis renvoie en arrière.

• Teste TOUJOURS sur device physique réel (iPhone + Android), pas seulement en émulation DevTools : les bugs de touch et de scroll ne se reproduisent pas en émulation.
• Vérifie le z-index : un élément d'app (upsell, chat, sticky add-to-cart) qui passe par-dessus le bouton de paiement le rend inactif sans erreur console.
• iOS Safari traite 100vh différemment de Chrome Android : un overlay full-screen mal codé peut masquer le bouton de validation.
• Coupe les apps front-facing une par une en test mobile : c'est presque toujours une app de cart drawer ou d'upsell qui casse le flux mobile.

FAQ