—

meta_title: « Shopify CLI : Développement d’apps et thèmes custom en 2026 | Guide complet »

meta_description: « Maîtrisez Shopify CLI en 2026 : installation, développement de thèmes Shopify 2.0, création d’apps avec Remix, GraphQL Admin API, webhooks et déploiement automatisé. »

—

Il existe un moment précis dans la vie de toute boutique Shopify en croissance où les thèmes du marketplace et les apps de l’App Store ne suffisent plus. Ce moment arrive souvent plus tôt qu’on ne le pense : quand le client veut un comportement de checkout spécifique que l’app existante ne peut pas reproduire exactement, quand l’intégration ERP doit être bidirectionnelle en temps réel et que les webhooks natifs ne couvrent pas tous les scénarios, quand la logique de personnalisation produit est trop complexe pour être gérée par un configurateur générique.

C’est là que Shopify CLI entre en scène. Pas comme un outil anecdotique pour les développeurs curieux, mais comme l’épine dorsale du développement Shopify professionnel en 2026. Avec l’écosystème Shopify qui a considérablement maturé ces deux dernières années — Shopify 2.0 maintenant universellement adopté, l’API GraphQL Admin devenue la référence, les Checkout Extensions désormais en GA — Shopify CLI est devenu l’outil incontournable pour quiconque veut développer sur Shopify sérieusement.

Dans ce guide, nous allons parcourir l’ensemble du workflow de développement Shopify en 2026 : installation et configuration de l’environnement, développement de thèmes avec la puissance des sections et des templates JSON, création d’apps Shopify avec Remix, utilisation de l’API GraphQL, gestion des webhooks, et déploiement automatisé via GitHub. À l’issue de cet article, vous aurez une vision complète et opérationnelle du développement Shopify professionnel.

—

Shopify CLI en 2026 : ce que c’est vraiment et pourquoi ça compte

De l’outil basique à l’environnement de développement complet

Shopify CLI a été lancé en 2019 comme un utilitaire en ligne de commande relativement basique — il permettait principalement de gérer les thèmes (upload, download, preview). En 2026, c’est une infrastructure de développement complète.

La version actuelle de Shopify CLI unifie sous un même outil ce qui était auparavant dispersé entre plusieurs utilities : le développement de thèmes, la création et la gestion d’apps, l’interaction avec l’API Admin, et la gestion des environnements (development stores, staging, production). Cette unification n’est pas qu’une question de commodité — elle reflète une philosophie de Shopify sur ce que doit être le workflow d’un développeur professionnel sur sa plateforme.

La puissance de Shopify CLI en 2026 vient de sa capacité à créer des environnements de développement isolés, à synchroniser les changements en temps réel pendant le développement, et à automatiser les déploiements. Finies les journées passées à uploader manuellement des fichiers via Shopify Admin — le workflow moderne est entièrement géré par CLI, avec hot reload et synchronisation automatique.

Pourquoi Shopify 2.0 a tout changé

Shopify 2.0, lancé en 2021 et maintenant universel, a transformé l’architecture des thèmes. Avant Shopify 2.0, les thèmes étaient monolithiques : chaque page était définie par un fichier Liquid unique, difficile à personnaliser sans toucher au code. Avec Shopify 2.0, les pages sont construites à partir de sections et blocs configurables directement dans l’éditeur de thème — sans code pour le marchand, avec une flexibilité totale pour le développeur.

Cette architecture a également introduit les templates JSON — des fichiers de configuration qui définissent quelles sections apparaissent sur quelle page et dans quel ordre. Un template JSON de page produit peut ainsi définir une disposition complètement différente selon le type de produit, avec des sections conditionnelles, des blocs d’avis clients, des sections de produits recommandés — le tout configurable par le marchand sans développement additionnel.

Pour le développeur, Shopify 2.0 signifie écrire des composants réutilisables et configurables plutôt que des mises en page rigides. Pour le marchand, cela signifie une autonomie de personnalisation sans dépendance permanente au développeur. C’est cette combinaison qui rend l’écosystème Shopify 2.0 si puissant — et Shopify CLI est l’outil qui permet de l’exploiter pleinement.

—

Installation et configuration de l’environnement de développement

Prérequis et installation de Shopify CLI

L’installation de Shopify CLI requiert Node.js version 18 ou supérieure — un point souvent source de problèmes pour les développeurs qui travaillent sur plusieurs projets avec différentes versions de Node. L’usage de nvm (Node Version Manager) est fortement recommandé pour gérer les versions de Node.js proprement.

« `bash

# Installer nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# Installer et utiliser Node 20 (LTS recommandé en 2026)

nvm install 20

nvm use 20

# Installer Shopify CLI globalement

npm install -g @shopify/cli @shopify/theme

# Vérifier l’installation

shopify version

« `

