Créer et déployer un thème Shopify avec Shopify CLI : le guide pas à pas

TL;DRVous avez une boutique Shopify et les thèmes du catalogue ne collent pas tout à fait à votre marque ? Ou vous débutez en développement web et vous voulez comprendre comment un thème est fabriqué ? Ce guide suit le parcours officiel de Shopify, de la boutique de test à la mise en ligne, avec les commandes exactes de Shopify CLI et un retour sur le thème que nous construisons en ce moment.

🛒 Pourquoi créer son propre thème Shopify ?#

Sur Shopify, le thème est tout ce que voit votre client : la page d'accueil, les fiches produits, le panier, les menus. Shopify héberge la boutique et gère le paiement ; le thème, lui, décide de l'apparence et d'une bonne partie de l'expérience d'achat. Si vous découvrez la plateforme, notre article Shopify : comment ça fonctionne et à quoi ça sert pour votre e-commerce pose les bases.

Les thèmes du catalogue Shopify conviennent à beaucoup de boutiques. Mais quand votre marque a une identité forte, un catalogue particulier ou des besoins de navigation précis, un thème sur mesure devient la bonne réponse. Bonne nouvelle : Shopify fournit gratuitement tout l'outillage pour le construire. Ce guide suit le parcours officiel, de la boutique de test à la mise en ligne, avec les commandes exactes de Shopify CLI, l'outil en ligne de commande de Shopify.

📌 Ce qu'il vous faut avant de commencer#

• Un compte Shopify Partners. Il est gratuit et permet de créer des boutiques de développement, autant que nécessaire, pour tester sans rien payer.
• Une boutique de développement. C'est une boutique Shopify complète mais réservée aux tests. Vous y travaillez sans risque pour une boutique en activité.
• Shopify CLI. Il s'installe avec npm, le gestionnaire de paquets fourni avec Node.js. Une fois installé, la commande shopify est disponible dans votre terminal.
• Google Chrome. La documentation précise que l'aperçu local du thème n'est disponible que dans ce navigateur.
• Un éditeur de code, comme Visual Studio Code, pour modifier les fichiers du thème.

Si vous êtes commerçant et que vous confiez le travail à un développeur, vous n'avez pas besoin d'installer Shopify CLI. En revanche, vous devrez lui donner accès à vos thèmes : nous y revenons plus bas avec l'application Theme Access.

🛒 Comment est construit un thème Shopify#

Un thème est un simple dossier de fichiers. Pas de base de données, pas de serveur à gérer : Shopify s'en charge. Les fichiers sont écrits en Liquid, le langage de gabarits de Shopify, en JSON pour la configuration, et en CSS et JavaScript pour la mise en forme et les interactions. La documentation officielle organise ce dossier en huit sous-dossiers, chacun avec un rôle précis.

Retenez surtout la logique : les templates décrivent quelles sections composent une page, les sections portent le contenu et les réglages, les snippets évitent de se répéter. Tout ce qu'un marchand doit pouvoir modifier sans coder passe par les réglages déclarés dans les sections et dans config/.

📌 Créer et mettre en ligne un thème en cinq étapes#

1. 📌 Créer une boutique de développement#

   Depuis votre compte Shopify Partners, créez une boutique de développement. Vous obtenez une adresse du type ma-boutique.myshopify.com. C'est elle que vous indiquerez à Shopify CLI. Ajoutez-y quelques produits et une collection : un thème se teste mal sur une boutique vide.

2. 📌 Partir du thème Skeleton avec theme init#

   Shopify fournit un thème de référence volontairement minimal, le Skeleton theme, décrit dans la documentation comme un thème « minimal, soigneusement structuré, conçu pour démarrer rapidement ». La commande suivante le copie sur votre ordinateur dans un dossier au nom de votre choix :

   shopify theme init mon-theme
   cd mon-theme

   Vous obtenez d'emblée les huit dossiers vus plus haut, avec le strict nécessaire pour qu'une boutique s'affiche. Si vous préférez partir d'un autre thème hébergé sur un dépôt Git, l'option --clone-url permet d'indiquer son adresse.

