Depuis le dossier atelier-lumiere-theme, créé au guide 7, lancez la commande qui va vous accompagner pendant toute cette catégorie du parcours :

npx shopify theme dev --store votre-dev-store.myshopify.com

Remplacez l'adresse par celle de votre propre dev store, créé au guide 4. La première fois, Shopify CLI peut vous demander de choisir ce thème comme nouveau thème de développement sur cette boutique : acceptez, il sera créé comme thème non publié, exactement comme un thème dupliqué le serait dans l'administration classique.

Ce que vous devriez voir

La commande affiche plusieurs adresses. Une adresse locale, généralement http://127.0.0.1:9292, ouvre un aperçu de votre thème dans le navigateur, avec les vraies données de votre dev store. Une seconde adresse pointe vers l'éditeur de thème classique, dans l'administration Shopify, pour ce même thème en développement. Une troisième adresse, contenant preview_theme_id, permet de partager un aperçu avec quelqu'un d'autre, sans lui donner accès à votre administration.

Le rechargement automatique

Tant que cette commande reste active dans votre terminal, chaque modification enregistrée dans un fichier du thème est automatiquement renvoyée vers votre dev store. Pour une modification de section ou de CSS, l'aperçu se met souvent à jour sans même recharger toute la page ; pour d'autres changements plus profonds, un rechargement complet de la page peut avoir lieu. Dans tous les cas, vous n'avez jamais besoin de relancer la commande vous-même après chaque modification.

Un premier test concret

Ouvrez sections/ dans votre éditeur de code, choisissez une section existante du thème Skeleton, et modifiez un texte visible qu'elle affiche. Enregistrez le fichier, puis regardez l'onglet de votre navigateur ouvert sur 127.0.0.1:9292 : le changement doit apparaître en quelques secondes, sans action supplémentaire de votre part.

Arrêter et relancer le serveur

Pour arrêter le serveur de développement, retournez dans le terminal où la commande tourne, et utilisez Ctrl+C. Vos fichiers restent bien sûr inchangés sur votre disque : seule la connexion en temps réel avec votre dev store s'interrompt. Relancez simplement la même commande shopify theme dev plus tard pour reprendre exactement où vous en étiez.

Ce thème reste privé pendant tout ce guide

Le thème créé par cette commande n'est jamais publié automatiquement : c'est un thème de développement, non visible par les visiteurs habituels de votre dev store. Vous pouvez donc expérimenter librement, sans risquer d'afficher une version à moitié terminée à qui que ce soit d'autre que vous, ou une personne à qui vous auriez explicitement partagé le lien d'aperçu.

Vérifiez que vous avez compris

Vous modifiez un fichier de section pendant que shopify theme dev tourne, mais vous oubliez d'enregistrer le fichier dans votre éditeur. L'aperçu sur 127.0.0.1:9292 va-t-il se mettre à jour ?

Non. Shopify CLI surveille les fichiers réellement enregistrés sur votre disque, pas le contenu affiché dans un éditeur non sauvegardé. Tant que le fichier n'est pas explicitement enregistré, aucune modification n'est envoyée vers votre dev store, et l'aperçu reste identique à avant.

Chapitre terminé