Une fois installé, Shopify CLI vous demandera de vous authentifier avec votre compte Shopify Partner lors de la première utilisation. Cette authentification se fait via OAuth dans le navigateur — vous serez redirigé vers l’interface Partners, vous accepterez les permissions, et CLI stockera le token d’accès localement pour les sessions suivantes.

Créer un Development Store

Un Development Store est un environnement Shopify gratuit rattaché à votre compte Partner, conçu spécifiquement pour le développement et les tests. Vous pouvez en créer autant que nécessaire — c’est l’environnement dans lequel vous développerez vos thèmes et apps avant de les déployer sur une boutique réelle.

« `bash

# Lister vos stores existants

shopify store list

# Créer un nouveau development store

shopify store create –type development –name « mon-projet-2026 »

« `

Un Development Store dispose de toutes les fonctionnalités d’une boutique Shopify normale — y compris le mode test du paiement qui permet de simuler des transactions sans argent réel. Pour le développement de thèmes, vous pouvez y importer des données de test (produits, collections, clients) via la commande `shopify store populate`.

En 2026, chez l’Agence DYNSEO, nous maintenons systématiquement un Development Store par projet client — avec les données de production anonymisées pour des tests réalistes, et une configuration d’intégration continue qui déploie automatiquement les changements validés vers la boutique de staging puis de production.

—

Développement de thèmes Shopify 2.0 avec CLI

Initialiser un thème et démarrer le serveur de développement

Shopify CLI propose deux points de départ pour un nouveau thème : partir du thème officiel Dawn (la référence open source de Shopify) ou cloner un thème existant depuis une boutique.

« `bash

# Initialiser un thème basé sur Dawn

shopify theme init mon-theme

# Ou démarrer en travaillant sur le thème live d’une boutique

shopify theme dev –store mon-store.myshopify.com

« `

La commande `shopify theme dev` est la plus utilisée au quotidien. Elle démarre un serveur de développement local qui synchronise automatiquement vos fichiers locaux avec le Development Store en temps réel. Chaque modification d’un fichier Liquid, CSS ou JavaScript déclenche immédiatement une synchronisation — le résultat est visible dans le navigateur après un simple rafraîchissement, sans avoir à re-uploader manuellement.

En 2026, cette commande intègre également un hot reload partiel : les modifications de CSS sont appliquées sans rechargement complet de la page, ce qui accélère considérablement le cycle de développement front-end.

Architecture d’un thème Shopify 2.0 : sections, blocs et templates

La structure de fichiers d’un thème Shopify 2.0 est organisée selon une hiérarchie claire :

« `

├── assets/ # CSS, JS, images

├── config/ # settings_schema.json, settings_data.json

├── layout/ # theme.liquid (layout principal)

├── locales/ # Fichiers de traduction

├── sections/ # Composants réutilisables (.liquid)

├── snippets/ # Fragments Liquid réutilisables

└── templates/ # Définition des pages (.json ou .liquid)

« `

La clé du développement Shopify 2.0 est la compréhension du modèle section > bloc. Une section est un composant indépendant (par exemple, un carrousel de produits, une section hero, un bloc de témoignages) avec ses propres paramètres configurables via le `{% schema %}` Liquid. Un bloc est une sous-unité d’une section, répétable et réorganisable par le marchand dans l’éditeur de thème.

Voici un exemple concret de section Shopify 2.0 pour une bannière hero configurable :

« `liquid

{% comment %} sections/hero-banner.liquid {% endcomment %}

{% schema %}

{

« name »: « Hero Banner »,

« settings »: [

{« type »: « text », « id »: « heading », « label »: « Titre », « default »: « Bienvenue »},

{« type »: « text », « id »: « subheading », « label »: « Sous-titre »},

{« type »: « color », « id »: « background_color », « label »: « Couleur de fond », « default »: « #ffffff »},

{« type »: « text », « id »: « button_label », « label »: « Texte du bouton »},

{« type »: « url », « id »: « button_url », « label »: « Lien du bouton »}

],

« presets »: [{« name »: « Hero Banner »}]

}

{% endschema %}

« `

Cette section apparaît dans l’éditeur de thème Shopify avec une interface de configuration graphique — le marchand peut modifier le titre, la couleur de fond et le bouton directement sans toucher une ligne de code.

Les metafields : étendre les données produit sans app tierce

Les metafields permettent d’ajouter des données personnalisées aux objets Shopify (produits, collections, clients, commandes) — des données que le schéma standard de Shopify ne couvre pas. En 2026, les metafields sont devenus un outil fondamental du développement de thèmes avancés.

Exemples concrets d’utilisation des metafields : afficher les ingrédients d’un produit alimentaire, stocker les dimensions techniques d’un produit industriel, afficher un certificat ou une attestation spécifique à chaque produit, gérer des tableaux de tailles personnalisés pour un site de mode.

