Shopify Checkout Extensibility en 2026 : Dates limites, extensions d'interface et guide de mise à niveau

Par Eoin Villarin, le 05/02/2026, mis à jour le 14/11/2026

L'extensibilité de l'interface de paiement Shopify a remplacé checkout.liquid et Shopify Scripts. Voir chaque date limite, ce qui se passe si vous n'avez pas mis à niveau, et comment créer des extensions d'interface de paiement avec Preact.

Qu'est-ce que l'extension de la commande Shopify et quelle était la date limite ?

Shopify checkout extensibility est la façon basée sur des applications de Shopify pour personnaliser le checkout, en utilisant des extensions d'interface de checkout, Shopify Functions, des pixels web et des paramètres de branding au lieu de checkout.liquid, des scripts supplémentaires et Shopify Scripts. Les magasins Plus ont perdu checkout.liquid le 13 août 2024 (étapes de checkout) et le 28 août 2025 (pages de remerciement et de statut de commande), les Scripts ont cessé de fonctionner le 30 juin 2026, et les magasins non Plus ont dû mettre à niveau avant le 26 août 2026.

Principaux avantages

  • checkout.liquid a cessé de fonctionner sur les étapes d'Information, d'Expédition et de Paiement le 13 août 2024, et sur les pages de Merci et de Statut de commande Plus le 28 août 2025.
  • Les scripts Shopify ont cessé de fonctionner le 15 avril 2026 et ont cessé de s'exécuter le 30 juin 2026 ; la logique de remise, d'expédition et de paiement appartient désormais aux Fonctions Shopify.
  • Les magasins non Plus avaient jusqu'au 26 août 2026 pour mettre à niveau leurs pages de remerciement et de statut de commande, et les balises de script sur ces pages sont maintenant obsolètes.
  • Les extensions de l'interface de commande utilisent désormais @shopify/ui-extensions avec des composants Web Preact et Polaris, remplaçant l'ancien package @shopify/checkout-ui-extensions-react, avec une limite de bundle de 64 Ko.
  • Les extensions sur les étapes d'Information, d'Expédition et de Paiement et les applications personnalisées avec des Fonctions nécessitent Shopify Plus ; les extensions de statut de commande Merci et fonctionnent sur tous les plans.

Extensibilité de l'interface de paiement Shopify est la seule façon prise en charge de personnaliser la commande Shopify en 2026. Il a remplacé checkout.liquid, scripts supplémentaires, balises script et Shopify Scripts avec quatre blocs de construction basés sur des applications : extensions UI de paiement, Shopify Functions, pixels web et les paramètres de marque. Toutes les dates limites sont maintenant dépassées. checkout.liquid a cessé de fonctionner aux étapes Information, Livraison et Paiement le 13 août 2024, les boutiques Plus l’ont perdu sur les pages Merci et Statut de la commande le 28 août 2025, Shopify Scripts a cessé de fonctionner le 30 juin 2026, et les boutiques non‑Plus ont atteint leur date limite Merci et Statut de la commande le 26 août 2026.

Si votre magasin a manqué l'une de ces dates, l'ancien code n'est pas "suspendu", il ne fonctionne simplement plus. Ce guide explique ce qu'est l'extension de checkout, la chronologie complète, ce qui a remplacé quoi, comment passer à l'étape suivante et comment créer une extension d'interface utilisateur de checkout avec les composants Web actuels Preact et Polaris. Je crée et migre des checkouts Shopify pour gagner ma vie, donc je l'ai rendu pratique et je n'ai indiqué que des faits que j'ai pu vérifier par rapport aux propres documents de Shopify, qui sont répertoriés à la fin.

Qu'est-ce que Shopify checkout extensibility ?

