Comment ajouter des métachamps de produits à votre page Shopify

Qu'est-ce qu'un métachamp de produit dans Shopify?

A Métachamp Shopify vous permet de stocker informations supplémentaires concernant le contenu de votre boutique qui ne correspond pas aux champs par défaut. L'un des types les plus utilisés est Champ méta du produit — parfait pour ajouter des spécifications uniques telles que des types de soins de la peau, des informations nutritionnelles, des ingrédients ou même des URL d'images pour des badges personnalisés.

Si vous cherchez à afficher détails du produit personnalisés ou enrichir votre Pages produits Shopify avec des données personnalisées, les métachamps sont votre solution de prédilection.

Comment ajouter un métachamp de produit dans Shopify

Étape 1 : Créer un métachamp de produit dans Shopify

Pour utiliser un métachamp, vous devez d'abord Vous permet de définir dans votre administrateur Shopify.

• De ton Administrateur Shopify, aller à la Paramètres > Métachamp et métaobjets > Produits.

• Ensuite, cliquez sur « Ajouter une définition ».

• Remplir Nom, Description, sélectionnez Type de contenu, et sélectionnez Catégories.

• Frappé "Sauvegarder" lorsque vous avez terminé.

Étape 2 : ajoutez des valeurs de métachamp à votre produit

Une fois que vous avez créé avec succès le métachamp du produit, vous remarquerez peut-être qu'il a été ajouté à vos paramètres de produit. Ensuite, pour ajouter de la valeur à votre métachamp récemment créé, suivez les étapes décrites ci-dessous.

• Allez dans Administrateur Shopify > Produits et sélectionnez le produit pour lequel vous souhaitez ajouter plus d'informations via les métachamps.
• Faites défiler jusqu'à la Champs méta section sur la page de configuration du produit.

• Saisissez la valeur dans le champ. N'oubliez pas de cliquer sur "Sauvegarder" lorsque vous avez terminé.

Étape 3 : Affichez le métachamp sur votre page

• Retour à Administrateur Shopify > Métachamps et métaobjets > Produit et localisez le Metafield que vous souhaitez afficher sur votre page.
• Ensuite, copiez la ligne de code dans le Espace de noms et clé .

• Allez dans Tableau de bord GemPages > Pages produits, sélectionnez le modèle préféré pour entrer dans le Éditeur.

À partir de maintenant, les étapes peuvent varier selon la version de l'éditeur que vous utilisez. Veuillez rechercher les instructions correspondant à votre version de GemPages et suivre les étapes suivantes.

Si vous utilisez GemPages V6

• Depuis la barre latérale gauche, faites glisser et déposez un Élément liquide à l'endroit de votre choix sur la page.

• Faites un clic droit sur l'élément Liquide et sélectionnez Modifier le code.

• Ensuite, collez le code que vous avez copié précédemment dans le Modèle panneau.

Veuillez noter que vous devez ajouter produit.métachamps. avant la ligne de code que vous venez de copier, et le code doit être placé entre {{ }}.

Par exemple :

{{product.metafields.my_fields.skintype}}

• Frappé "Sauvegarder" et consultez la page d'aperçu pour voir à quoi cela ressemble.

Si vous utilisez GemPages V7

• Localisez le Code personnalisé élément sur la barre latérale gauche, sous le Avancé section. Faites-la glisser et déposez-la à l'emplacement de votre choix.

• Cliquez sur l’élément pour afficher le panneau de code dans la barre latérale gauche.

• Collez le code que vous avez copié précédemment dans le HTML/Liquide onglet. Vous devez également ajouter le préfixe product.metafields. avant la ligne de code que vous venez de copier, et le code doit être placé entre {{ }}.

Par exemple :

{{product.metafields.custom.product_test}}

• Cliquez à nouveau sur  Enregistrer et publiez votre page pour vérifier le résultat sur votre vitrine.

Comment connecter la source de l'image à un métachamp ?

Shopify prend également en charge métachamps d'image, mais leur rendu sur votre page nécessite un code HTML personnalisé.

Après avoir téléchargé vos images pour les métachamps, vous pouvez utiliser le code suivant pour afficher l'image :

{{product.metafields.custom.test_metafield_image | metafield_tag}}