Via Shopify CLI, les metafields peuvent être définis programmatiquement via l’API Admin et référencés directement dans les templates JSON pour être exposés dans l’éditeur de thème. Cette combinaison — metafields définis via API, exposés via template JSON, configurables dans l’éditeur — offre une flexibilité considérable sans nécessiter de développement front-end additionnel pour chaque variation.

—

Développement d’apps Shopify avec Remix et la CLI

L’architecture des apps Shopify en 2026

Les apps Shopify sont des applications tierces qui s’intègrent à l’écosystème Shopify via des APIs et des extensions. En 2026, le framework officiel recommandé par Shopify pour développer des apps est Remix — un framework React full-stack qui gère à la fois le front-end de l’app et les routes serveur qui interagissent avec l’API Shopify.

Cette recommandation de Shopify pour Remix n’est pas anodine. Remix gère nativement les patterns que les apps Shopify requièrent : le server-side rendering (critique pour la performance et le SEO des pages d’admin), la gestion des sessions OAuth (nécessaire pour l’authentification), et le routing qui correspond bien à la structure des apps Shopify (embedded app, standalone, pos extensions…).

« `bash

# Créer une nouvelle app Shopify avec Remix

shopify app create –name mon-app-2026

# Démarrer le serveur de développement

cd mon-app-2026

shopify app dev

« `

La commande `shopify app dev` fait beaucoup plus que démarrer un serveur local. Elle configure automatiquement un tunnel ngrok pour exposer votre app locale à Internet (nécessaire pour le callback OAuth), enregistre l’app dans votre Partner Dashboard si ce n’est pas déjà fait, et installe l’app sur votre Development Store pour les tests immédiats.

OAuth et authentification : le flow standard Shopify

L’authentification des apps Shopify utilise OAuth 2.0. Le flow est standard mais présente des spécificités Shopify importantes. Quand un marchand installe votre app depuis l’App Store, il est redirigé vers votre URL d’auth, Shopify demande les scopes d’accès nécessaires, le marchand accepte, et Shopify redirige vers votre callback URL avec un code d’autorisation que vous échangez contre un access token permanent.

Le template Remix fourni par Shopify CLI gère ce flow automatiquement — le fichier `app/routes/auth.jsx` contient le handler OAuth pré-configuré. Ce que vous devez configurer : les scopes dont votre app a besoin (lecture/écriture des produits, des commandes, des clients…) dans le fichier `shopify.app.toml`.

« `toml

# shopify.app.toml

[scopes]

read_products = true

write_products = true

read_orders = true

write_draft_orders = true

read_customers = false # Uniquement si nécessaire — minimisez les scopes

« `

Le principe de moindre privilège s’applique particulièrement aux apps Shopify : ne demandez que les scopes dont vous avez réellement besoin. Des scopes trop larges ralentissent le processus de validation sur l’App Store et inquiètent légitimement les marchands.

Les App Extensions : étendre l’interface Shopify

En 2026, les App Extensions sont le mécanisme qui permet aux apps d’étendre l’interface Shopify plutôt que de la remplacer. C’est une évolution fondamentale par rapport aux apps de la génération précédente qui s’intégraient via des iframes dans l’admin.

Les principales extensions disponibles :

Checkout Extensions : permettent d’ajouter des composants personnalisés au checkout Shopify — blocs d’upsell, champs personnalisés, calculs de frais de livraison dynamiques. En 2026, elles sont en GA et représentent le seul moyen approuvé par Shopify de modifier le checkout (les hacks CSS/JS sur le checkout ne sont plus supportés sur les plans non-Shopify Plus).
Admin Extensions : permettent d’ajouter des pages ou des composants dans l’administration Shopify — directement dans la page produit, dans la page commande, ou comme onglet additionnel dans l’admin.
Web Pixels : extension pour envoyer des événements de tracking personnalisés depuis le checkout — utile pour les analyses avancées ou les intégrations de tracking tiers.

« `bash

# Créer une Checkout Extension

shopify app extension create –type checkout_ui_extension –name mon-upsell-checkout

« `

Le développement d’une Checkout Extension utilise Shopify’s UI Extensions framework — une bibliothèque de composants React conçue spécifiquement pour le checkout Shopify, avec accès à des APIs contextuelles (panier, produit, client, localisation).

—

L’API GraphQL Admin : requêtes, mutations et bonnes pratiques

Pourquoi GraphQL plutôt que REST

Shopify a progressivement déprécié son API REST au profit de l’API GraphQL Admin. En 2026, l’API REST est toujours fonctionnelle mais en maintenance — les nouvelles fonctionnalités (metafields avancés, nouvelles ressources, mises à jour de données en bulk) sont exclusivement disponibles via GraphQL.