L'extensibilité de l'interface de paiement Shopify est l'ensemble d'outils qui permet aux applications et aux commerçants de modifier l'apparence et le comportement de l'interface de paiement sans éditer directement le code de l'interface de paiement. Au lieu d'un modèle Liquid unique que vous pouviez réécrire librement, l'interface de paiement est désormais une page appartenant à Shopify avec des emplacements définis où le code approuvé peut s'insérer. Shopify décrit les principales pièces sur son vue d'ensemble des applications de commande:

  • Extensions de l'interface de commande ajoutez des éléments d'interface tels que des champs, des bannières, des ventes incrémentales et des cases à cocher. Les commerçants les placent dans l'éditeur de commande.
  • Fonctions Shopify modifier la logique métier sur les serveurs de Shopify : remises, options de livraison, options de paiement, validation du panier et de la commande, bundles, ramassage local et contraintes de fulfillment.
  • Pixels Web gérez l'analyse et le suivi de conversion en vous abonnant à des événements standard de client dans un bac à sable, au lieu d'injecter des scripts.
  • Marquage contrôle les couleurs, les polices, les logos, le rayon de coin et la mise en page via l'éditeur de commande et, pour des modifications plus profondes, l'API GraphQL Admin.
  • Extensions de paiements permet aux fournisseurs de paiement d'intégrer leurs méthodes dans la commande.

Le commerce est simple. Vous renoncez à la liberté de réécrire n'importe quelle partie de la page, et en retour, vos personnalisations survivent aux mises à jour propres de Shopify, le checkout reste rapide et sécurisé, et des fonctionnalités comme Shop Pay, le checkout à une page et les nouvelles méthodes de paiement continuent de fonctionner sans que vous ayez à toucher quoi que ce soit.

Date limite et calendrier de l'extensibilité de la commande

Le passage away from checkout.liquid s'est produit par étapes. Le tableau ci-dessous liste chaque date qui compte, qui en a été affecté et ce qui s'est passé. Les dates proviennent du changelog de Shopify, de son centre d'aide et de ses documents de développeur.

DateCe qui s'est passéQui cela a-t-il affecté
13 février 2023Shopify a annoncé que le fichier de thème checkout.liquid était dépréciéShopify Plus
15 février 2024Rapport de personnalisations alimentées par l'IA publié pour aider les magasins Plus à planifier leur mise à niveauShopify Plus
13 août 2024checkout.liquid a cessé de fonctionner sur les étapes d'Information, d'Expédition et de PaiementShopify Plus
28 août 2025checkout.liquid, scripts supplémentaires et tags de script ont été abandonnés sur les pages de Merci et de Statut de commande ; la zone de scripts supplémentaires est devenue en mode lecture seuleShopify Plus (zone de visualisation pour toutes les boutiques)
15 avril 2026Les scripts Shopify ne pouvaient plus être modifiés ou publiésMagasins Plus utilisant des scripts
30 juin 2026Scripts Shopify et l'application Script Editor ont été retirés ; les scripts ne s'exécutent plus sur aucune boutiqueMagasins Plus utilisant des scripts
26 août 2026Date limite pour mettre à niveau les pages de remerciement et de statut de commande ; sunset des balises de scriptMagasins non Plus

En bref, la mise à niveau de l'extension de checkout n'est plus facultative pour personne. À compter du novembre 2026, il n'y a aucun plan ou paramètre qui ramène checkout.liquid, des scripts supplémentaires ou Shopify Scripts.

Que se passe-t-il si une boutique n'a pas mis à niveau ?

Le code hérité cesse de s'exécuter et le magasin passe aux pages standard de Shopify. En pratique, cela signifie :

  • modifications de checkout.liquid ne s'exécutent plus. Les documentation de checkout.liquid indique qu'il n'est pas pris en charge sur les étapes d'informations, d'expédition et de paiement et a été supprimé sur les pages de remerciement et de statut de commande le 28 août 2025.
  • Scripts supplémentaires ne peut pas être modifié, car la zone a été en mode lecture seule depuis le 28 août 2025, et le code qu'elle contient n'est plus exécuté sur les pages mises à jour. Les victimes typiques sont les tags de conversion, le suivi d'affiliation, les enquêtes post-achat et les demandes d'avis.
  • Étiquettes de script provenant d'applications sur les pages de remerciement et de statut de commande sont supprimées (Plus le 28 août 2025, non-Plus le 26 août 2026).
  • Scripts Shopify n'appliquez plus de remises, n'affichez plus les tarifs de livraison ou ne réorganisez plus les méthodes de paiement. Les Page de transition des scripts dit clairement que les scripts ne s'exécutent plus sur aucun magasin.

