Comment ajouter et afficher des métachamps de variantes dans GemPages

Qu'est-ce qu'un métachamp variant ?

Les métachamps de variantes sont des champs personnalisés attachés aux variantes de produits (par exemple, taille, couleur) plutôt qu'au produit lui-même.
Ils vous permettent de stocker des informations propres à chaque variante, telles que :

• Images supplémentaires
• Descriptions
• Dimensions ou spécifications techniques

Exemple : Si vous vendez un T-shirt rouge, bleu et vert, vous pouvez attribuer une description ou une image unique à chaque variante de couleur à l'aide d'un métachamp de variante.

Comment créer un métachamp de variante avec Shopify ?

Étape 1 : Créer une définition de métachamp de variante

1. dans Administrateur Shopify, Aller à Paramètres → Métachamps et métaobjets → Variantes

2. En dessous de Variantescliquez Ajouter une définition.

3. Remplissez les champs suivants :

Par exemple : 

• Nom: Description de la couleur
• Espace de noms et clé: custom.color_description
• Description:Fournissez une description unique pour chaque variante de couleur du produit, affichée sur la page du produit.
• Type de contenu: Texte (ou image si vous souhaitez télécharger une image spécifique à une variante)
• Optionnel: Définir des règles de validation (par exemple, nombre maximal de caractères)
  

4. Cliquez Enregistrer.

Après cela, chaque variante disposera d’un champ pour saisir sa valeur de métachamp.

Étape 2 : Ajouter des valeurs aux métachamps de variantes

1. Aller à Administrateur Shopify → Produits → Tous les produits.

2. Sélectionnez un produit avec plusieurs variantes (par exemple, « T-shirt classique en coton »).

3. Faites défiler la page jusqu'à la section Variantes. Pour chaque variante, vous verrez une zone Métachamps.

4. Saisissez des valeurs pour chaque variante :

• Rouge → « Couleur rouge vibrante inspirée des tons estivaux. »
• Bleu → « Un bleu océan calme pour un look décontracté. »
  
• Vert → « Teinte menthe fraîche parfaite pour un usage quotidien. »

5. Cliquez Enregistrer.

Chaque variante possède désormais ses propres données de métachamp uniques.

Comment afficher le métachamp de variante dans GemPages

Pour utiliser les valeurs des métachamps de variante Shopify sur vos pages produits GemPages, vous devez utiliser un élément de code personnalisé avec Liquid faisant référence à l'objet variante.

Étape 1 : Ouvrez l'éditeur GemPages V7 pour votre page produit.

Étape 2 : Depuis la barre latérale gauche, faites glisser un Élément de code personnalisé à l'endroit où vous souhaitez que la description de la variante apparaisse.

Étape 3 : Cliquez sur l'élément pour ouvrir le panneau de code.

Étape 4 : Collez l'extrait de code Liquid suivant :

{% assign ns = 'YOUR_NAMESPACE' %}
{% assign key = 'YOUR_KEY' %}

<div id="variant-meta">{{ current_variant.metafields[ns][key] }}</div>

<script>
(function() {
var VM = {
{% for v in product.variants %}
"{{ v.id }}": {{ v.metafields[ns][key] | json }}{% unless forloop.last %},{% endunless %}
{% endfor %}
};

var el = document.getElementById('variant-meta');

function getVid() {
var x = document.querySelector('input[name="id"]');
return x ? x.value : null;
}

function update(id) {
if (!el || !id) return;
el.textContent = (VM[id] != null) ? VM[id] : "";
}

// init + listeners
update(getVid());

window.addEventListener('load', function() {
update(getVid());
});

document.addEventListener('change', function() {
update(getVid());
});

document.addEventListener('variant:changed', function(e) {
if (e.detail && e.detail.variant) {
update(String(e.detail.variant.id));
}
});
})();
</script>

Étape 5 : Cliquez à nouveau sur Enregistrer Publier.

Étape 6 : Prévisualisez votre page produit : lorsque le client sélectionne une variante de couleur, la description de couleur correcte s'affiche.