Aller au contenu

Shopify - Comment créer un champ metafield ?

Découvrez notre tutoriel

Shopify - Comment créer un champ metafield ?

Introduction

Shopify propose un système de metafields permettant d'enregistrer des informations spécialisées à l'échelle de la plupart des entités natives du CMS : produits, collections, pages CMS, clients, commandes, variantes, articles de blog ou même la boutique elle-même. Via des adaptations frontend, il est alors possible d'afficher des données supplémentaires sur le thème que vous avez sélectionné (Documentation officielle). Concrètement, un metafield est un champ personnalisé que vous greffez sur une ressource Shopify lorsque les champs natifs ne couvrent pas votre besoin métier : pays de fabrication, fiche technique, liste d'ingrédients, certifications, durée de garantie, fichiers PDF complémentaires, prix B2B, etc.

Chez rou9e, nous constatons que la majorité des boutiques que nous reprenons en main exploitent moins de 10% du potentiel des metafields. C'est pourtant le levier le plus simple pour transformer une fiche produit générique en véritable contenu structuré, sans installer une application tierce payante et sans toucher au cœur du thème. Pour un panorama plus large des spécificités de la plateforme, nous vous renvoyons vers notre guide complet sur Shopify en français, qui replace les metafields dans l'écosystème global du CMS.

Avant d'attaquer la pratique, il est utile de distinguer deux notions. Premièrement, la définition de metafield : c'est un schéma global, créé dans Settings > Custom data, qui décrit le champ (nom, type, validations) et le rend disponible sur toutes les ressources d'un même type. Deuxièmement, le metafield ad hoc : c'est une valeur enregistrée directement sur une ressource sans définition préalable, souvent via l'API ou via une application tierce. Nous recommandons systématiquement la première approche : les définitions sont visibles dans l'admin, exploitables dans l'éditeur de thème via les sources dynamiques, et beaucoup plus simples à maintenir dans la durée.

Côté types de valeurs, Shopify offre un éventail large : texte sur une ligne, texte multi-lignes, nombre entier ou décimal, vrai/faux, date et heure, dimension, poids, volume, monnaie, URL, couleur, note, fichier (image, PDF, vidéo), JSON pour les structures complexes, et surtout les références qui pointent vers un autre produit, une autre collection, une variante, une page, un métaobjet ou un fichier média. Cette dernière famille est précieuse : elle évite la duplication de données et garde l'ensemble cohérent. Sur une boutique de cosmétiques que nous accompagnons, le metafield "Ingrédients" pointe par exemple vers un métaobjet réutilisé sur plusieurs références au lieu de recopier la liste à chaque création de produit.

Les métaobjets justement constituent l'évolution récente de la mécanique : il s'agit d'entités personnalisées que vous modélisez librement (taille S/M/L, logo de certification, témoignage client, ingrédient cosmétique, point de vente physique). Combinés aux metafields de type "référence", ils ouvrent la porte à une structuration de contenu avancée sans quitter l'admin Shopify. Notre équipe les utilise notamment pour gérer des contenus multilingues partagés entre plusieurs marchés, des listes de revendeurs ou des bibliothèques de matériaux pour des marques de mode et de décoration.

En amont de toute création, nous insistons toujours sur une phase courte de cadrage : lister les besoins métier, identifier les champs natifs déjà disponibles, décider quels champs justifient une définition globale et lesquels resteront ponctuels. Ce travail d'inventaire évite de multiplier les champs redondants et facilite la documentation technique remise à votre équipe catalogue. Sur une boutique mature, il n'est pas rare de gérer 20 à 40 définitions de metafields réparties entre produits, collections, pages CMS et clients. Sans gouvernance minimale, le backend devient rapidement illisible et les saisies finissent par dériver.

Création d'un metafield "Pays de fabrication" pour les produits

Pour créer un champ méta-données dans Shopify, il faut commencer par se connecter au backend de votre boutique. Vous irez ensuite dans "Settings" via la barre latérale gauche, puis vous accéderez à la première étape de configuration via le lien "Custom data" (anciennement intitulé "Metafields") en bas de la nouvelle sidebar. Il vous faudra ensuite sélectionner l'entité concernée, ici les produits :
Vous arriverez sur un nouvel écran listant les définitions déjà existantes pour cette ressource :
Nous cliquerons alors sur le bouton "Add definition" pour arriver sur un dernier écran de configuration que nous diviserons en plusieurs parties. Imaginons que nous souhaitions ajouter un nouveau metafield permettant d'indiquer le pays de fabrication d'un produit. Nous commençons par renseigner les trois champs qui identifient notre metafield :
Le champ Name ajoute un label affiché dans le backend, lisible par votre équipe catalogue et repris par défaut dans l'éditeur de thème. Le couple Namespace and key identifie le metafield dans le code et dans l'API : conservez un namespace cohérent par projet (par exemple "custom" ou le nom court de la marque), car il devient ensuite très coûteux à renommer une fois les données saisies. La Description est purement informative côté admin mais s'avère précieuse pour vos collaborateurs et pour vos prestataires, qui retrouvent rapidement la finalité du champ sans avoir à fouiller la documentation projet.