confirme que la mise à niveau remplace les pages de remerciement et de statut de commande existantes et toutes les personnalisations qui y sont apportées, et que les magasins sur le plan Pause et construction sont mis à niveau automatiquement et de manière permanente. Pour les checkouts Plus toujours sur checkout.liquid, Shopify a indiqué qu'il les mettrait à niveau automatiquement avec un préavis de 30 jours par e-mail. Les pages d'aide actuelles de Shopify ne publient pas de date de mise à niveau automatique exacte pour chaque type de magasin, donc la vérification la plus sûre consiste à ouvrir Paramètres, Checkout dans votre administration et regardez quelle version chaque page est sur.

checkout.liquid vs extensibilité de la commande

C'est la comparaison que je parcours avec les clients lorsqu'ils demandent pourquoi leurs anciennes personnalisations ne peuvent pas simplement être copiées.

Zonecheckout.liquid (hérité)Extensibilité de la commande (actuel)
Comment vous personnalisezModifier un modèle Liquid, CSS et JavaScript directementLes applications ajoutent des extensions d'interface utilisateur, des fonctions et des pixels à des endroits définis
Qui pourrait l'utiliserUniquement Shopify PlusToutes les formules sur les pages de remerciement et d'état de commande ; Plus pour les étapes d'information, d'expédition et de paiement
Améliorer la sécuritéMises à jour Shopify pourraient casser le code personnaliséLes extensions sont versionnées et continuent à fonctionner à travers les mises à jour de checkout
Logique de réduction et d'expéditionScripts Shopify écrits en RubyFonctions Shopify compilées en WebAssembly (Rust ou JavaScript)
SuiviScripts supplémentaires et balises de script dans la pagePixels d'applications et pixels personnalisés dans un bac à sable
StylismeN'importe quel CSSMarquage de l'éditeur de commande plus l'API de marquage GraphQL sur Plus
Performances et sécuritéDes scripts tiers s'exécutaient sur la page de paiementLes extensions s'exécutent dans un bac à sable Web Worker sans accès au DOM
Shop Pay et checkout en une pageIncompatible avec les modèles personnalisésEntièrement pris en charge
Statut en 2026SuppriméLa seule option prise en charge

Quelles parties de la commande Shopify pouvez-vous personnaliser ?

Les extensions de l'interface de commande s'affichent dans cible. Une cible est un emplacement nommé dans le paiement, et Shopify regroupe les cibles en trois types.

Dessin de plan d'étage architectural, comme une disposition de processus de paiement avec des cibles d'extension définies
Les extensions ne s'exécutent que dans des cibles définies. Photo : rawpixel, CC0
  • Cibles de bloc, tel que purchase.checkout.block.render et purchase.thank-you.block.render, que les marchands peuvent faire glisser vers n’importe quel emplacement pris en charge dans l’éditeur de paiement.
  • Cibles statiques, qui s’affichent à un point fixe, par exemple après les champs de contact, après les lignes du panier ou avant les boutons d’action.
  • Cibles exécutables, qui renvoient des données ou une logique sans afficher quoi que ce soit.

La page de remerciement utilise purchase.thank-you cible, et la page de statut de commande vit désormais dans les comptes client, en utilisant customer-account.order-status cible.

Ce que chaque plan Shopify peut faire

FonctionnalitéPlans non PlusShopify Plus
Extensions de l'interface utilisateur sur les pages de remerciement et de statut de commandeOuiOui
Extensions de l'interface utilisateur sur les étapes d'Information, d'Expédition et de PaiementNonOui
Applications publiques contenant des fonctions ShopifyOuiOui
Applications personnalisées contenant des fonctions ShopifyNonOui
Marquage de base dans l'éditeur de processus de paiementOuiOui
Marquage avancé via l'API GraphQL AdminNonOui (également sur les boutiques de développement)
Pixels d'applications et pixels personnalisésOuiOui