GraphQL offre plusieurs avantages structurels sur REST pour les apps Shopify. D’abord, la précision des requêtes : au lieu de récupérer un objet produit complet avec 50 champs dont vous n’utilisez que 5, vous spécifiez exactement les champs dont vous avez besoin. Résultat : des réponses plus légères, des temps de réponse plus rapides, et une consommation de quota API plus économe.

Ensuite, la capacité à combiner plusieurs requêtes en une seule : là où une intégration REST nécessitait parfois 3 à 5 requêtes successives pour construire une vue complète (produit + variantes + métadonnées + avis), une requête GraphQL unique récupère tout en un seul aller-retour réseau.

« `graphql

# Exemple : Récupérer produits avec variantes et metafields en une requête

query GetProductsWithVariants($first: Int!) {

products(first: $first) {

edges {

node {

id

title

handle

variants(first: 10) {

edges {

node {

id

title

price

inventoryQuantity

}

}

}

metafield(namespace: « custom », key: « materials ») {

value

}

}

}

}

}

« `

Les mutations : modifier des données via GraphQL

Les mutations GraphQL sont l’équivalent des requêtes POST/PUT/DELETE de REST. En 2026, toutes les opérations d’écriture importantes dans Shopify passent par des mutations — création de produits, mise à jour d’inventaire, création de commandes draft, modification de metafields.

« `graphql

# Mutation : Créer un produit

mutation CreateProduct($input: ProductInput!) {

productCreate(input: $input) {

product {

id

title

handle

}

userErrors {

field

message

}

}

}

« `

Un pattern important des mutations Shopify : le champ `userErrors` dans la réponse. Shopify distingue les erreurs système (retournées en HTTP 4xx ou 5xx) des erreurs métier (retournées en HTTP 200 avec un champ `userErrors` rempli). Toujours vérifier `userErrors` dans la réponse d’une mutation — ignorer ce champ est une source fréquente de bugs difficiles à diagnostiquer.

Rate limiting et gestion des quotas

L’API GraphQL Shopify utilise un système de « buckets » pour le rate limiting, différent du simple comptage de requêtes de l’API REST. Chaque requête GraphQL consomme un nombre de « points » proportionnel à la complexité de la requête — une requête qui récupère 250 produits avec leurs variantes consomme beaucoup plus de points qu’une requête qui récupère un seul produit.

En pratique, la bonne gestion du rate limiting en 2026 passe par trois mécanismes : la vérification du header `X-Shopify-Shop-Api-Call-Limit` dans chaque réponse pour connaître le niveau de remplissage du bucket, l’implémentation d’un retry avec backoff exponentiel quand une erreur 429 est retournée, et l’utilisation des Bulk Operations pour les opérations sur de grands volumes de données.

« `javascript

// Gestion du rate limiting avec retry

async function shopifyGraphQL(query, variables, retries = 3) {

try {

const response = await fetch(`https://${SHOP}.myshopify.com/admin/api/2026-01/graphql.json`, {

method: ‘POST’,

headers: {

‘X-Shopify-Access-Token’: ACCESS_TOKEN,

‘Content-Type’: ‘application/json’

},

body: JSON.stringify({ query, variables })

});

if (response.status === 429 && retries > 0) {

await new Promise(r => setTimeout(r, 2000)); // Attendre 2s

return shopifyGraphQL(query, variables, retries – 1);

}

return response.json();

} catch (error) {

throw error;

}

}

« `

—

Webhooks : réagir aux événements Shopify en temps réel

Comprendre les webhooks Shopify

Les webhooks sont des notifications HTTP que Shopify envoie à votre app quand des événements se produisent dans la boutique — une commande est créée, un produit est mis à jour, un paiement est remboursé. Ils permettent à votre app de réagir en temps réel plutôt que de devoir interroger régulièrement l’API (polling).

En 2026, Shopify propose deux types de webhooks : les webhooks HTTP classiques (Shopify envoie un POST à votre URL) et les Event Bridge webhooks (Shopify envoie les événements via AWS EventBridge ou Google Cloud Pub/Sub). Pour la grande majorité des apps, les webhooks HTTP classiques sont suffisants et plus simples à implémenter.

« `javascript

// Enregistrement d’un webhook via GraphQL

const CREATE_WEBHOOK = `

mutation webhookSubscriptionCreate($topic: WebhookSubscriptionTopic!, $webhookSubscription: WebhookSubscriptionInput!) {

webhookSubscriptionCreate(topic: $topic, webhookSubscription: $webhookSubscription) {

webhookSubscription {

id

topic

endpoint {

… on WebhookHttpEndpoint {

callbackUrl

}

}

}

userErrors { field message }

}

}

`;