3. 📌 Prévisualiser en local avec theme dev#

   C'est la commande que vous utiliserez le plus. Elle envoie votre thème sur la boutique en tant que thème de développement, puis ouvre un aperçu local :

   shopify theme dev --store ma-boutique

   Le paramètre --store n'est requis qu'à la première exécution. La commande affiche trois liens : l'aperçu local sur http://127.0.0.1:9292, un lien vers l'éditeur de thème dans l'administration de la boutique, et un lien d'aperçu à partager avec d'autres développeurs. Chaque modification d'un fichier CSS ou d'une section est rechargée à chaud dans le navigateur, sans rafraîchir la page. Pour reporter dans vos fichiers locaux les réglages faits dans l'éditeur de thème, ajoutez l'option --theme-editor-sync.

4. 📌 Envoyer le thème dans la bibliothèque avec theme push#

   Quand le résultat vous convient, envoyez le thème sur la boutique. La première fois, demandez un thème non publié : il apparaît dans la bibliothèque de thèmes de la boutique, sans remplacer le thème actif.

   shopify theme push --unpublished

   Les fois suivantes, shopify theme push sans option met à jour le thème choisi. Dans un script ou une intégration continue, précisez toujours la cible avec --theme, --unpublished, --development ou --live, car la commande ne peut pas poser de question.

5. 📌 Publier avec theme publish#

   La publication est une action distincte de l'envoi. Après avoir poussé toutes vos modifications, lancez :

   shopify theme publish

   La commande vous demande de choisir le thème, puis de confirmer. D'après la documentation, le thème est alors publié et devient le thème actif de la boutique. L'ancien thème reste dans la bibliothèque : vous pouvez y revenir en quelques clics depuis l'administration.

Bon à savoir. Pour travailler sur la boutique d'un client sans compte collaborateur, le marchand peut installer l'application Theme Access depuis l'App Store de Shopify. Elle génère un mot de passe limité aux thèmes (portée write_themes) et l'envoie au développeur par un lien valable 7 jours, consultable une seule fois. Le développeur le fournit ensuite à Shopify CLI avec l'option --password, ou via la variable d'environnement SHOPIFY_CLI_THEME_TOKEN dans un pipeline automatisé. Il ne donne accès ni aux commandes, ni aux clients, ni aux réglages de paiement.

📌 Liquid et schéma de section : votre première section#

Une section est un fichier Liquid qui se termine par un bloc {% schema %}. Ce bloc, écrit en JSON, déclare le nom affiché dans l'éditeur de thème, les réglages proposés au marchand et, le cas échéant, les blocs qu'elle accepte. Voici une section réduite à l'essentiel : un bandeau dont le texte est modifiable sans toucher au code.

{% comment %} sections/bandeau-annonce.liquid {% endcomment %}
<div>
  <p>{{ section.settings.message }}</p>
</div>

{% schema %}
{
  "name": "Bandeau d'annonce",
  "settings": [
    {
      "type": "text",
      "id": "message",
      "label": "Message",
      "default": "Livraison offerte en France métropolitaine"
    }
  ],
  "presets": [{ "name": "Bandeau d'annonce" }]
}
{% endschema %}

Trois points à retenir. {{ section.settings.message }} affiche la valeur saisie par le marchand. Le réglage de type text apparaît dans l'éditeur sous l'étiquette « Message ». Enfin, le tableau presets rend la section disponible dans le menu « Ajouter une section » de l'éditeur : sans preset, une section ne peut être placée que par le code, dans un template JSON.

Les sections du thème Skeleton suivent le même principe, avec davantage de types de réglages : sélecteur d'image, choix de menu, couleur, texte enrichi. C'est ainsi qu'un thème devient configurable par un commerçant sans développeur.

📌 Vérifier son code avec theme check#

Avant chaque envoi, lancez l'analyseur fourni par Shopify. La commande shopify theme check parcourt les fichiers du thème et signale les erreurs de Liquid, les fichiers manquants, les traductions absentes et les écarts aux bonnes pratiques. L'option --auto-correct corrige ce qui peut l'être automatiquement, et --fail-level permet de faire échouer un pipeline d'intégration continue à partir d'un niveau de gravité.