La limite Plus sur les étapes d'Information, d'Expédition et de Paiement vient directement de référence des extensions de l'interface utilisateur de la commande, et la règle d’application personnalisée pour Functions se trouve dans le Documentation des Fonctions Shopify.

Extensions d'interface de paiement Shopify en 2026 : React, Preact et composants web

Si vous recherchez @shopify/checkout-ui-extensions-react, vous regardez la première génération de l’outil. Les noms de paquets ont changé deux fois, et de nombreux anciens tutoriels affichent encore les importations originales.

PackageÈreStatut en novembre 2026
@shopify/checkout-ui-extensions-react et @shopify/checkout-ui-extensions2022 à 2023Héritage ; dernière publication en août 2023 (version 0.27.3)
@shopify/ui-extensions-reactVersions de l'API 2023-04 à 2025-07Supplanté ; la dernière ligne de version est 2025.7.x
@shopify/ui-extensions avec PreactVersion de l'API 2025-10 et ultérieureActuel ; le dernier est 2026.10.0 pour la version de l'API 2026-10

À partir de la version API 2025-10, les nouvelles extensions utilisent Composants Web Polaris par défaut. Les composants sont des éléments personnalisés tels que <s-stack>, <s-checkbox>, <s-text>, <s-button> et <s-banner>, rendu avec Preact. Les données et actions du paiement ont été déplacées des hooks React vers un shopify objet, par exemple shopify.cost, shopify.buyerIdentity et shopify.applyAttributeChange(). Shopify CLI génère un shopify.d.ts fichier avec les types lorsque vous exécutez shopify app dev.

La principale raison du changement est la taille. Un bundle d'extension d'interface utilisateur compilé ne peut pas dépasser 64 KB (extensions de compte client en plein écran obtiennent 128 KB), et Shopify applique cela au moment du déploiement. Le petit runtime de Preact laisse bien plus de budget pour votre propre code. Deux changements supplémentaires à connaître : à partir de la version d’API 2026‑04 le metafields propriété est dépréciée au profit de shopify.appMetafields et des modifications de métachamp de panier, et le nouveau @shopify/ui-extensions-tester paquet ajoute des tests unitaires.

Guide de mise à niveau non-Plus de Shopify guide de migration vers les composants Web ne liste pas de date de suppression pour les extensions basées sur React épinglées à des versions d'API plus anciennes. Cependant, de nouvelles fonctionnalités ne sont ajoutées que dans les versions actuelles, prévoyez donc le déplacement lors de votre prochaine mise à jour réelle.

Comment passer à l'extension de checkout Shopify étape par étape

Que vous nettoyiez après une mise à niveau automatique ou que vous ayez encore une logique de l'ère Scripts à reconstruire, le processus est le même.

  1. Audit de ce que vous aviez. Dans Paramètres, Checkout, ouvrez le guide de mise à jour ou le rapport de personnalisations. Il répertorie vos anciennes modifications de checkout.liquid et trie les scripts supplémentaires par objectif, comme le suivi de commande ou l’authentification. Exportez également votre ancien code Shopify Scripts si vous l’avez encore.
  2. Associez chaque personnalisation à son remplacement. Les modifications de l'interface utilisateur deviennent des extensions de l'interface utilisateur de checkout, la logique de remise et d'expédition devient des fonctions Shopify, le suivi devient des pixels d'applications ou des pixels personnalisés, et les modifications visuelles deviennent des paramètres de marque.
  3. Consultez d'abord l'App Store. De nombreux besoins courants, tels que les messages de cadeau, les dates de livraison, les enquêtes après achat et les remises à plusieurs niveaux, existent déjà sous forme d'applications d'extensibilité de checkout. La création personnalisée n'a de sens que lorsqu'aucune application ne convient ou que la logique est spécifique à votre entreprise.
  4. Construire ou installer les remplacements sur un magasin de développement ou une commande en double. De plus, les magasins peuvent créer une commande de brouillon dans l'éditeur et laisser intacte la commande en direct.
  5. Re créer le suivi. Installez les applications officielles pour Google, Meta et TikTok, qui fournissent des pixels d'application, et déplacez les tags restants dans Paramètres, Événements client en tant que pixels personnalisés.
  6. Testez les commandes réelles. Utilisez le mode test pour passer des commandes via toutes les méthodes de paiement, les deux mises en page de la commande et tous les marchés où vous vendez, puis confirmez que les conversions arrivent dans vos analyses.
  7. Publier et surveiller. Publiez le nouveau checkout, puis comparez le taux de conversion, la valeur moyenne des commandes et les revenus suivis par rapport aux semaines précédant le changement.

