L'intégration de Shopify Sidekick au cœur de l'éditeur de thème (Theme Editor) a profondément renouvelé la manière dont les marchands ajustent l'agencement visuel et la mise en page de leur boutique. Grâce à des requêtes formulées en langage naturel, Sidekick élimine la nécessité de naviguer dans d'interminables panneaux de configuration, de réorganiser les blocs à la main ou d'ajuster les couleurs élément par élément. Néanmoins, une question fondamentale se pose fréquemment : jusqu'où cet assistant IA peut-il se substituer à un développeur front-end, et quelles sont les limites strictes imposées par le code Liquid sous-jacent ?
Comprendre avec précision le périmètre d'action de Sidekick et les frontières techniques du code Liquid sur mesure est indispensable pour faire évoluer sa boutique sans altérer l'intégrité de son thème.
Comment les marchands utilisent Sidekick dans l'éditeur de thème
Dans l'éditeur de thème, Sidekick se comporte comme un copilote interactif connecté à la couche de configuration du thème. Plutôt que d'enchaîner les clics dans les menus latéraux, le marchand formule simplement des consignes pour modifier l'apparence et l'organisation de ses pages.
1. Accès et prise en compte du contexte
- Lancer Sidekick : L'outil s'ouvre d'un clic sur l'icône Sidekick dans la barre supérieure de l'éditeur ou à l'aide du raccourci clavier
Ctrl + .(Cmd + .sur macOS). - Sensibilité au contexte : Sidekick identifie immédiatement le modèle de page en cours d'édition (page d'accueil, fiche produit, page de collection) ainsi que la section ou le bloc sélectionné. Sauf demande explicite de modification globale, les instructions s'appliquent directement au composant actif.
2. Personnalisation du style et de l'aspect visuel
Sidekick traduit les demandes en langage courant en paramètres natifs prévus par le schéma (schema) du thème :
- Palettes et jeux de couleurs : Des demandes telles que « Passe le jeu de couleurs d'arrière-plan de cette section en mode sombre » ou « Applique la couleur d'accentuation aux boutons principaux » mettent à jour les valeurs de couleur du thème.
- Typographie et espacements : Des requêtes comme « Passe la police du titre en serif et augmente l'espacement vertical » ajustent les polices prédéfinies et les curseurs de marges internes.
- Alignement et disposition : Des commandes comme « Centre le titre et le sous-titre de la bannière principale » ou « Affiche les fiches produits sur une grille de 4 colonnes sur ordinateur » activent les options de mise en page existantes.
3. Gestion de la structure et organisation des sections
En plus de l'aspect purement graphique, Sidekick modifie l'architecture des modèles JSON :
- Réorganisation des sections : Une consigne comme « Déplace la section des avis clients au-dessus de la collection en vedette » réordonne la hiérarchie verticale sans manipulation manuelle.
- Visibilité des éléments : Des instructions comme « Masque la barre d'annonces sur le modèle de produit » ou « Supprime le bouton d'action secondaire » contrôlent l'affichage sans avoir à chercher les interrupteurs dans les menus.
- Gestion des intégrations d'applications (App Embeds) : Sidekick peut activer, désactiver ou ajuster les paramètres de base des extensions installées sur la boutique.
4. Génération de contenu et création de blocs de thème
L'éditeur intègre deux fonctionnalités génératives complémentaires :
- Rédaction de contenu dans les champs : En cliquant sur l'icône de génération de texte (icône Magic) présente dans certains champs, Sidekick rédige des titres, sous-titres ou bannières promotionnelles adaptés au ton de la marque.
- Génération automatique de blocs de thème : Depuis Ajouter un bloc > Générer, le marchand décrit le composant souhaité (par exemple : « Crée un bloc de témoignage avec photo client, citation, nom et note de 5 étoiles »). Sidekick crée alors un fichier Liquid autonome dans le dossier
blocks/du thème et expose ses options de personnalisation dans le panneau latéral.
Un flux de travail sécurisé : prévisualisation, révision et annulation
Aucune modification générée par Sidekick n'est publiée en ligne à l'insu du marchand :
- Prévisualisation en temps réel : Les ajustements de style et les blocs créés apparaissent d'abord dans la fenêtre d'aperçu de l'éditeur de thème.
- Contrôle multi-appareils : Le marchand vérifie le rendu sur ordinateur et sur mobile, puis peut affiner le résultat avec de nouvelles instructions si nécessaire.
- Effet sur l'historique d'annulation : L'exécution d'une modification par Sidekick réinitialise la pile classique du bouton « Annuler » de l'éditeur. Pour revenir en arrière, le marchand peut demander à Sidekick d'annuler sa dernière action ou restaurer un état précédent via l'historique des versions du thème (Theme history).
- Validation manuelle : Les modifications ne deviennent effectives pour les visiteurs que lorsque le marchand clique sur Enregistrer (Save). Il est fortement recommandé de tester les refontes visuelles majeures sur un thème dupliqué avant publication.
Sidekick face au code Liquid sur mesure : les frontières techniques
Sidekick est un outil d'assistance à la configuration et de génération modulaire, et non un développeur capable de restructurer le code source en profondeur.
Ce que Sidekick peut contrôler
- Paramètres de configuration du thème : Lecture et modification des valeurs déclarées dans
settings_schema.jsonet dans les balises{% schema %}des sections. - Structure des modèles JSON : Réorganisation des listes de sections et de l'ordre des blocs dans les fichiers de modèles.
- Création de blocs isolés : Génération de fichiers Liquid autonomes cantonnés au répertoire
blocks/.
Ce que Sidekick ne peut pas faire (le domaine réservé du code Liquid)
| Périmètre technique | Shopify Sidekick dans l'éditeur | Code Liquid personnalisé et développement front-end |
|---|---|---|
| Structure HTML des sections existantes | Limité aux options prévues dans le schema ; impossible de modifier l'arbre DOM des sections natives | Totale liberté pour restructurer le balisage HTML, imbriquer de nouveaux conteneurs et créer des animations |
| Réécriture des fichiers centraux du thème | Impossible d'éditer ou de refactoriser les fichiers .liquid existants dans sections/, snippets/ ou layout/ | Accès complet en lecture et écriture sur l'ensemble du thème, y compris theme.liquid |
| Logique métier et conditions complexes | Impossible d'insérer de nouvelles balises Liquid ({% if %}, {% case %}, filtres complexes ou boucles) | Développement de logique métier avancée (tarification B2B échelonnée, seuils de stock multi-entrepôts, affichage conditionnel par tag) |
| Intégration avancée de Metafields et Metaobjects | Se limite à lier des sources dynamiques dans les champs déjà configurés pour ce type de donnée | Écriture de code Liquid pour parcourir des listes de méta-objets et bâtir des tableaux comparatifs dynamiques |
| JavaScript interactif et gestion d'état | Incapable de programmer une logique interactive complexe (tiroir de panier Ajax, filtrage réactif avancé) | Développement de composants dynamiques sur mesure, intégration de l'API Cart de Shopify et écouteurs d'événements |
| API tierces et Webhooks | Restreint à l'activation et à la désactivation des App Embeds standards | Connexion à des API externes, intégration de balises de suivi personnalisées et architectures Headless |
| Support technique et garantie | L'assistance Shopify et les développeurs de thèmes ne couvrent pas les erreurs dans le code généré par l'IA | Contrôle qualité par un développeur, tests de compatibilité navigateurs, débogage et maintenance continue |
La distinction fondamentale : Configuration vs Implémentation
La frontière technique sépare ce qui relève de la configuration de ce qui relève de l'implémentation :
- Sidekick gère la configuration : Si l'auteur du thème a déjà prévu une option dans son code (sélecteur de colonnes, choix de couleur, alignement), Sidekick l'active instantanément sur commande vocale ou écrite.
- Le développeur Liquid gère l'implémentation : Si le thème ne possède pas la mécanique recherchée (par exemple un calculateur dynamique de livraison selon le statut du client B2B avec ajout automatique d'offres groupées), Sidekick ne peut pas concevoir cette logique dans les fichiers existants. Créer une telle fonctionnalité nécessite l'écriture directe de code Liquid, HTML, CSS et JavaScript.
Arbitrage : quand utiliser Sidekick et quand faire appel à un développeur Liquid
Privilégiez Sidekick pour :
- Rafraîchir rapidement des jeux de couleurs, des polices ou des marges prévus dans le thème.
- Réorganiser l'agencement de la page d'accueil à l'occasion d'opérations promotionnelles ou saisonnières.
- Rédiger rapidement des titres accrocheurs, des bandeaux d'annonces ou des argumentaires de vente.
- Ajouter des blocs modulaires et standards (avis clients, badges de confiance, liste d'engagements).
- Tester plusieurs variations esthétiques sans risque d'endommager le code source.
Faites appel à un développeur Liquid pour :
- Concevoir des pages produits sur mesure avec sélecteurs d'options complexes ou configurateurs de packs.
- Modifier les fichiers fondamentaux de la boutique (
theme.liquid, panier Ajax, extensions de paiement). - Optimiser les Core Web Vitals de Google par l'épuration du DOM et le chargement asynchrone des scripts.
- Exploiter des structures complexes de méta-objets ou synchroniser la boutique avec un ERP/CRM externe.
- Résoudre des conflits de code Liquid ou nettoyer les résidus laissés par d'anciennes applications.
En réservant à Sidekick les ajustements visuels du quotidien et en confiant les développements structurels à un expert Liquid, les marchands maximisent leur réactivité tout en garantissant la pérennité technique de leur boutique.