await shopifyGraphQL(CREATE_WEBHOOK, {

topic: ‘ORDERS_CREATE’,

webhookSubscription: {

callbackUrl: ‘https://mon-app.com/webhooks/orders-create’,

format: ‘JSON’

}

});

« `

Vérifier les webhooks Shopify

Un point de sécurité critique : toujours vérifier que les webhooks reçus proviennent bien de Shopify. Shopify signe chaque webhook avec un HMAC-SHA256 en utilisant votre secret d’app. Votre endpoint doit vérifier cette signature avant de traiter le payload.

« `javascript

import crypto from ‘crypto’;

function verifyShopifyWebhook(body, hmacHeader, secret) {

const hash = crypto

.createHmac(‘sha256’, secret)

.update(body, ‘utf8’)

.digest(‘base64’);

return crypto.timingSafeEqual(

Buffer.from(hash),

Buffer.from(hmacHeader)

);

}

// Dans votre handler Express

app.post(‘/webhooks/orders-create’, (req, res) => {

const isValid = verifyShopifyWebhook(

req.body,

req.headers[‘x-shopify-hmac-sha256’],

process.env.SHOPIFY_WEBHOOK_SECRET

);

if (!isValid) {

return res.status(401).send(‘Unauthorized’);

}

// Traiter le webhook

const order = JSON.parse(req.body);

// … logique métier

res.status(200).send(‘OK’);

});

« `

—

Déploiement et intégration continue avec GitHub

Configurer le déploiement automatique des thèmes

Shopify CLI s’intègre nativement avec GitHub pour le déploiement automatique des thèmes. Via la GitHub Integration disponible dans l’admin Shopify, vous pouvez configurer un déploiement automatique qui se déclenche à chaque push sur la branche de production.

La configuration recommandée pour une boutique en production est la suivante : une branche `develop` pour le développement actif, une branche `staging` qui se déploie automatiquement sur le thème de preview de la boutique, et une branche `main` qui déclenche le déploiement sur le thème live. Ce workflow permet de tester les changements dans un environnement identique à la production avant de les mettre en ligne.

« `yaml

# .github/workflows/deploy-shopify-theme.yml

name: Deploy to Shopify

on:

push:

branches: [main]

jobs:

deploy:

runs-on: ubuntu-latest

steps:

– uses: actions/checkout@v3

– uses: actions/setup-node@v3

with:

node-version: ’20’

– run: npm install -g @shopify/cli @shopify/theme

– run: shopify theme push –store ${{ secrets.SHOPIFY_STORE }} –theme ${{ secrets.SHOPIFY_THEME_ID }}

env:

SHOPIFY_CLI_THEME_TOKEN: ${{ secrets.SHOPIFY_THEME_TOKEN }}

« `

Les apps Shopify en production : déploiement et monitoring

Pour les apps Shopify, le déploiement en production diffère du déploiement de thèmes — une app est une application web autonome qui doit être hébergée sur une infrastructure accessible 24h/24. Les options en 2026 sont nombreuses : Vercel et Railway pour les déploiements simples, Fly.io pour les workloads qui nécessitent de la persistance, AWS/GCP pour les apps à fort volume.

Chez l’Agence DYNSEO, nos apps Shopify en production sont déployées via des pipelines CI/CD GitHub Actions qui exécutent automatiquement les tests, construisent l’application, et la déploient sur l’infrastructure cible — avec un rollback automatique si des métriques d’erreur dépassent un seuil défini. Cette rigueur opérationnelle est ce qui distingue un développement professionnel d’un projet artisanal.

—

Cas d’usage avancés : Checkout Extensions et intégrations ERP

Développer une Checkout Extension d’upsell

Un cas d’usage concret et rentable des Checkout Extensions : un bloc d’upsell dans le checkout qui propose un produit complémentaire au panier actuel, avec un bouton « Ajouter au panier » sans quitter le checkout. Ce type d’extension génère typiquement une augmentation de 5 à 15% de la valeur moyenne des commandes.

« `javascript

// extensions/checkout-upsell/src/Checkout.jsx

import {

useCartLines,

useApplyCartLinesChange,

Button,

ProductThumbnail,

Text,

BlockStack,

InlineLayout,

} from ‘@shopify/ui-extensions-react/checkout’;

export function UpsellBlock() {

const cartLines = useCartLines();

const applyCartLinesChange = useApplyCartLinesChange();

// Logique pour déterminer le produit à suggérer

const suggestedProduct = determineSuggestedProduct(cartLines);

if (!suggestedProduct) return null;

return (

Souvent acheté ensemble :

{suggestedProduct.title} — {suggestedProduct.price}

onPress={() => applyCartLinesChange({

type: ‘addCartLine’,

merchandiseId: suggestedProduct.variantId,

quantity: 1

})}

>

Ajouter

);

}