Si votre magasin a besoin que cela soit fait correctement, c'est une partie essentielle de mon Service de développement Shopify.

Comment créer une extension d'interface utilisateur de checkout Shopify

Vous avez besoin d'un compte Partenaire Shopify, de la dernière CLI Shopify et d'une boutique de développement. Pour cibler les étapes d'Information, d'Expédition ou de Paiement, la boutique de développement doit avoir les fonctionnalités Shopify Plus activées.

Smartphone sur un bureau en bois à côté d'un ordinateur portable pour tester une extension de checkout sur mobile
A extension Preact testée par rapport à un véritable processus de paiement. Photo : rawpixel, CC0
  1. Exécuter shopify app init pour créer une application, ou ouvrir une application existante.
  2. Exécuter shopify app generate extension --template checkout_ui et donnez à l'extension un nom clair.
  3. Éditer shopify.extension.toml pour définir la version de l'API, les capacités et la cible.
  4. Écrivez l'interface utilisateur avec des composants Web Polaris et Preact.
  5. Exécuter shopify app dev pour prévisualiser par rapport à une commande réelle sur votre magasin de développement.
  6. Exécuter shopify app deploy pour publier une nouvelle version de l'application, puis ajouter le bloc dans l'éditeur de commande.

Voici la configuration pour une option de wrapping de cadeau. Elle s'affiche dans une cible de bloc et expose un paramètre marchand pour l'étiquette de case à cocher :

api_version = "2026-10"

[[extensions]]
name = "Gift wrap option"
handle = "gift-wrap-option"
type = "ui_extension"

  [extensions.capabilities]
  api_access = true
  network_access = false
  block_progress = false

  [[extensions.targeting]]
  module = "./src/Checkout.jsx"
  target = "purchase.checkout.block.render"

[settings]
  [[settings.fields]]
  key = "label_text"
  type = "single_line_text_field"
  name = "Checkbox label"

Et voici l'extension elle-même, enregistrée sous la forme src/Checkout.jsx. Il vérifie que le paiement actuel autorise les changements d’attributs, enregistre le choix comme attribut du panier que le marchand voit sur la commande, et affiche une erreur conviviale si l’enregistrement échoue :

import '@shopify/ui-extensions/preact';
import { render } from 'preact';
import { useState } from 'preact/hooks';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  const [error, setError] = useState('');
  const label = shopify.settings.value.label_text || 'Gift wrap this order';

  if (!shopify.instructions.value.attributes.canUpdateAttributes) {
    return null;
  }

  async function onCheckboxChange(event) {
    const isChecked = event.target.checked;
    const result = await shopify.applyAttributeChange({
      type: 'updateAttribute',
      key: 'gift_wrap',
      value: isChecked ? 'yes' : 'no',
    });
    if (result.type === 'error') {
      setError('We could not save your gift wrap choice. Please try again.');
      return;
    }
    setError('');
  }

  return (
    <s-stack gap="base">
      <s-checkbox label={label} onChange={onCheckboxChange} />
      {error && <s-banner tone="critical">{error}</s-banner>}
    </s-stack>
  );
}

Le shopify.instructions vérifiez les faits. Certaines commandes, telles que les commandes de brouillon, n'autorisent pas certaines modifications de panier, et votre extension devrait discrètement se retirer au lieu de lancer une erreur auprès de l'acheteur.

