Shopify a introduit les metafields lors de l'Unite 2021 et les a déployés au début de l'année 2022. Les metafields sont un excellent moyen d'ajouter des paramètres supplémentaires aux produits de votre catalogue et de les afficher sur votre boutique.
Les metaobjects sont encore relativement récents, ayant été introduits en février 2023. Vous pouvez les considérer comme des objets personnalisés dotés de plusieurs paramètres ou champs. Personnellement, j'utilise toujours la règle suivante :
- S'agit-il d'un paramètre ou d'une valeur produit partagé entre plusieurs produits ? Si oui, utilisez un metafield.
- S'agit-il d'un contenu (bloc, section, image) affiché sur différents fichiers de modèles de la boutique ? Si oui, utilisez un metaobject pour le gérer.
Ce tutoriel vous montrera comment les utiliser sur votre boutique Shopify sans programmation ni modification de code. Veuillez noter que vous devez utiliser un thème 2.0.
Quelle est la différence entre les metafields et les metaobjects ?
Les metafields stockent une simple information comme du texte, une couleur, un produit, une page, etc., que vous pouvez assigner à n'importe quel produit, collection, page ou article de blog de votre boutique. L'inconvénient est que vous devez saisir la valeur pour chacun séparément. Et si vous souhaitez la mettre à jour, vous devez également le faire individuellement pour chaque élément.
Le cas d'utilisation typique consiste à afficher des informations supplémentaires sur vos pages de détails produit, comme les dimensions, les matériaux, les dates de livraison ou autres.
Les metaobjects sont plus complets que les metafields, et chaque metaobject peut contenir plusieurs metafields. Ils sont souvent utilisés pour afficher plusieurs paramètres ou du contenu répété dans votre boutique. L'avantage des metaobjects est que vous pouvez les modifier en une seule fois pour toutes les instances où ils sont utilisés.
L'utilisation des metaobjects est tout à fait pertinente si vous avez un bloc ou une section sur votre boutique affiché(e) sur plusieurs pages.
Comment ajouter des paramètres supplémentaires aux pages de détails produit via les metafields
Imaginons que vous ayez une boutique de meubles. Chaque produit possède des paramètres partagés différents (hors variantes). Par exemple, les chaises ont 1. un matériau, 2. des designers et 3. des dimensions uniques que vous souhaitez afficher sur votre page produit.
Étape 1 – Création d'un metafield dans l'administration de votre boutique
Commençons par préparer les trois metafields dans l'administration de la boutique :
- Allez dans l'administration de votre boutique > Paramètres > Données personnalisées
- . Dans la section Metafields, sélectionnez Produits et cliquez sur Ajouter une définition
- . Saisissez le nom du metafield (ex. : Matériau) et sélectionnez le type (ex. : Texte sur une ligne)
Une fois les trois metafields créés, il est temps de les ajouter à vos chaises.
Étape 2 – Ajouter des méta-champs aux produits
Maintenant que vos méta-champs sont définis, ajoutons-les à vos produits :
- Accédez à l'administration de votre boutique > Produits, puis sélectionnez le produit pour lequel vous souhaitez définir ces méta-champs
- Sur la page du produit dans votre administration, faites défiler jusqu'en bas pour voir les méta-champs disponibles
- Saisissez les données pertinentes pour ce produit spécifique, puis cliquez sur Enregistrer
Étape 3 – Afficher les méta-champs sur la page de détail du produit
Tout est prêt, affichons maintenant les informations des méta-champs sur la page produit :
- Accédez à l'administration de votre boutique > Boutique en ligne > Thèmes > Personnaliser
- Dans le menu de modèle en haut au centre, sélectionnez > Produits > Produit par défaut
- Ajoutez un nouveau bloc sous la page Produit, par exemple, Texte
- Ajoutez le contenu des méta-champs en cliquant sur l'icône de base de données (« burger »)
Vous pouvez désormais manipuler les méta-champs et les afficher comme bon vous semble.
Notre conseil – Utilisez des choix prédéfinis pour gagner du temps
Nous vous conseillons d'utiliser l'option « Limiter aux choix prédéfinis » lors de la définition du méta-champ, cela vous fera gagner un temps précieux. Au lieu de saisir manuellement la valeur pour chaque produit, vous pourrez simplement la sélectionner dans le menu déroulant.
Comment afficher du contenu dynamique sur les pages produits/collections à l'aide des méta-objets
Les méta-objets sont plus complexes et vous permettent d'ajouter du contenu dynamique à votre boutique, que vous pouvez modifier ou mettre à jour depuis un emplacement unique, un peu comme dans un CMS. Imaginez que vous souhaitiez mettre en avant un designer différent sur chaque page de collection, non seulement par son nom, mais via une section complète incluant nom, description, couleurs, images, etc.
À l'époque des anciens thèmes Shopify 1.0, vous pouviez le faire en créant différents modèles. Cela fonctionne toujours, mais c'est très chronophage, incohérent et inefficace. Avec les méta-objets, vous pouvez créer un objet unique et le connecter à différents produits et pages.
Étape 1 – Créer un méta-objet dans l'administration de votre boutique
Commençons par préparer le méta-objet dans l'administration de la boutique :
- Accédez à l'administration de votre boutique > Paramètres > Données personnalisées
- Dans la section Méta-objets, cliquez sur Ajouter une définition
- Saisissez le nom du méta-objet (par ex. Designer) et ajoutez des (méta-)champs
Dans notre exemple, chaque designer possède un Nom (texte sur une ligne), une Description (texte enrichi), une couleur d'arrière-plan et de texte (couleur), ainsi qu'une image principale et secondaire (fichier).
Étape 2 – Ajouter des entrées de méta-objet
Une fois le méta-objet créé, vous devez le remplir avec des données :
- Accédez à l'administration de votre boutique > Paramètres > Données personnalisées
- Dans la section Méta-objets, sélectionnez le méta-objet existant
- Cliquez sur Plus d'actions dans le coin supérieur droit et sélectionnez Ajouter une entrée
- Remplissez tous les champs requis, enregistrez, puis continuez avec une nouvelle entrée (si nécessaire)
Étape 3 – Préparer le méta-champ de collection/produit
C'est ici que les choses se compliquent. Pour connecter un méta-objet à une collection ou un produit, vous devez d'abord créer un méta-champ de type méta-objet. 🤯
- Accédez à l'administration de votre boutique > Paramètres > Données personnalisées
- Dans la section Méta-champs, sélectionnez Collections, puis cliquez sur Ajouter une définition
- Saisissez le nom du méta-champ (ex: Designer), sélectionnez le type (ex: Méta-objet), sélectionnez Référence, qui doit correspondre à un méta-objet existant, puis enregistrez
Une fois la connexion de référence établie, vous devriez être en mesure d'assigner un designer spécifique à chaque collection.
Étape 4 – Ajouter le méta-objet aux collections
Tout est défini, ajoutons maintenant le méta-objet à vos collections :
- Accédez à l'administration de votre boutique > Produits > Collections, et trouvez la collection pour laquelle vous souhaitez définir le méta-objet
- Sur la page de la collection dans votre administration, faites défiler jusqu'en bas pour voir les méta-champs disponibles
- Cliquez sur le champ vide à côté de votre méta-champ, sélectionnez l'une des entrées existantes, puis cliquez sur Enregistrer
Étape 5 – Afficher le méta-objet sur la page de collection
Tout est prêt, affichons maintenant les informations du méta-objet sur les pages de collection :
- Accédez à l'administration de votre boutique > Boutique en ligne > Thèmes > Personnaliser
- Dans le menu de modèle en haut au centre, sélectionnez > Collections > Collection par défaut
- Ajoutez une nouvelle section comme espace réservé et connectez-la au méta-objet en cliquant sur l'icône de base de données ("burger")
- Connectez les éléments pertinents de la section ou du bloc aux entrées appropriées de votre méta-objet
Vous pouvez maintenant jouer avec le modèle et assigner différentes entrées à différentes collections. Résultat : vous aurez un contenu varié sur plusieurs pages de collection tout en utilisant un seul fichier de modèle.
Conclusion et résultats finaux
Comprendre les méta-champs et les méta-objets dans Shopify est assez complexe et demande du temps. Commencez par des éléments simples et itérez. Une fois que vous aurez pris le coup de main, vous serez étonné de leur puissance et du temps de travail manuel qu'ils peuvent vous faire économiser dans la gestion de votre boutique Shopify.
Le résultat ci-dessus montre un modèle de page produit unique capable d'afficher des informations et un designer différents pour chaque article. De plus, la gestion du contenu des metaobjects se fait désormais depuis un emplacement centralisé, vous évitant ainsi de mettre à jour chaque produit manuellement.