Il faut ensuite sélectionner le type de metafield en cliquant sur "Select content type", qui affiche la liste des possibilités :
Difficile de couvrir tous les types de manière exhaustive, le point clé à retenir est qu'une fois le metafield enregistré, son type devient immuable. Prudence sur votre choix initial donc, d'autant que celui-ci déterminera le format des saisies dans le backend, ainsi que les contraintes appliquées. C'est d'ailleurs l'objet des "Validation / Rules" en bas de page, ici illustrées pour un "Single Line Text" :
La longueur minimale et maximale verrouille le format attendu et évite qu'un opérateur saisisse un paragraphe entier dans un champ destiné à un simple code pays. L'expression régulière ouvre la voie à des contrôles plus poussés, utiles pour des références internes normalisées ou des codes produit propres à votre catalogue. La case Allow read requests from the Storefront API rend la valeur accessible aux services tiers et au thème : pensez à la cocher dès que la donnée doit s'afficher côté frontend ou être consommée par une application headless. Enfin, l'option Use field and values to create automated collections permet d'utiliser le metafield comme critère dans vos collections Shopify automatiques, ce qui ouvre la voie à des regroupements puissants (par fournisseur, par certification, par millésime).

Une fois la définition validée, le champ apparaît automatiquement en bas de chacune des fiches produits, prêt à être renseigné par votre équipe :
Pour exposer la valeur sur le thème, deux options coexistent. La première, sans code, consiste à utiliser les sources dynamiques dans l'éditeur de thème : sur un bloc texte, un bouton "Insérer une source dynamique" propose directement les metafields disponibles pour la ressource affichée. La seconde, en Liquid, repose sur la syntaxe {{ product.metafields.namespace.key }} (ou la version équivalente pour collection, customer ou page). Nous privilégions presque toujours la voie Liquid dès que le rendu demande une mise en forme particulière, une condition d'affichage ou une boucle sur des références multiples.

En Liquid, la valeur retournée dépend du type : un champ texte ressort en chaîne brute, un champ de type "référence" ressort un objet complet sur lequel vous pouvez chaîner les propriétés (par exemple product.metafields.custom.fabricant.value.title pour récupérer le titre d'un métaobjet lié). Pour les champs de type fichier ou image, vous récupérez directement l'objet média et pouvez en générer une miniature optimisée. Pour les listes (plusieurs certifications, plusieurs labels), une simple boucle Liquid permet de parcourir les éléments un par un. Nous documentons systématiquement ces snippets dans le wiki interne du projet, ce qui évite de réinventer la roue à chaque évolution de thème.

Les cas d'usage que nous installons le plus fréquemment chez nos clients sont assez parlants : une véritable fiche technique sur un produit électronique (poids, dimensions, garantie, normes), une liste d'ingrédients pour une marque de cosmétiques bio, des logos de certification (BIO, AB, Vegan) gérés via des metafields de référence vers des fichiers média, des grilles de prix B2B exposées uniquement à certains segments clients, ou encore du contenu multilingue piloté via des métaobjets pour les boutiques qui adressent plusieurs marchés. Pour un projet de migration Shopify depuis une autre plateforme, ce sont quasi toujours les metafields qui absorbent les attributs personnalisés de l'ancienne solution et garantissent que rien ne se perd au passage.

Quelques pièges méritent d'être anticipés. Le premier, déjà évoqué, concerne les collisions de namespace : si vous utilisez "custom" partout, vous risquez un jour de chevaucher un champ ajouté automatiquement par une application tierce. Sur les boutiques que nous accompagnons, nous réservons un namespace dédié au projet et nous laissons "custom" pour les besoins ponctuels. Le second concerne les cascades de suppression : supprimer une définition de metafield purge irrémédiablement les valeurs associées sur l'ensemble des ressources. Une sauvegarde via export CSV ou via l'API est indispensable avant toute opération de nettoyage. Le troisième touche aux performances : sur une page de collection affichant des centaines de produits, chaque metafield de référence supplémentaire peut alourdir le rendu côté serveur. Nous limitons donc les références imbriquées sur les pages à fort trafic et préférons charger les données complémentaires via une section dédiée, ce qui rejoint les bonnes pratiques décrites dans notre guide SEO Shopify.

Sur la dimension SEO justement, exposer une fiche technique détaillée via des metafields apporte un signal sémantique précieux aux moteurs et limite le syndrome de la fiche produit trop maigre. Nous combinons souvent les valeurs en JSON-LD pour générer un rich snippet "Product" enrichi (marque, GTIN, matériau), ce qui améliore le taux de clic depuis les SERP sans alourdir le rendu visible. Les metafields exposés via la Storefront API peuvent d'ailleurs être indexés par Google dès qu'ils apparaissent dans le HTML rendu : c'est généralement souhaitable, mais peut devenir contre-productif si vous publiez des données internes ou des notes commerciales. Nous auditons systématiquement ce point lors d'une recette de mise en production.

Si la mise en place vous semble obscure, pas de panique : c'est en général notre équipe qui orchestre la modélisation, la création des définitions, l'exposition Liquid et les éventuels métaobjets. De votre côté, vous n'avez qu'à remplir les différents champs sur vos fiches produits Shopify, en bas de page de ces dernières. Pour cadrer un chantier de structuration de catalogue ou une refonte complète, nous restons disponibles via notre offre d'accompagnement digital sur mesure.

Adrien FERREIRA
  • Shopify
  • Metafields
  • Tutoriel

Cet article vous a donné des idées pour votre projet ?

Autres articles de blog qui pourraient vous intéresser