Les champs méta personnalisés ou données personnalisées, également connus sous le nom de Metafields, sont des outils puissants sur Shopify permettant aux propriétaires de boutiques en ligne d'ajouter des informations supplémentaires aux produits, collections, clients, commandes et autres objets. Ces champs sont essentiels pour enrichir les données des produits, améliorer l'expérience utilisateur et personnaliser les contenus affichés sur votre boutique en ligne suivant votre contenu, le tout sur mesure.
1. Pourquoi utiliser les champs méta personnalisés ?
Personnalisation des Informations Produit : Les champs méta permettent d'ajouter des détails spécifiques non pris en charge par défaut sur Shopify, tels que des guides de taille, des instructions d'entretien, des vidéos de produit, etc.
Optimisation pour le SEO : En ajoutant des informations supplémentaires comme des balises de schéma, vous pouvez améliorer le référencement de votre boutique en ligne sur les moteurs de recherche.
Amélioration de l'Expérience Client : En fournissant des informations supplémentaires pertinentes, vous aidez les clients à prendre des décisions d'achat éclairées, augmentant ainsi la satisfaction et les taux de conversion.
Gestion Avancée des Inventaires : Pour les produits avec des variations complexes, les champs méta peuvent stocker des données spécifiques comme les dimensions, les matériaux, ou les caractéristiques techniques.
Description d'un objet - Exemple avec le Produit :
Un produit sur Shopify est l'objet central de votre boutique en ligne. Il contient des informations telles que le nom, la description, le prix, les images, et les variantes. Avec les champs méta personnalisés, vous pouvez enrichir ces informations avec des détails supplémentaires spécifiques à vos besoins.
Exemples d'usage possible de champs méta :
Guide de taille : Tableau détaillant les mesures pour chaque taille.
Instructions d'entretien : Conseils pour laver et entretenir le produit.
Origine du tissu : Informations sur la provenance et la qualité du lin.
Vidéo démonstrative : Lien vers une vidéo montrant comment porter et assortir la chemise.
2. Comment créer des champs méta personnalisés sur Shopify ?
A. Rendez-vous dans Paramètres
B. Ensuite sur Données personnalisées
C. Choisissez ensuite un objet
Voici la liste des objets où l'ajout de champs méta est possible à ce jour :
Produits
Variantes
Collections
Clients
Commandes
Commandes provisoires
Entreprises
Emplacements de l'entreprise
Emplacements
Pages
Blogs
Articles de blog
Markets
Pour l'exemple nous partirons sur les Collections :
D. Ajouter une définition
E. Donnez un nom à votre donnée personnalisée
Choisissez un nom unique et explicite pour votre donnée personnalisée. Celui-ci sera utilisé pour être afficher sur votre objet lors de sa personnalisation, et permettra donc de vous y retrouver !
Vous pouvez également ajouter une description à votre guise afin d'expliciter encore plus le but de cette donnée personnalisée.
F. Par exemple Bannière de collection bureau
G. Puis Sélectionner le type
Les champs méta sur Shopify permettent de stocker une variété d'informations personnalisées pour différents objets. Voici une définition de chaque type de champ méta disponible :
Une seule ligne de texte
Champ pour entrer une courte ligne de texte, idéal pour des titres ou des sous-titres.
Exemple : "Nom du fabricant"
Plusieurs lignes de texte
Champ pour entrer plusieurs lignes de texte, idéal pour des descriptions détaillées ou des notes.
Exemple : "Description longue du produit"
Nombre entier
Champ pour entrer des nombres entiers, sans décimales.
Exemple : "Quantité en stock"
Décimale
Champ pour entrer des nombres décimaux, utile pour des mesures précises.
Exemple : "Pourcentage de réduction"
Produit
Champ pour référencer un autre produit de la boutique.
Exemple : "Produit complémentaire"
Fichier
Champ pour télécharger et lier des fichiers, comme des manuels ou des images.
Exemple : "Manuel d'utilisation PDF"
Date et heure
Champ pour entrer une date et une heure spécifiques.
Exemple : "Date et heure de lancement"
Date
Champ pour entrer une date sans l'heure.
Exemple : "Date de péremption"
Dimension
Champ pour entrer des mesures dimensionnelles (longueur, largeur, hauteur).
Exemple : "Dimensions du produit (L x l x h)"
Volume
Champ pour entrer des volumes.
Exemple : "Volume du contenu (litres)"
Poids
Champ pour entrer des poids.
Exemple : "Poids du produit (kg)"
Texte enrichi
Champ pour entrer du texte avec des options de formatage (gras, italique, etc.).
Exemple : "Texte de l'annonce publicitaire"
Collection
Champ pour référencer une collection existante dans la boutique.
Exemple : "Collection associée"
Variante de produit
Champ pour référencer une variante spécifique d'un produit.
Exemple : "Couleur spécifique du produit"
Métaobjet
Champ pour créer des objets personnalisés avec plusieurs attributs.
Exemple : "Spécifications techniques"
Page
Champ pour lier une page existante de la boutique.
Exemple : "Lien vers la page des conditions d'utilisation"
Vrai ou faux
Champ pour une valeur booléenne (oui/non).
Exemple : "En stock (oui/non)"
Couleur
Champ pour sélectionner une couleur.
Exemple : "Couleur principale du produit"
Évaluation
Champ pour une évaluation avec des étoiles ou des points.
Exemple : "Évaluation du produit (sur 5 étoiles)"
URL
Champ pour entrer une URL.
Exemple : "Lien vers la vidéo de démonstration"
Argent
Champ pour des valeurs monétaires.
Exemple : "Prix de vente conseillé"
Lien
Champ pour créer des liens vers d'autres pages ou produits.
Exemple : "Lien vers la page produit"
JSON
Champ pour entrer des données structurées en format JSON.
Exemple : "Configuration personnalisée en JSON"
Référence mixte
Champ pour référencer différents types d'objets (produits, collections, etc.).
Exemple : "Référence à une promotion spéciale ou un produit associé"
Ici nous choisirons Fichier pour permettre de mettre une image ou une vidéo en Bannière de collection bureau
On clique ensuite sur Enregistrer par la suite, les autres paramètres étant des valeurs avancées dédiées à une usage côté développement web.
Vous pouvez ensuite ajouter autant de données personnalisées que vous le souhaitez. Nous ajouterons ici une autre donnée pour la Bannière de collection mobile
3. Personnaliser vos champs méta sur vos objets
Ici nous nous rendrons sur nos collections afin de les personnaliser.
On commence donc par fermer les paramètres de la boutique.
On clique ensuite sur Produits :
Puis Collections :
Pour l'exemple nous personnaliserons ensuite 2 collections : Bagues argent et Boucle d'oreilles
En commençant par Bagues argent, vous retrouverez tout en bas vos données personnalisées (alias Champs méta) précédemment crée, où vous pouvez personnaliser vos bannières avec vos fichiers image ou vidéo.
Pour cela, cliquez en face du nom du champ méta que vous souhaitez personnaliser, puis sélectionner votre fichier.
On fait de même pour la bannière de collection bureau :
Enregistrez ensuite vos modifications une fois vos fichiers placés sur votre collection :
Nous réaliserons la même chose pour la collection Boucle d'oreilles, faites de même pour celles concernées de votre côté
Une fois toutes vos collections personnalisées avec les valeurs qui vous conviennent, place à l'affichage sur votre thème !
4. Afficher des données personnalisées sur le Phantom thème
Nous allons relier ces champs méta à notre personnalisation dans le Phantom Thème.
A. Cliquez sur Boutique en ligne
B. Puis Personnaliser sur le thème concerné
C. Ensuite dans le sélecteur de modèle, puis choisissez le modèle de collections concerné
Ici nous choisirons le modèle par défaut :
D. Placer ses données personnaliser sur des connecteurs dynamiques
Vos données personnalisées ont un type comme vous avez pu le remarquer.
Suivant les paramètres disponibles dans votre thème, chaque type de paramètre prend en charge certains type de données personnalisées
Nous utiliserons ici les champs méta bannière sur la section Diapositive en exemple.
On clique alors sur la section pour afficher ses paramètres.
On disposera ensuite respectivement, grâce au connecteur dynamique, les champs méta des bannières mobile et bureau :
Nous choisissons la donnée personnalisée pour l'affichage bureau :
Puis ici nous choisissons la donnée personnalisée pour l'affichage mobile :
E. Aperçu de l'affichage des données personnalisées sur les collections
Nous pouvons enfin réaliser un aperçu suivant la collection de ce que donne notre modification en cliquant sur Modifier comme indiqué ci-dessous
On sélectionne alors une des collections concernées par nos modifications, ici Boucles d'oreille :
Et en changeant de format comme sur les captures qui suivent, nos image bureau et mobile apparaissent bel et bien !
Nous testons alors sur l'autre collection Bagues argent pour bureau et mobile :
F. Une fois satisfait, Enregistrer vos modifications
