Créer des sections Shopify avec l'IA : ma méthode LEGO (et 6 erreurs à éviter)
Créer des sections Shopify avec l'IA : ma méthode LEGO (et 6 erreurs à éviter)
Tu veux tirer le meilleur parti des options des générations de sections dans Shopify ? Découvre ma méthode LEGO et 6 erreurs à éviter pour générer de meilleurs blocs.
Créer des sections Shopify avec l'IA : ma méthode LEGO (et 6 erreurs à éviter)
« Crée-moi une jolie section avec […] »
C’est demandé poliment, mais tu risques de ne pas aimer le résultat.
Depuis que Shopify permet de générer des blocs personnalisés avec l'IA directement dans l'éditeur de thème, tu as accès à quelque chose qui aurait nécessité du développement sur mesure il n'y a pas si longtemps.
Ça te permet de gagner en flexibilité.
Mais, ça fait plusieurs fois que je vois passer des prompts qui me font sourciller. Certains contiennent trois lignes et laissent absolument toutes les décisions à l'IA. D'autres ont des instructions qui n’en sont pas vraiment.
Le résultat ?
Parfois très beau.
Parfois complètement à côté de la plaque.
Et parfois très beau, mais impossible à modifier correctement après.
Le problème, ce n'est pas nécessairement l'IA de Shopify. C'est souvent notre façon de lui expliquer ce qu'on veut.
Je vais te montrer comment je réfléchis quand je construis mes prompts, les erreurs à éviter et comment transformer ton idée en instructions efficaces.
C’est parti !
Quoi… tu ne savais pas que Shopify peut générer des blocs avec l'IA ?!
Eh oui ! Tu n'es plus limité·e aux sections déjà disponibles dans ton thème Shopify.
Avec Sidekick, tu peux demander à l'IA de créer un bloc personnalisé directement dans l'éditeur de thème. Une grille d'images, une présentation avec du texte et des boutons, un encadré pour un message promotionnel… Tu décris ce que tu veux et Shopify génère le code pour toi. Sans que tu aies besoin d'écrire une seule ligne de Liquid !
Pour essayer, rends-toi dans Boutique en ligne > Thèmes > Modifier le thème. Clique sur Ajouter une section, et dans les choix tu auras Générer. Tu pourras décrire ce que tu veux créer, voir le résultat et demander des ajustements avant de le conserver.
Important : Sidekick génère techniquement des blocs de thème, qui peuvent être intégrés dans des sections compatibles. Pour créer une section Liquid complète et autonome, tu peux aussi passer par ChatGPT ou Claude (mais c’est plus complexe).
Donc, tu peux maintenant créer des éléments personnalisés sans savoir coder ! Mais, encore faut-il savoir expliquer à l'IA ce que tu veux !
Parce qu'entre « fais-moi une jolie section » et un résultat réellement utilisable, il y a des étapes que je te conseille de ne pas sauter.
Ma méthode : réfléchir comme un LEGO… à l'envers !
Si tu ne le savais pas déjà, je suis une grande fan de Lego. Et ça adonne que mon passe-temps favori est une image parfaite pour t’expliquer comment mon cerveau fonctionne quand je regarde une section Shopify.
Comment ça marche ?
Exemple : Je veux créer une section avec une image à gauche, un titre, un paragraphe et un bouton à droite.
🧑🏻🍳 Toi : Tu vois une section.
👩🏻💻 Moi : Je vois plusieurs morceaux que je vais vouloir contrôler de façon indépendante.
C'est comme un LEGO, mais à l'envers.
Au lieu de partir d'un paquet de briques pour faire ma construction, je pars de ce que je veux obtenir et je le déconstruis pour identifier les briques dont j'ai besoin.
1. Je visualise le résultat final
Première étape : de quoi je veux que ça ait l'air ? (Je ne pense pas au code pour l’instant.)
Je veux une image à gauche et du texte à droite. Le titre doit être plus gros que le paragraphe. Il y a un bouton sous le texte. Le tout est centré dans la page avec beaucoup d'espace autour.
C'est ma vision de départ.
2. Je déconstruis la section en morceaux
Ensuite, je commence à identifier les éléments qui composent ma section :
Un conteneur principal, une image et un bloc de contenu.
Dans mon bloc de contenu, j'ai un sous-titre, un titre principal, un paragraphe et un bouton.
Chaque élément a sa fonction.
Et chaque élément aura des paramètres différents.
3. Je décide ce que je veux pouvoir modifier
Le nerf de la guerre, c’est ici. Pour chaque morceau, je me pose la question suivante :
Qu'est-ce que je veux pouvoir configurer dans Shopify ?
Par exemple :
Ma section : couleur de fond, largeur maximale et espacement (padding) entre la section et le contenu.
Mon image : photo, proportions, position et possibilité d'utiliser une image différente sur mobile.
Mon titre : texte, taille, couleur et alignement.
Mon paragraphe : contenu, couleur et taille.
Mon bouton : texte, lien, coins arrondis ou non, couleur de fond et couleur du texte.
Version mobile : espacement, ordre des éléments, taille des éléments et contrôle de l’affichage.
Attention : Ce n'est pas parce que je peux demander 40 paramètres à l'IA que je devrais le faire. Je me concentre sur les besoins les plus importants.
Je distingue donc les éléments que je veux personnaliser dans Shopify de ceux que je peux simplement définir une fois dans le design.
Et voilà ! Je viens de structurer la majeure partie de mon prompt sans avoir écrit une seule ligne de code.
4. Je construis le tout dans mon prompt
Maintenant que je connais mes morceaux, je peux expliquer à Shopify comment les assembler.
Je commence par la disposition générale, puis je décris les éléments, les paramètres modifiables et le comportement sur mobile.
Et si j'ai des contraintes particulières, comme une boutique bilingue ou un thème qui ne possède pas de système de couleurs prédéfinies, je les ajoute à la fin.
C'est pas mal plus simple pour l'IA de comprendre ce que je veux lorsqu'elle reçoit des instructions organisées plutôt qu'un gros paragraphe dans lequel tout est mélangé.
Le but, c'est de réfléchir à la façon dont tu vas gérer ta section.
Les 6 erreurs que tu fais (probablement) quand tu promptes dans Sidekick
Maintenant que tu comprends comment je construis (ou déconstruis, c’est selon) une section, on va regarder ce qui arrive quand on saute certaines étapes.
Et je te rassure : tu n'as pas besoin de devenir développeur·e pour corriger la majorité de ces erreurs.
Erreur 1 : demander quelque chose de « joli »
On commence avec mon pref.
❌ Le prompt que j'éviterais :
Crée-moi une jolie section pour présenter mes chandelles artisanales.
Joli… c’est subjectif. Et l’IA avec le subjectif… il n’est pas très bon là-dessus.
✅ Ce que je demanderais plutôt :
Crée un bloc de présentation avec une grande image à gauche et du texte à droite. Le contenu doit comprendre un petit sous-titre, un titre principal, un paragraphe et un bouton. L'image doit occuper environ 50 % de la largeur sur ordinateur. Le contenu doit être aligné verticalement au centre. Je veux une présentation épurée avec des espacements généreux entre les éléments. Sur mobile, l'image doit apparaître au-dessus du texte.
Tu remarqueras que je n'ai pas utilisé un seul terme technique. J'explique simplement les morceaux que je veux voir et où je veux les voir.
L'IA n'a pas à deviner la disposition. Je lui ai déjà donné une bonne partie de la réponse.
Erreur 2 : trop en mettre dans ton prompt
Tu commences avec une idée simple : un titre, trois paragraphes et un encadré de couleur.
Puis, tu ajoutes les codes de couleur, les polices, les tailles desktop, les tailles mobile, les espacements, les couleurs individuelles de chaque texte, les rayons des coins… Pis tant qu'à être là, tu demandes des paramètres pour les images, les dégradés et les cartes.
❌ Le prompt que j'éviterais :
Crée une section avec trois paragraphes et un encadré coloré. Fond crème #faf7f2, largeur 760 px, police Montserrat 500, taille 17 px, interligne 1.75, texte teal. Ajoute un encadré avec des coins de 16 px, un titre de 46 px, du texte jaune. Tous les textes doivent avoir des paramètres de couleur et de taille séparés pour desktop et mobile. Ajoute aussi des options de couleurs pour chaque carte, les dégradés sur les photos et une image de fond facultative. Utilise exactement le texte fourni.
Tu ne dois pas prompter comme ça. Tu dois lui demander de te créer les blocs pour accueillir tes textes et déterminer tes paramètres. Pas lui demander le résultat final.
Le but du générateur de section, c’est de créer une section avec des options que tu vas configurer.
✅ Ce que je demanderais plutôt :
Crée un bloc de contenu pour raconter l'histoire d'une marque.
Disposition
Une seule colonne.
Largeur maximale de 760 px.
Texte aligné à gauche.
Un titre principal suivi de trois paragraphes.
Un encadré coloré sous les paragraphes contenant un titre et une courte phrase.
Paramètres modifiables
Couleur de fond de la section.
Textes du titre et des trois paragraphes.
Couleur et taille du titre.
Couleur de fond de l'encadré.
Titre et texte de l'encadré.
Rayon des coins de l'encadré.
Style
Utiliser les polices du thème.
Fond crème par défaut.
Encadré de couleur foncée.
Aucun effet d'ombre ou animation.
Mobile
Conserver une seule colonne.
Adapter les tailles de texte et les espacements.
Prévoir des marges latérales de 20 px.
C’est complet et chaque information a sa place et sa fonction.
Un bon prompt n’a pas besoin d’être court. Il a besoin d’être structuré. (Tu devrais voir mes prompts, il arrive souvent qu’ils sont très longs pour être le plus efficace possible.)
Erreur 3 : fournir ton texte sans réfléchir aux champs modifiables
Tu as déjà rédigé ton contenu. Tu le copies dans Shopify et tu demandes à l'IA de le mettre en page.
❌ Le prompt que j'éviterais :
Crée une belle section avec ce texte sans rien modifier :
« Nos chandelles sont fabriquées à la main au Québec. Chaque fragrance est soigneusement sélectionnée pour créer une ambiance unique dans votre maison. Découvrez nos collections et trouvez votre nouvelle chandelle préférée. »
Le problème ?
Tu lui donnes le contenu, mais pas la façon dont tu veux le gérer. L'IA pourrait tout intégrer dans un seul champ de texte, ou même inscrire certaines phrases directement dans le code.
Et si tu veux changer seulement le titre plus tard ? Oups !
✅ Ce que je demanderais plutôt :
Crée un bloc contenant :
Un sous-titre modifiable.
Un titre principal modifiable.
Un paragraphe avec mise en forme enrichie.
Un bouton avec texte et lien modifiables.
Tous les contenus doivent utiliser des paramètres Shopify natifs, accessibles dans l'éditeur du thème.
Le paragraphe doit permettre d'ajouter du texte en gras et des liens.
N'intègre pas de texte définitif directement dans le code.
Et si mon contenu est déjà rédigé, je peux l'ajouter dans les champs une fois le bloc généré. Bonus : tu as un bloc que tu peux réutiliser partout dans ton thème. Il n’est pas fixe à ce contenu.
Erreur 4 : oublier les paramètres que tu voudras modifier plus tard
On revient à notre LEGO.
Tu as demandé quatre cartes avec des images et des titres et l'IA te génère quelque chose qui te convient.
Mais, si tu veux changer les couleurs de chaque carte, ajuster leur largeur et ajouter une cinquième carte... Impossible parce que rien de tout ça n’a été prévu dans les paramètres. Oups !
❌ Le prompt que j'éviterais :
Crée une grille de quatre cartes avec une photo et un titre.
✅ Ce que je demanderais plutôt :
Crée une grille de cartes contenant chacune une image, un titre et un lien facultatif.
Je veux pouvoir :
Ajouter, supprimer et réorganiser les cartes dans l'éditeur Shopify, selon la structure de blocs compatible avec mon thème.
Choisir la couleur de fond et la couleur du texte de chaque carte indépendamment.
Modifier l'image et le titre de chaque carte.
Choisir entre deux, trois ou quatre colonnes par ligne sur ordinateur.
Modifier l'espacement entre les cartes.
Choisir le ratio des images : carré, portrait ou paysage.
Si une carte ne contient aucun lien, elle ne doit pas être cliquable.
Voilà pourquoi je prends le temps de déconstruire mes sections avant de rédiger mes prompts : Je pense aux modifications futures.
Je ne veux pas devoir demander à Shopify de reconstruire toute une section simplement parce que j'ai décidé de changer la couleur d'une carte.
À noter : Tout ne doit pas être nécessairement personnalisable. L'objectif est de prévoir les paramètres utiles, pas de transformer ton éditeur Shopify en tableau de bord avec 450 options.
Erreur 5 : penser uniquement à ton écran d'ordinateur
Tu crées une section avec quatre colonnes. Tu regardes ton résultat sur ton grand écran. Magnifique !
Puis, tu ouvres ta boutique sur ton cellulaire… Les quatre colonnes sont encore là, les textes sont minuscules et tout est coincé.
❌ Le prompt que j'éviterais :
Crée une grille de quatre images avec un titre sous chacune.
✅ Ce que je demanderais plutôt :
Sur ordinateur, affiche jusqu’à quatre cartes par rangée.
Sur mobile, je veux une grille de deux colonnes. Les images doivent conserver leurs proportions sans être déformées. Les titres peuvent occuper plusieurs lignes. Les cartes d'une même rangée doivent conserver une hauteur uniforme. Prévois des espacements adaptés aux petits écrans.
Et si je veux un carrousel plutôt qu'une grille ? Je le précise. Avec des instructions sur le glissement du doigt, les flèches de navigation et le nombre de cartes visibles. (Mais, seulement si j'en ai besoin.)
Erreur 6 : croire que l'IA connaît ton thème et toutes tes contraintes
Dernier point, et pas le moindre : Shopify propose différents thèmes, avec des architectures et des fonctionnalités qui ne sont pas toujours identiques. Certains utilisent les systèmes de couleurs natifs de Shopify. D'autres ont des paramètres de couleurs indépendants. Et les boutiques bilingues ajoutent une couche de complexité.
❌ Le prompt que j'éviterais :
Utilise les couleurs de mon thème, ajoute un bouton « Découvrir » et assure-toi que tout fonctionne en français et en anglais.
✅ Ce que je demanderais plutôt :
Utilise les polices existantes du thème.
Le thème utilise des paramètres de couleurs indépendants plutôt que les color schemes de Shopify. Ajoute des sélecteurs de couleurs pour les éléments que je souhaite personnaliser.
Tous les textes visibles doivent être modifiables avec des paramètres Shopify compatibles avec Translate & Adapt.
La mise en page doit s'adapter aux traductions plus longues.
Le point important, c'est de fournir à l'IA les contraintes de ton environnement plutôt que de supposer qu'elle les connaît.
Avant de générer ton prochain prompt Shopify : ma checklist
En résumé : La prochaine fois que tu voudras créer une section avec l'IA de Shopify, commence par réfléchir à ce que tu veux obtenir.
Puis, reprends ton LEGO à l'envers.
La disposition : est-ce que j'ai clairement expliqué à quoi la section doit ressembler ?
Les morceaux : est-ce que j'ai identifié les images, titres, textes, boutons et autres éléments ?
Les paramètres : est-ce que j'ai précisé ce que je veux pouvoir modifier dans l'éditeur Shopify ?
Le contenu : est-ce que mes textes seront dans des champs modifiables plutôt que codés en dur ?
Le mobile : est-ce que j'ai expliqué comment la section doit s'adapter aux petits écrans ?
Le thème : est-ce que j'ai indiqué les particularités importantes de mon thème ?
Les langues : est-ce que j'ai prévu la traduction si ma boutique est bilingue ?
La simplicité : est-ce que j'ai demandé uniquement les fonctionnalités dont j'ai réellement besoin ?
Et une fois le bloc généré, teste-le : Change un titre. Remplace une image. Modifie une couleur. Regarde le résultat sur mobile. N’oublie pas que Shopify peut générer un bloc à partir de tes instructions, mais ça ne veut pas dire que le code sera parfait.
Une section qui a de l'allure, c'est bien. Une section qui a de l'allure et que tu peux modifier facilement et réutiliser ailleurs, c'est pas mal mieux !
Mais Maude, t'as pas peur de perdre ta job en partageant tous tes secrets ?
Haha ! Non.
Je travaille avec Shopify depuis assez longtemps pour savoir qu'entre comprendre comment faire quelque chose et être capable de le réaliser, il y a parfois tout un monde !
Mon objectif, ça n'a jamais été que mes clients soient “enchaînés” avec moi pour changer des choses dans leurs boutiques. Plus tu es autonome avec Shopify, plus je suis contente.
Et n’oublions pas la réalité : l'IA peut générer du code, mais elle ne sait pas si c'est la bonne solution pour ta boutique, si ça risque de briser une autre fonctionnalité ou si tu es en train de te compliquer la vie pour rien.
C'est là que mon expertise entre en jeu.
En plus de savoir coder, je réfléchis à la meilleure façon de construire les choses, à leur fonctionnement et à ce qui va arriver quand tu voudras les modifier dans six mois.
Alors non, je n'ai pas peur de te montrer mes trucs.
Ça me laisse aussi plus de temps pour régler des problèmes plus complexes que tu vas finir par m'envoyer. Parce que ceux-là, étrangement, il n’en manque jamais. ;)
FAQ : créer des blocs Shopify avec l'IA
Est-ce que je peux créer une section Shopify complète avec ChatGPT ou Claude ?
Oui ! Tu peux demander à ChatGPT ou Claude de générer une section Shopify complète avec son code Liquid, HTML, CSS, JavaScript et ses paramètres de personnalisation.
Mais attention ! Si tu lui demandes « fais-moi une belle section pour présenter mes collections », tu risques de te retrouver avec quelque chose de très ordinaire. Ou de très beau, mais qui ne fonctionne pas avec ton thème.
C'est là que ma méthode LEGO prend tout son sens.
Plus tu demandes quelque chose de complexe, plus tes spécifications doivent être précises.
Tu dois expliquer la disposition, les morceaux qui composent ta section, les paramètres modifiables, le comportement sur mobile et les particularités de ton thème.
Évidemment, teste le résultat avant de le publier. Ce n'est pas parce que Claude ou ChatGPT te fournit 600 lignes de code avec beaucoup d'assurance que les 600 lignes sont bonnes !
Est-ce que je dois connaître le code pour générer des blocs Shopify ?
Non. Sidekick permet de créer des blocs à partir d'instructions rédigées en langage “naturel”. Par contre, comprendre le fonctionnement des sections, des blocs et des paramètres de thème aide à mieux formuler tes demandes et à vérifier les résultats.
Est-ce que je peux modifier un bloc après l'avoir généré ?
Oui. Tu peux utiliser les paramètres présents dans l'éditeur et demander des ajustements pendant la génération. Le fichier Liquid du bloc peut aussi être modifié directement dans le code du thème, mais cette dernière option nécessite des connaissances techniques. Attention, une fois que tu as sauvegardé ton thème, tu ne peux plus modifier le bloc via le générateur de prompt.
Est-ce qu'un prompt plus long donne nécessairement de meilleurs résultats ?
Non. Les détails sont utiles lorsqu'ils permettent de mieux expliquer le résultat souhaité. Mais ajouter des fonctionnalités inutiles ou mélanger toutes les instructions dans un même paragraphe peut compliquer la génération.
Un prompt structuré et adapté au besoin sera généralement plus utile qu'un énorme prompt rempli de paramètres dont tu ne te serviras jamais.
OUTIL GRATUIT -> Améliore ton Shopify en 1h
🤔Avais-tu réalisé que le jour où tu as mis ton Shopify en ligne, c'était seulement le début de ton aventure ?
Convaincre un client d’acheter n’est pas chose facile. En fait, ça ne prend pas grand-chose pour que le doute s’installe et qu’il décide finalement d’acheter ailleurs. 💨💨💨
💥 C’est pourquoi j’ai créé ce guide. En 1h, on va faire le tour de ton site et corriger les principaux problèmes que je vois régulièrement chez les entreprises que j’accompagne.
Les robots faussent tes visites et ton taux de conversion Shopify ? Voici comment les repérer, filtrer tes rapports et créer un tableau de bord Analytics plus fiable.
Quel transporteur choisir pour ta boutique Shopify ? Compare Machool, ClickShip, Postes Canada, Purolator, OGALO et d’autres solutions d’expédition au Québec.