🛒 Notre retour d'expérience : porter un thème PrestaShop vers Shopify#

Chez Websource, nous avons conçu un thème PrestaShop complet, avec ses modules de navigation et de contenu. Nous le portons en ce moment vers Shopify, en suivant exactement le parcours décrit ici : compte Partners, boutique de développement, thème initialisé avec Shopify CLI. Le travail est en cours ; le thème n'est pas terminé et n'est pas en ligne.

Quelques enseignements, à ce stade. D'abord, l'organisation en sections et snippets se prête bien au découpage que nous avions sur PrestaShop : l'en-tête est une section, le méga-menu, la barre de recherche, le bloc compte client et le sélecteur de langue sont des snippets appelés par cette section. Ensuite, la feuille de style est compilée avec Tailwind CSS version 4 avant d'être déposée dans assets/ : Shopify ne compile rien pour vous, le thème doit contenir le CSS final. Enfin, chaque envoi se fait en thème non publié sur notre boutique de développement, qui conserve son thème de départ comme thème actif. Rien ne touche une boutique en activité tant que nous n'avons pas décidé de publier.

Nous nous aidons aussi d'outils d'intelligence artificielle pour accélérer l'écriture des sections et la mise en forme, en relisant et en testant chaque résultat. Nous avons décrit cette façon de travailler dans l'article Comment faire du web design avec Claude Opus 5.5.

Bon à savoir. La boutique de développement peut héberger plusieurs thèmes non publiés en même temps. Vous pouvez donc pousser une variante par idée de mise en page, les comparer dans l'éditeur de thème, et ne publier que celle qui est retenue.

Un thème habille la boutique ; pour lui ajouter des fonctions, il faut une application. Lisez notre guide jumeau : créer une application Shopify avec le programme Partners.

📌 Faut-il se lancer seul ?#

Si vous êtes développeur débutant, oui : le thème Skeleton, l'aperçu local et l'éditeur de thème forment un terrain d'apprentissage confortable, et la documentation de Shopify est précise. Comptez quelques heures pour comprendre la structure et quelques jours pour un premier thème présentable.

Si vous êtes commerçant, votre temps est sans doute mieux employé à vendre. Websource conçoit des thèmes Shopify sur mesure, à partir de votre charte et de votre catalogue, et accompagne les commerçants de la boutique de développement à la publication. Nous pouvons aussi reprendre un thème existant pour le faire évoluer. Parlez-nous de votre projet : nous vous dirons honnêtement ce qui relève d'un réglage dans l'éditeur de thème et ce qui demande du développement.

❓ Questions fréquentes#

🛒 Faut-il payer pour créer un thème Shopify ?#

Non. Le compte Shopify Partners, les boutiques de développement, Shopify CLI et le thème Skeleton sont fournis gratuitement par Shopify. Un abonnement n'est nécessaire que pour une boutique qui vend réellement.

🛒 Que se passe-t-il si je lance shopify theme push par erreur sur le thème en ligne ?#

La commande écrase les fichiers du thème ciblé. C'est pourquoi la première fois, on utilise --unpublished, qui crée un nouveau thème dans la bibliothèque sans toucher au thème actif. Sans option, la commande demande de choisir le thème cible avant d'envoyer.

🛒 Un développeur a-t-il besoin de mon mot de passe Shopify pour travailler sur mon thème ?#

Non. Installez l'application Theme Access : elle génère un mot de passe limité aux thèmes, envoyé au développeur par un lien valable 7 jours et consultable une seule fois. Il ne donne accès ni aux commandes, ni aux clients, ni aux paiements.

📌 Puis-je modifier le thème sans coder une fois qu'il est en place ?#

Oui, dans la limite des réglages déclarés par le thème. Chaque section expose dans l'éditeur de thème les champs définis dans son bloc schema : textes, images, menus, couleurs. Ce qui n'est pas prévu dans ces réglages demande une intervention dans le code.

Article rédigé le 08/10/2026 par l'équipe Websource à partir des sources citées ci-dessus, puis relu avant publication. Une information vous semble inexacte ou datée ? Signalez-le nous, nous corrigeons.