« `

Intégration ERP via API Shopify et webhooks

L’un des développements les plus complexes et les plus valeureux pour les boutiques Shopify B2B ou à fort volume est l’intégration avec un ERP (SAP, Sage, Cegid, Odoo…). Cette intégration repose typiquement sur la combinaison de webhooks (Shopify → ERP pour les nouvelles commandes) et d’appels API Shopify planifiés (ERP → Shopify pour les mises à jour d’inventaire).

Le flux standard est le suivant : quand une commande est créée dans Shopify, un webhook `ORDERS_CREATE` notifie un middleware (une app ou un service dédié) qui transforme la commande au format attendu par l’ERP et la transmet. Quand l’ERP met à jour le statut de la commande ou l’inventaire, le middleware appelle l’API Shopify pour refléter les changements.

Ce type d’intégration, développée et maintenue par l’Agence DYNSEO, permet à des boutiques Shopify avec des milliers de références et des processus logistiques complexes de fonctionner de façon fluide — sans double saisie, sans désynchronisation d’inventaire, sans erreurs de stock.

—

Conclusion : Shopify CLI, le fondement du développement Shopify professionnel en 2026

Shopify CLI n’est plus un outil optionnel pour les développeurs qui travaillent sur Shopify en 2026. C’est le socle sur lequel repose tout le workflow de développement professionnel : thèmes Shopify 2.0 avec sections et metafields, apps Remix avec OAuth et API GraphQL, Checkout Extensions pour enrichir l’expérience d’achat, webhooks pour les intégrations temps réel, et pipelines CI/CD pour des déploiements fiables.

La courbe d’apprentissage est réelle — mais elle est aussi l’investissement qui sépare les boutiques Shopify ordinaires des boutiques qui peuvent se permettre de tout personnaliser, d’intégrer n’importe quel système tiers, et de délivrer une expérience d’achat qui correspond exactement à la vision du marchand.

Si votre boutique a des besoins de développement Shopify que les apps standard ne couvrent pas — des personnalisations de checkout, une intégration ERP complexe, un thème entièrement sur mesure — l’équipe de l’Agence DYNSEO est spécialisée dans ces développements avancés. Commencez par demander votre maquette gratuite pour visualiser ce que votre boutique pourrait devenir.

—

Optimiser les performances des thèmes : vitesse et Core Web Vitals

Pourquoi la performance d’un thème Shopify est critique en 2026

En 2026, Google intègre les Core Web Vitals comme signal de classement significatif — et Shopify n’échappe pas à cette réalité. Un thème lent, avec un LCP (Largest Contentful Paint) supérieur à 2,5 secondes ou un CLS (Cumulative Layout Shift) élevé, pénalise non seulement l’expérience utilisateur mais aussi le référencement naturel de la boutique. Pour un site e-commerce, chaque seconde supplémentaire de chargement représente une perte de conversion estimée entre 7% et 12% selon les études Shopify de 2026.

Le premier coupable d’une performance dégradée sur les thèmes Shopify custom est généralement le chargement non optimisé des ressources JavaScript. Chaque app Shopify installée injecte potentiellement du JavaScript dans le storefront — et les thèmes custom qui accumulent des scripts non essentiels au chargement initial peuvent rapidement devenir des gouffres de performance.

Shopify CLI en 2026 intègre des outils de profiling qui permettent d’identifier ces problèmes dès le développement :

« `bash

# Analyser les performances du thème en développement

shopify theme check –category performance

# Audit Lighthouse automatique sur le Development Store

shopify theme lighthouse –url /products/mon-produit

« `

JavaScript moderne et Liquid : l’équilibre à trouver

L’une des décisions architecturales les plus importantes d’un thème Shopify custom est la répartition entre logique Liquid (serveur) et JavaScript (client). Liquid est rendu côté serveur par Shopify et ne consomme aucune ressource JavaScript côté client — c’est toujours le premier choix pour la logique d’affichage. JavaScript intervient pour les interactions dynamiques : mise à jour du panier sans rechargement, filtres de collection temps réel, galleries d’images interactives.

En 2026, l’approche recommandée pour le JavaScript dans les thèmes Shopify est le chargement différé (lazy loading) et la modularisation. Plutôt qu’un gros bundle JavaScript chargé au démarrage, découpez votre JavaScript en modules chargés à la demande — le module de gestion du panier se charge quand le bouton « Ajouter au panier » apparaît dans la fenêtre, le module de galerie se charge quand la page produit est affichée, etc.

« `javascript

// Pattern de chargement différé pour les composants Shopify

document.addEventListener(‘DOMContentLoaded’, () => {

// Observer l’apparition du bouton « add-to-cart » dans la viewport

const observer = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

import(‘./cart-handler.js’).then(module => {

module.initCart();

});

observer.disconnect();

}

});

});

const addToCartBtn = document.querySelector(‘[data-add-to-cart]’);

