← Retour au site

Guide Vibe-Coding Shopify

Procédure guidée pour modifier votre thème en autonomie avec WindSurf et l'IA

Version non-tech • Pas à pas
🎬 Vidéos recommandées avant de commencer

Ces vidéos vous aideront à mieux comprendre le processus :

Découverte de WindSurf
Découverte de WindSurf

Introduction à l'éditeur de code IA

Process avec Cursor
Pour aller plus loin

Même process avec Cursor sur MacOS (sans Git — pas bien !)

💡 Recommandation : Pour de meilleurs résultats, utilisez le modèle Claude Opus 4.5 (Thinking) dans WindSurf. C'est le modèle le plus performant pour comprendre et modifier du code Shopify de manière fiable.
0/7
0

Préparer l'environnement (une seule fois)

0.1 Installer Shopify CLI

Installation Shopify CLI
Voir la vidéo d'installation

À quoi ça sert ?

Shopify CLI est l'outil officiel qui permet :

👉 Documentation officielle :
https://shopify.dev/docs/api/shopify-cli

Une fois installé, c'est terminé. Il n'y a rien d'autre à faire à cette étape.

🆘 J'ai un problème avec cette étape

0.2 Se connecter à Shopify via Shopify CLI

Objectif : autoriser l'outil à fonctionner avec Shopify.

  1. Ouvrir un terminal (peu importe lequel)
  2. Lancer la commande :
shopify auth login
  1. Un navigateur s'ouvre
  2. Se connecter au compte Shopify
  3. Autoriser l'accès
ℹ️ Note : Cette étape est à faire une seule fois.
🆘 J'ai un problème avec cette étape

0.3 Télécharger le thème Shopify sur votre ordinateur

Objectif : avoir tous les fichiers du thème en local.

  1. Créer un dossier sur votre ordinateur (exemple : theme-shopify)
  2. Ouvrir un terminal dans ce dossier
  3. Lancer :
shopify theme pull

Shopify télécharge alors le thème.

👉 Vérification : À la fin, le dossier doit contenir des fichiers comme :
  • layout/theme.liquid
  • sections/
  • assets/
  • templates/
  • snippets/
Si vous voyez ces fichiers, c'est bon !
🆘 J'ai un problème avec cette étape

0.4 Installer WindSurf

Objectif : installer l'éditeur de code avec IA intégrée.

WindSurf est un éditeur de code intelligent qui intègre une IA capable de :

👉 Télécharger WindSurf :
https://codeium.com/windsurf
  1. Télécharger la version correspondant à votre système (Windows / Mac / Linux)
  2. Installer l'application
  3. Créer un compte Codeium (gratuit) ou se connecter
ℹ️ Note : Une fois installé, WindSurf est prêt à l'emploi. L'IA est incluse par défaut.
🆘 J'ai un problème avec cette étape
1

Ouvrir le projet et lancer le thème en local

🎉 WindSurf est installé — Comment gérer les problèmes à partir de maintenant

À partir de cette étape, vous pouvez demander à l'IA de WindSurf de vous aider en cas de problème.

L'IA est capable de résoudre quasiment tous les problèmes, y compris ceux liés à votre machine (erreurs terminal, configuration, dépendances…).

Comment faire : Décrivez simplement votre problème dans le panneau Cascade (l'IA). Copiez-collez l'erreur si besoin. L'IA analysera et proposera une solution.

1.1 Ouvrir le projet dans WindSurf

  1. Ouvrir WindSurf
  2. Cliquer sur File > Open Folder
  3. Sélectionner le dossier du thème

1.2 Lancer le thème en local

  1. Ouvrir le terminal intégré de WindSurf (menu Terminal > New Terminal)
  2. Lancer :
shopify theme dev

Une URL de preview s'affiche dans le terminal.

1.3 Vérifier que ça fonctionne

  • Ouvrir l'URL affichée dans le navigateur
  • Vérifier que le site se charge normalement
  • Les changements locaux apparaissent après un rafraîchissement
2

Suivre et valider les changements avec le versioning

Objectif : garder le contrôle sur ce que modifie l'IA, sans utiliser Git en ligne de commande.

2.1 Ouvrir l'onglet "Source Control"

Dans WindSurf :

ℹ️ À partir de maintenant :
  • Chaque modification apparaît automatiquement
  • Rien n'est validé tant que vous ne le décidez pas

2.2 Principe de base (très important)

  1. L'IA modifie des fichiers
  2. WindSurf vous montre exactement ce qui a changé
  3. Vous décidez :
    • Soit de garder les changements
    • Soit de annuler(clic droit > Discard Changes)
⚠️ Important : Rien n'est envoyé sur Shopify tant que ce n'est pas validé et déployé.
3

Faire des modifications avec l'IA

Objectif : demander des changements sans coder soi-même.

Comment faire simplement

  1. Ouvrir le panneau Cascade (IA) dans WindSurf
  2. Expliquer clairement ce que vous voulez à l'IA
    Exemple : "Ajouter un bloc FAQ sur la page produit"
  3. Laisser l'IA modifier le code
🎯 Conseil : Soyez précis dans vos demandes. Plus votre description est claire, meilleur sera le résultat. Mentionnez la page concernée, le style souhaité, etc.

3.1 Vérifier les changements

Dans l'onglet Source Control :

  1. Regarder la liste des fichiers modifiés
  2. Cliquer sur un fichier pour voir les changements (diff)
  3. Vérifier rapidement que ça correspond à la demande
⚠️ Si quelque chose semble bizarre ou trop complexe :
  • Ne pas valider
  • Annuler les changements (clic droit > Discard Changes)
  • Reformuler votre demande à l'IA
4

Tester en local avant validation

Objectif : vérifier que rien n'est cassé.

Checklist simple

  • Le site se charge toujours
  • La page concernée fonctionne
  • Rien d'étrange ailleurs sur le site
  • Pas d'erreur visible dans la console (F12)
⚠️ Si ce n'est pas OK :
  • Annuler les changements dans le panneau Source Control
  • Demander à l'IA de corriger
5

Valider les changements (commit)

Objectif : enregistrer officiellement une version propre.

Dans le panneau Source Control :

  1. Vérifier que tout est OK
  2. Cliquer sur le + pour "stager" les fichiers (ou Stage All)
  3. Ajouter un message simple dans le champ texte
    Exemple : "Ajout bloc FAQ page produit"
  4. Cliquer sur Commit (✓)
👉 À partir de là : les changements sont "propres et validés" dans l'historique Git local.
6

Déployer le thème sur Shopify

Objectif : envoyer la version validée sur Shopify.

Dans le terminal WindSurf :

shopify theme push

Recommandations

  • Déployer vers un thème de test/preview si possible
  • Vérifier rapidement en ligne sur ce thème de test
  • Publier le thème seulement si tout est OK
💡 Astuce : Vous pouvez créer un thème de preview sur Shopify pour tester sans impacter la production. Utilisez shopify theme push --unpublished pour créer un nouveau thème de test.

Règle d'or