Section Shopify personnalisée : comment la rendre réutilisable
Section Shopify personnalisée : comment la rendre réutilisable
Réponse directe
Une section Shopify sur mesure devient réutilisable quand elle ne dépend plus des textes, des couleurs, des identifiants produits et des règles commerciales de la boutique pour laquelle elle a été créée. Ces choix doivent être déplacés vers le customizer Shopify, la logique métier doit être séparée de l’apparence et l’installation doit pouvoir être réalisée sans retrouver les intentions du développeur dans le code.
Le sujet n’est donc pas de copier un fichier Liquid d’un thème à un autre. Copier le fichier ne fait que déplacer les dépendances. Le vrai travail consiste à identifier tout ce qui appartient au premier contexte, puis à décider ce qui doit devenir configurable, ce qui doit rester dans le code et ce qui nécessite une validation sur le thème cible.
Le chantier ScratchToReveal d’ONORA illustre cette différence. L’effet visible est une mécanique de cartes à gratter. Le produit réutilisable est une section autonome avec des paliers, des cartes, des récompenses, des réglages visuels, des actions panier et une documentation d’installation. La version 0.1.0 est annoncée comme prête à tester sur des thèmes Dawn-like, pas comme universellement compatible.
Pourquoi une fonctionnalité qui marche n’est pas encore un produit
Une feature sur mesure peut être parfaitement fonctionnelle et rester impossible à réemployer correctement.
Elle contient souvent des hypothèses invisibles : un nom de produit écrit dans le code, une couleur liée à une charte précise, un identifiant de variante, un nombre fixe de cartes, une règle promotionnelle propre à une campagne ou un comportement du panier adapté à un seul thème.
Tant que ces hypothèses ne sont pas retirées, le marchand dépend d’une intervention technique pour chaque changement. La section fonctionne, mais elle ne constitue pas encore une brique exploitable par une autre boutique.
Pour une TPE ou une PME, cette distinction a des conséquences concrètes. Une section configurable réduit les petites demandes de maintenance, accélère les campagnes et rend les décisions commerciales moins dépendantes du prestataire qui a écrit la première version. Elle ne supprime pas le besoin de tests, mais elle déplace les choix ordinaires au bon endroit : l’éditeur de thème.
Les cinq vérifications avant de réutiliser une section Shopify
1. Retirer les données propres à la boutique d’origine
Commencez par chercher tout ce qui n’aurait aucun sens dans une autre boutique : textes, URLs, noms de produits, identifiants de variantes, codes promotionnels, seuils, couleurs, images et messages d’erreur.
Chaque valeur doit suivre l’une de ces trois destinations : un réglage dans le customizer, une valeur technique interne réellement stable ou une donnée transmise par Shopify au moment de l’exécution.
Cette étape évite la fausse réutilisabilité. Un fichier peut être autonome sur le plan technique tout en transportant encore le contexte commercial de son premier usage.
2. Donner au marchand les bons réglages, pas tous les réglages
La documentation officielle de Shopify permet de déclarer des settings et des blocks dans le schema d’une section. Le marchand peut ainsi personnaliser et réorganiser le contenu depuis l’éditeur de thème.
Cela ne signifie pas qu’il faut exposer chaque variable. Un customizer surchargé devient une autre forme de complexité. Il faut surtout rendre accessibles les décisions que le marchand peut légitimement modifier : titres, couleurs, paliers, récompenses, cartes, produits associés et comportement attendu après l’interaction.
ScratchToReveal expose trois paliers et jusqu’à six cartes configurables. Cette structure donne assez de souplesse pour plusieurs opérations commerciales sans transformer l’éditeur en panneau d’administration technique.
3. Séparer l’effet visuel, la règle commerciale et l’action panier
Une animation n’est pas une mécanique commerciale complète.
Dans une carte à gratter, trois couches coexistent : l’interaction visuelle, la règle qui détermine ce qui peut être révélé et l’action qui suit la révélation. Cette dernière peut afficher une récompense, appliquer un code existant ou ajouter une variante au panier.
La séparation est importante pour les tests. Un effet visuel peut fonctionner alors que l’identifiant de variante est incorrect, que le produit est indisponible ou que le thème ne rafraîchit pas le panier comme prévu.
L’API Ajax Cart de Shopify permet d’ajouter des variantes et de mettre à jour le panier pendant la session du visiteur. Shopify recommande notamment des URLs tenant compte de la langue de la boutique. Une section réutilisable doit donc traiter les réponses d’erreur et ne pas considérer qu’une animation réussie prouve que l’action commerciale a abouti.
4. Documenter l’installation et le contrôle
Un fichier sans procédure d’installation reste un livrable dépendant de son auteur.
Le minimum utile précise où placer la section, comment l’ajouter dans le customizer, quels réglages sont obligatoires et quels scénarios tester. Le kit ScratchToReveal réunit la section Liquid, un guide HTML et un template de page optionnel. Cette documentation fait partie du produit autant que le code.
La recette doit couvrir au moins le mobile et le desktop, les cartes verrouillées, le seuil de révélation, les fenêtres de résultat, l’ajout au panier, les variantes cadeau et les codes de réduction configurés. Il faut également vérifier le comportement lorsque le produit est indisponible ou que le panier refuse une quantité.
5. Annoncer la frontière de compatibilité
Une compatibilité non testée n’est pas une compatibilité acquise.
Les thèmes Shopify peuvent modifier la structure du panier, les événements JavaScript et la manière dont certaines sections sont rafraîchies. Une section autonome réduit les dépendances, mais ne garantit pas qu’elle se comportera de façon identique partout.
La bonne pratique consiste à publier une frontière claire : thèmes réellement testés, thèmes proches supposés compatibles et points qui nécessitent encore une validation. Dire qu’une V0.1 est prête à tester sur des thèmes Dawn-like est plus utile que d’annoncer une compatibilité universelle impossible à défendre.
Ce que la réutilisabilité change économiquement
Transformer une feature en brique réutilisable demande du travail supplémentaire au départ. Il faut généraliser les réglages, isoler les actions, écrire la documentation et construire une recette de test.
Mais ce travail crée un actif. La prochaine installation ne recommence pas depuis une page blanche. Les améliorations peuvent être réintégrées dans un socle commun. Les limites deviennent visibles et les demandes de personnalisation peuvent être distinguées des corrections du produit.
Pour le marchand, l’intérêt n’est pas seulement technique. Il peut changer une offre, une couleur ou une récompense sans ouvrir un fichier Liquid. Pour le studio ou le développeur, la maintenance devient plus prévisible. Pour les deux parties, la discussion porte davantage sur la mécanique commerciale que sur la recherche d’une valeur cachée dans le code.
Il reste une règle essentielle : ne pas confondre réutilisabilité et performance commerciale. ScratchToReveal ne dispose pas encore d’un gain de conversion mesuré. L’interaction peut être testée, mais son effet doit être observé avec des données réelles : participation, progression vers le panier, utilisation de la récompense et éventuels abandons.
Le produit commence quand le code n’a plus besoin de son auteur
Une section Shopify réutilisable ne se reconnaît pas à la sophistication de son animation. Elle se reconnaît à la quantité d’hypothèses locales qui ont été retirées, à la clarté de ses réglages et à l’honnêteté de sa frontière de compatibilité.
Le code fait fonctionner la feature. Le travail de produit permet à une autre boutique de l’utiliser, de la configurer et de la tester sans devoir reconstituer l’intention de la personne qui l’a créée.