if (addToCartBtn) observer.observe(addToCartBtn);

});

« `

Images et médias : l’optimisation souvent négligée

Les images représentent en moyenne 60 à 70% du poids d’une page produit Shopify. Shopify fournit des URLs d’images qui acceptent des paramètres de transformation côté serveur — taille, format, qualité — ce qui permet de délivrer des images parfaitement dimensionnées sans héberger de multiples versions.

Dans un thème Liquid, la bonne pratique 2026 est d’utiliser la balise `image_tag` de Liquid avec l’attribut `sizes` et le lazy loading natif :

« `liquid

{{ product.featured_image | image_url: width: 800 | image_tag:

loading: ‘lazy’,

sizes: ‘(max-width: 768px) 100vw, 50vw’,

widths: ‘400, 600, 800, 1200’

}}

« `

Shopify génère automatiquement les balises `srcset` correspondantes avec les différentes résolutions, et le navigateur choisit la résolution appropriée selon la taille de l’écran et la densité de pixels. Cette optimisation seule peut réduire le poids total d’une page produit de 40 à 60% sur mobile.

—

Testing et qualité : Shopify CLI comme outil de contrôle

Shopify Theme Check : le linter pour les thèmes

Shopify Theme Check est un outil de linting intégré à Shopify CLI qui analyse votre thème pour détecter les erreurs, les avertissements de performance et les mauvaises pratiques. En 2026, il couvre plus de 80 règles différentes — de la syntaxe Liquid incorrecte aux patterns qui impactent négativement les performances.

« `bash

# Lancer Theme Check sur le thème courant

shopify theme check

# Avec output détaillé et correction automatique des règles simples

shopify theme check –auto-correct

« `

Les règles les plus importantes que Theme Check vérifie : les requêtes Liquid synchrones dans les boucles (qui multiplient les temps de réponse serveur), les assets référencés mais inexistants (erreurs 404 silencieuses), les schémas de sections malformés (qui cassent l’éditeur de thème), et les patterns dépréciés des anciennes versions de Shopify.

Intégrer Theme Check dans votre pipeline CI/CD (via GitHub Actions) garantit que chaque pull request est validée automatiquement avant d’être mergée — c’est la différence entre une codebase maintenue et une codebase qui accumule silencieusement de la dette technique.

Tests d’apps Shopify : unit tests et intégration

Pour les apps Shopify développées avec Remix, la structure de tests recommandée en 2026 combine trois niveaux : tests unitaires (Jest ou Vitest) pour les fonctions pures et la logique métier, tests de composants React (Testing Library) pour les interfaces utilisateur, et tests d’intégration qui simulent les interactions OAuth et les appels API Shopify.

Le test des webhooks mérite une attention particulière. En développement local, Shopify CLI utilise un tunnel pour exposer votre app — mais pour les tests automatisés, il est préférable de mocker les appels Shopify et de tester le handler de webhook isolément, en générant manuellement les headers HMAC pour les payloads de test.

« `javascript

// Test d’un handler de webhook

import { describe, it, expect } from ‘vitest’;

import { createWebhookPayload, signPayload } from ‘../test-helpers’;

import { handleOrderCreate } from ‘../webhooks/orders-create’;

describe(‘Order Create Webhook’, () => {

it(‘should process a new order and create ERP entry’, async () => {

const payload = createWebhookPayload(‘order’, { total_price: ‘99.99’ });

const hmac = signPayload(payload, process.env.SHOPIFY_WEBHOOK_SECRET);

const result = await handleOrderCreate(payload, hmac);

expect(result.status).toBe(200);

expect(result.erpOrderCreated).toBe(true);

});

});