Liste de vérification des tests

  • Les cibles statiques se rendent automatiquement dans leur emplacement fixe pendant que shopify app dev s'exécute.
  • Les cibles de bloc peuvent être prévisualisées à un endroit spécifique avec une référence de placement dans l'URL de processus de paiement, telle que WALLETS1. Shopify's guide de test les liste tous.
  • Dans Paramètres, Checkout, Personnaliser, ajoutez le bloc d’application et déplacez‑le entre les emplacements.
  • Testez à la fois les mises en page à une page et à trois pages, car les commerçants peuvent basculer.
  • Passez des commandes de test complètes, y compris Shop Pay, avec des paiements en mode test.

Fonctions Shopify, web pixels et branding

Les extensions de l'interface utilisateur ne sont qu'une partie de l'extensibilité du checkout Shopify. La plupart de ce que les scripts Shopify faisaient auparavant appartient désormais à Fonctions Shopify, qui s’exécutent sur les serveurs de Shopify lorsque le paiement les appelle. Ils sont écrits dans n’importe quel langage compilable en WebAssembly, avec des modèles Rust et JavaScript fournis ; Shopify recommande Rust pour les paniers volumineux.

Ancien script ShopifyRemplacement de fonction
Scripts d'articles de ligne (à plusieurs niveaux, bundle et remises pour les clients)Fonctions de réduction
Scripts de livraison (masquer, renommer, réorganiser les tarifs)Fonctions de personnalisation de la livraison
Scripts de paiement (masquer ou réorganiser les méthodes)Fonctions de personnalisation des paiements
Limites de quantité et régions bloquéesFonctions de validation du panier et de la commande
Bundles créés avec des astuces d'articles de ligneFonctions de transformation du panier

Pixels Web remplace le suivi qui vivait autrefois dans des scripts supplémentaires. Les pixels d'applications s'exécutent dans un sandbox Web Worker strict, tandis que les pixels personnalisés ajoutés par les commerçants s'exécutent dans un sandbox iframe plus lâche qui ne peut toujours pas atteindre la page principale. Les deux respectent le consentement du client. Un pixel d'application minimal qui signale les commandes terminées ressemble à ceci :

import { register } from '@shopify/web-pixels-extension';

register(({ analytics }) => {
  analytics.subscribe('checkout_completed', (event) => {
    const checkout = event.data && event.data.checkout;
    if (!checkout) {
      return;
    }
    fetch('https://analytics.example.com/collect', {
      method: 'POST',
      keepalive: true,
      body: JSON.stringify({
        orderId: checkout.order ? checkout.order.id : null,
        total: checkout.totalPrice ? checkout.totalPrice.amount : null,
        currency: checkout.currencyCode,
      }),
    });
  });
});

Marquage couvre les couleurs, la typographie, les logos et la mise en style des sections. Chaque plan bénéficie des contrôles de base dans l'éditeur de commande. Les magasins Plus et les magasins de développement peuvent aller plus loin via l'API GraphQL Admin. Notez que dans la version d'API 2026-10, Shopify marque checkoutBrandingUpsert comme obsolète au profit de checkoutAndAccountsConfigurationUpdate, de sorte que le nouveau code de marque doit cibler la mutation plus récente.

Extensibilité de la commande pour les commerçants

Si vous gérez un magasin et n'écrivez pas de code, voici ce que vous devez réellement faire maintenant :

  • Ouvert Paramètres, Checkout et confirmez que votre commande, Merci et Statut de commande sont sur la nouvelle version.
  • Lisez la zone de scripts supplémentaires en mode lecture seule et listez chaque outil qui dépendait auparavant de celle-ci.
  • Réinstaller ou mettre à jour ces applications afin qu'elles utilisent des pixels d'application ou des blocs d'application, et confirmez dans le tableau de bord de chaque outil que les commandes sont toujours enregistrées.
  • Si vous avez compté sur Shopify Scripts pour les remises ou les règles d'expédition, vérifiez que chaque règle existe maintenant en tant qu'application ou fonction personnalisée. Un panier qui devrait déclencher la règle et un panier qui ne devrait pas sont le test le plus rapide.
  • Utilisez l'éditeur de commande pour ajouter des badges de confiance, des notes de commande, des ventes incrémentales ou des enquêtes à partir d'applications installées, puis prévisualisez sur mobile, où la plupart des commandes ont lieu.

