Metafields Shopify : des fiches produit sans application

Les metafields font la différence entre une fiche produit que vous assemblez à la main à chaque fois et une fiche produit qui se remplit toute seule. Ils vous permettent d’ajouter vos propres champs structurés – matières, dimensions, conseils d’entretien, guide des tailles, liste d’ingrédients – à chaque produit, et de laisser votre thème les afficher exactement au même endroit, exactement dans le même style, sur tous. Sans application, sans code, sans HTML copié-collé dans un champ description.

Ce qu’est vraiment un metafield

Un metafield est une donnée supplémentaire nommée, rattachée à un objet Shopify – un produit, une collection, une page, un client. Il possède un namespace, une clé et un type. Ensemble, le namespace et la clé forment le handle que vous utilisez dans le thème : custom.composition, custom.size_guide, custom.care.

Le type est la partie que l’on sous-estime. Un champ single line text ne se comporte pas comme un multi-line text, et ni l’un ni l’autre ne se comportent comme un integer, un file, une list of products ou un rich text. Choisir le bon type, c’est ce qui vous évite d’enregistrer « 200 » sous forme de texte et de ne plus pouvoir trier dessus, ou de stocker une image sous forme d’URL qui casse le jour où vous renommez le fichier.

En créer un, étape par étape

Dans votre admin Shopify, allez dans Settings → Custom data → Products, puis Add definition.

Donnez-lui un nom clair (« Composition ») et vérifiez le handle que Shopify propose en dessous – c’est lui que votre thème va appeler, alors gardez-le en minuscules et prévisible, du type custom.composition. Choisissez le type : multi-line text pour un paragraphe, single line text pour une étiquette courte, integer pour un nombre que vous voudrez trier ou comparer, file pour un PDF ou une image, et rich text seulement quand vous avez réellement besoin de mise en forme à l’intérieur de la valeur.

L’étape qui piège tout le monde : dans les réglages d’accès de la définition, assurez-vous que l’accès storefront est activé. Un metafield sans accès storefront existe dans l’admin mais reste invisible pour votre thème, et vous passerez vingt minutes convaincu que votre Liquid est cassé alors que la donnée n’est tout simplement pas exposée.

Une fois la définition créée, le champ apparaît en bas de chaque fiche produit dans l’admin, dans un bloc Metafields. Vous le remplissez produit par produit.

Les afficher sans toucher au code

Vous n’avez pas toujours besoin d’un développeur. Dans l’éditeur de thème, beaucoup de blocs – texte, texte enrichi, et blocs metafield dédiés dans les thèmes récents – acceptent les sources dynamiques : cliquez sur la petite icône de base de données à côté d’un champ et choisissez votre metafield. Le bloc affiche alors la valeur de chaque produit, automatiquement.

C’est la bonne approche pour les cas simples : une ligne de matières, un conseil d’entretien, un pays d’origine. Sa limite, c’est la mise en page. Les sources dynamiques affichent la valeur en texte là où vous avez posé le bloc ; elles ne savent pas transformer un CSV de mesures en tableau, ni une liste de produits en rangée de cartes stylées.

Les lire en Liquid

Dès que c’est structuré, c’est le thème qui lit le metafield directement. Le schéma est toujours le même, et toujours protégé pour que les produits sans le champ n’affichent pas un titre vide :

{% if product.metafields.custom.composition != blank %} … {{ product.metafields.custom.composition }} … {% endif %}

Trois détails à connaître. Pour les metafields typés, vous voulez souvent .value pour récupérer la donnée elle-même plutôt que l’objet – en particulier pour les fichiers, les listes et les références. Pour le multi-line text, passez la valeur dans newline_to_br pour que les retours à la ligne survivent en HTML. Et pour un type liste – disons une liste de produits associés – vous bouclez sur .value comme sur n’importe quel tableau.

Un thème bien construit fait ce travail pour vous et documente simplement les handles qu’il attend : il ne vous reste qu’à créer les définitions avec les mêmes noms et à les remplir.

Trois usages qui valent le détour

Le guide des tailles en données. Stockez un petit CSV dans un champ multi-line text – la première ligne pour les en-têtes, puis une ligne par taille – et laissez le thème le rendre sous forme de tableau. Chaque produit a son tableau correct, et modifier un produit ne risque pas de casser la mise en page d’un autre. Ajoutez un second champ pour la taille portée par le mannequin, et le thème peut surligner cette ligne.

Les blocs entretien et composition. Deux champs, affichés en sections dépliables sous le bouton d’achat. Ils gardent la description courte et lisible tout en rendant le détail accessible à qui le cherche – et ils imposent une cohérence sur tout le catalogue, ce qui fait que cinquante produits ressemblent enfin à une seule marque.

Éditions et provenance. Un champ integer pour la taille de l’édition, un autre pour le numéro de la pièce, un champ texte pour la saison ou le lot. Des nombres que vous pouvez afficher en badges, trier, et utiliser dans les filtres de collection. C’est comme ça qu’un catalogue commence à ressembler à des archives plutôt qu’à une liste.

Les erreurs fréquentes

Utiliser le namespace custom pour tout est parfaitement normal – mais gardez des clés descriptives, parce que vous ne vous souviendrez pas de ce que voulait dire custom.field_2. Ne stockez pas de HTML dans un champ texte brut en espérant qu’il s’affiche : utilisez rich text, ou laissez le thème faire la mise en forme. Ne créez pas de metafield pour une information que Shopify gère déjà nativement – SKU, poids, code-barres, fournisseur et type de produit existent déjà, et les dupliquer crée deux sources de vérité. Et avant de construire quoi que ce soit sur un metafield, vérifiez le réglage d’accès storefront, parce que cette seule case explique la plupart des questions « mon metafield ne s’affiche pas » jamais posées.

Par où commencer

Choisissez l’information que vous retapez aujourd’hui dans chaque description produit. Créez-lui une définition, remplissez-la sur cinq produits, et affichez-la – via une source dynamique si votre thème le permet, ou en demandant quatre lignes de Liquid à qui s’occupe de votre thème. Puis passez à la suivante. En un après-midi, vos fiches produit cessent d’être des documents que vous rédigez pour devenir des fiches que vous remplissez, ce qui est à la fois plus rapide et bien plus cohérent.