« `

—

Shopify Plus et les fonctionnalités avancées en 2026

Ce que Shopify Plus débloque pour les développeurs

Pour les boutiques générant plus d’un million d’euros de chiffre d’affaires annuel, Shopify Plus ouvre des fonctionnalités de développement supplémentaires significatives. La plus importante en 2026 : l’accès complet au Checkout Liquid — la possibilité de personnaliser le checkout avec du Liquid (sur les plans Plus historiques) et d’utiliser des Checkout Extensions avancées sans restriction de volume.

Shopify Plus donne également accès à l’API Shopify Flow pour automatiser des workflows complexes (récompenses fidélité, gestion des retours, alertes d’inventaire) sans code, et à l’API Multipass pour l’authentification des clients entre votre boutique Shopify et d’autres systèmes (SSO).

Les boutiques Shopify Plus ont également accès à des limites d’API significativement plus élevées — un point important pour les apps qui interagissent fréquemment avec l’API Admin, comme les intégrations ERP ou les synchronisations d’inventaire à haute fréquence.

Scripts Shopify Plus et automatisations

Les Shopify Scripts (disponibles sur Shopify Plus) permettent d’écrire du Ruby directement exécuté dans l’environnement Shopify pour personnaliser le comportement du checkout — remises automatiques basées sur des règles complexes, personnalisation des options de livraison, modifications de prix dynamiques. En 2026, Shopify a progressivement migré ces fonctionnalités vers les Checkout Extensions et les fonctions Shopify, plus puissantes et accessibles sur plus de plans.

Les Shopify Functions — des fonctions WebAssembly qui s’exécutent dans l’infrastructure de Shopify plutôt que sur votre serveur — représentent l’avenir de la personnalisation Shopify. Elles permettent de créer des remises personnalisées, des méthodes de livraison custom, et des méthodes de paiement sur mesure avec des latences ultra-faibles (exécutées directement dans le datacenter Shopify). Shopify CLI intègre le tooling complet pour développer, tester et déployer des Shopify Functions en 2026.

—

L’écosystème de développement Shopify en 2026 : outils complémentaires

Polaris : le design system de Shopify pour les apps

Si votre app Shopify a une interface dans l’admin (embedded app), Polaris est le design system à utiliser pour que votre app s’intègre visuellement à l’interface Shopify. En 2026, Polaris version 13 est la référence — avec des composants React qui correspondent exactement aux patterns d’interface de Shopify Admin.

L’avantage d’utiliser Polaris est double : d’abord, vos utilisateurs (les marchands) retrouvent des patterns d’interface familiers — pas de courbe d’apprentissage. Ensuite, Polaris gère automatiquement le mode sombre, l’accessibilité (WCAG AA) et la responsivité — des aspects que vous n’avez pas à traiter manuellement.

Shopify Hydrogen : le framework storefront headless

Pour les boutiques qui veulent aller au-delà du thème Liquid traditionnel, Hydrogen est le framework React officiel de Shopify pour les storefronts headless. Basé sur Remix, Hydrogen utilise la Storefront API de Shopify pour récupérer les données produit et les afficher dans un storefront entièrement personnalisé — sans les contraintes du thème Liquid.

Le headless est une décision architecturale majeure qui convient aux boutiques avec des besoins de performance extrêmes (Hydrogen avec Oxygen — l’hébergement Shopify — délivre des scores Lighthouse de 90+ systématiquement) ou des besoins d’expérience utilisateur impossibles à réaliser dans un thème Liquid standard.

Toutefois, le headless Shopify avec Hydrogen reste un projet d’envergure — développement from scratch, maintenance d’une codebase React complète, intégration de toutes les fonctionnalités Shopify (panier, checkout, comptes clients) manuellement. Pour la majorité des boutiques, un thème Shopify 2.0 bien développé avec Shopify CLI offre un meilleur rapport coût/bénéfice. Pour les projets ambitieux qui nécessitent une approche headless, l’Agence DYNSEO dispose de l’expertise nécessaire pour concevoir et déployer ces architectures avancées.

—

Ressources et communauté pour les développeurs Shopify

Documentation et ressources officielles

La documentation officielle Shopify pour les développeurs (shopify.dev) est en 2026 l’une des meilleures documentations d’une plateforme e-commerce — complète, à jour, avec des exemples de code pour chaque endpoint API et chaque component UI Extensions. La référence GraphQL inclut un explorateur interactif qui permet de construire et tester des requêtes directement dans le navigateur.

Le Shopify Partner Academy propose des certifications de développement qui valident officiellement vos compétences Shopify — utile pour les agences qui veulent se démarquer dans l’écosystème Partner. En 2026, les certifications Shopify Developer et Shopify Business sont les plus reconnues.

Se tenir à jour : le changelog API Shopify

Shopify publie de nouvelles versions de son API Admin chaque trimestre (format YYYY-MM). En 2026, les versions actives sont 2025-10, 2026-01, et 2026-04. Chaque nouvelle version apporte des ajouts de fonctionnalités et parfois des dépréciations — maintenir vos apps à jour avec la version API courante est important pour la pérennité et la sécurité.

Shopify CLI facilite la migration entre versions d’API via la commande `shopify app upgrade` qui analyse votre codebase, identifie les utilisations d’endpoints dépréciés et suggère les équivalents modernes. C’est un outil de migration précieux pour les apps qui doivent évoluer avec la plateforme sur la durée.

La maîtrise de Shopify CLI et de l’ensemble de l’écosystème de développement Shopify est ce qui permet de construire des boutiques et des apps véritablement différenciées. Si votre projet nécessite un développement Shopify avancé — qu’il s’agisse d’un thème entièrement sur mesure, d’une app propriétaire, ou d’une intégration système complexe — l’équipe de l’Agence DYNSEO est disponible pour transformer votre vision en réalité. Demandez votre maquette gratuite pour démarrer la conversation.