La plupart des magasins peuvent terminer cela avec des applications existantes. Le travail personnalisé ne vaut la peine que pour une logique unique, telle que les règles de gros, les champs B2B ou les liens de fidélité.

Extensibilité de la commande pour les développeurs

Si vous créez pour Shopify, le modèle mental est différent de celui du travail de thème :

  • Les extensions s'exécutent dans un Web Worker sans window ou DOM. Les bibliothèques qui touchent à l'un ou l'autre échoueront.
  • Chaque appel à votre backend n'est pas de confiance. Authentifiez-le avec un jeton de session de shopify.sessionToken et vérifiez à nouveau les prix et l'éligibilité sur le serveur.
  • Épinglez un api_version et mettez à niveau selon un calendrier. Shopify publie une nouvelle version chaque trimestre, et les derniers documents supposent Preact et des composants Web.
  • Les applications publiques qui incluent des appels réseau ont besoin network_access dans le TOML et l'approbation pour l'accès au réseau dans le tableau de bord Partenaire. Votre serveur doit également répondre aux demandes CORS.
  • Les applications publiques qui accèdent à des données protégées sont désormais soumises à des règles de plateforme plus strictes. Mon article sur le Exigence de liste blanche d'adresses IP Shopify pour les applications publiques couvre un changement récent.

Lorsqu'un projet nécessite un backend personnalisé, un tableau de bord d'administration ou une intégration autour de l'extension, cela relève de ma responsabilité désveloppement web personnalisé travail

Erreurs courantes d'extensibilité de la commande

Poids en laiton insérés dans un boîtier en bois, comme un bundle d'extensions avec une limite de taille
Sandboxé, limité en taille et sûr par conception. Photo : Collections du musée d'Auckland, CC BY 2.0
  • En supposant que l'extension apparaît automatiquement. Déployer ne fait que rendre le bloc disponible. Un commerçant doit encore l'ajouter dans l'éditeur de commande, ce qui provoque de nombreux tickets "ça fonctionne sur mon magasin".
  • Faire exploser le budget de 64 Ko. Les bibliothèques de dates, les packs d'icônes et les SDK d'analyse s'accumulent rapidement. N'importez que ce dont vous avez besoin et surveillez la taille du bundle.
  • Copier d'anciens tutoriels. Code qui importe @shopify/checkout-ui-extensions-react ou utilise des crochets React comme useApplyAttributeChange appartient à des versions d'API plus anciennes. Commencez un nouveau travail sur @shopify/ui-extensions avec Preact.
  • En utilisant block_progress négligemment. Cette fonctionnalité permet à une extension d'arrêter l'acheteur de continuer. Utilisez-la uniquement pour une validation réelle et expliquez toujours pourquoi.
  • Oubli du suivi après une mise à niveau automatique. Les revenus peuvent sembler avoir baissé lorsque seul le tag a cessé de déclencher. Comparez les commandes dans Shopify à celles de vos plateformes publicitaires.
  • Reconstruction d'un script en tant qu'extension UI. Les réductions et les règles d'expédition appartiennent aux fonctions du serveur, et non au code côté client qu'un acheteur peut modifier.
  • Test de seulement une mise en page ou un marché. Les checkouts à une page et à trois pages, les devises différentes et les méthodes de paiement différentes se comportent tous différemment.

La vitesse de la commande est tout aussi importante que les fonctionnalités, c'est pourquoi elle fait partie de mon Liste de vérification d'optimisation de la vitesse Shopify. Si vous aviez un suivi sur les anciennes pages, mon guide pour migration des pixels après la dépréciation de la balise script va plus loin, et si vous vendez via des assistants IA, voir Commerce agence sur Shopify.

Foire aux questions

Qu'est-ce que Shopify checkout extensibility ?

Shopify checkout extensibility est le système basé sur des applications de Shopify pour personnaliser le checkout. Il utilise des extensions d'interface de checkout pour les modifications d'interface, Shopify Functions pour la logique métier, des pixels web pour le suivi et les paramètres de branding pour la conception. Il a remplacé checkout.liquid, les scripts supplémentaires, les balises de script et Shopify Scripts, qui ont tous été retirés.

Quelle était la date limite pour l'extensibilité de checkout ?

Il y en avait plusieurs. Les magasins Plus ont perdu checkout.liquid sur les étapes d'information, d'expédition et de paiement le 13 août 2024 et sur les pages de remerciement et de statut de commande le 28 août 2025. Shopify Scripts ont cessé de fonctionner le 30 juin 2026. Les magasins non Plus ont dû mettre à niveau leurs pages de remerciement et de statut de commande avant le 26 août 2026.

checkout.liquid est-il obsolète ?

Oui. Les documents de Shopify indiquent que checkout.liquid n'est pas pris en charge sur les étapes d'information, d'expédition et de paiement et a été abandonné sur les pages de remerciement et de statut de commande le 28 août 2025. Il n'y a aucun moyen de le réactiver en 2026, de sorte que toute personnalisation restante doit être reconstruite avec l'extensibilité de checkout.

Que sont les extensions d'interface utilisateur de checkout Shopify ?

Les extensions de l'interface de commande sont de petites applications sandboxées qui ajoutent des éléments d'interface, tels que des champs, des bannières ou des offres, à des cibles définies dans la commande, la page de remerciement et la page de statut de commande. Depuis la version de l'API 2025-10, elles sont créées avec des composants Web Preact et Polaris en utilisant @shopify/ui-extensions paquet, avec une limite de bundle de 64 Ko.

@shopify/checkout-ui-extensions-react est-il encore utilisé ?

Non. C'était le package d'origine de 2022 à 2023 et a été publié pour la dernière fois en août 2023. Il a été suivi par @shopify/ui-extensions-react, dont la dernière version cible la version d’API 2025‑07, puis par @shopify/ui-extensions avec Preact, qui est ce que les documents actuels de Shopify utilisent.

Les magasins non Plus peuvent-ils utiliser les extensions de paiement ?

Oui, sur les pages de remerciement et de statut de commande. Les magasins non Plus peuvent également utiliser des applications publiques qui contiennent Shopify Functions, des pixels d'applications et un branding de checkout de base. Les extensions d'interface sur les étapes d'information, d'expédition et de paiement, des applications personnalisées avec Functions et un branding basé sur API nécessitent Shopify Plus.

Que sont les applications d'extensibilité de checkout ?

Ce sont des applications du Shopify App Store construites sur l'extensibilité de checkout, telles que des applications pour des enquêtes post-achat, des dates de livraison, des options de cadeau, des offres promotionnelles, des programmes de fidélité et des remises à paliers. Recherchez des applications qui mentionnent des extensions d'interface utilisateur de checkout, des fonctions Shopify ou des pixels d'application, et évitez celles qui vous demandent encore de copier du code dans des scripts supplémentaires.

Que se passe-t-il si mon magasin n'a pas été mis à niveau ?

Les anciennes personnalisations cessent de s'exécuter. Les modifications de checkout.liquid, les scripts supplémentaires, les tags de script de page de remerciement et les scripts Shopify n'exécutent plus, et les pages passent aux versions standard de Shopify. Vérifiez Paramètres, Checkout pour confirmer la version de chaque page, puis reconstruire ce que vous avez perdu avec des applications, des extensions, des fonctions ou des pixels.

Étapes suivantes

Audit de votre processus de paiement, confirmation que le suivi est toujours actif et déplacement de toute logique perdue dans des fonctions ou des applications. Pour un exemple du travail Shopify Plus que je fais, voir le Étude de cas Real Mad Honey, ou parcourez davantage Études de cas Shopify et WordPress. Besoin d’une extension de paiement construite ou migrée vers Preact ? Envoyez-moi les détails via mon formulaire de contact.

Sources

Lecture connexe