So fügen Sie Varianten-Metafelder in GemPages hinzu und zeigen sie an

Was ist ein Varianten-Metafeld?

Varianten-Metafelder sind benutzerdefinierte Felder, die an Produktvarianten (z. B. Größe, Farbe) und nicht an das Produkt selbst angehängt sind.
Sie ermöglichen Ihnen die Speicherung von Informationen, die für jede Variante einzigartig sind, beispielsweise:

• Weitere Bilder
• Beschreibungen
• Abmessungen oder technische Daten

Ejemplo: Wenn Sie ein T-Shirt in Rot, Blau und Grün verkaufen, können Sie mithilfe eines Varianten-Metafelds jeder Farbvariante eine eindeutige Beschreibung oder ein eindeutiges Bild zuweisen.

Wie erstelle ich mit Shopify ein Varianten-Metafeld?

Schritt 1: Erstellen einer Varianten-Metafelddefinition

1. in Shopify-Administrator, Zu gehen Einstellungen → Metafelder und Metaobjekte → Varianten

2. Unter Varianten, klicken Definition hinzufügen.

3. Füllen Sie die folgenden Felder aus:

Beispielsweise: 

• Name: Farbe Beschreibung
• Namespace und Schlüssel: benutzerdefinierte Farbbeschreibung
• Beschreibung: Geben Sie für jede Farbvariante des Produkts eine eindeutige Beschreibung an, die auf der Produktseite angezeigt wird.
• Inhaltstyp: Text (oder Bild, wenn Sie ein variantenspezifisches Bild hochladen möchten)
• Optional: Validierungsregeln festlegen (z. B. maximale Zeichenanzahl)
  

4 Klicken Gespeichert.

Danach verfügt jede Variante über ein Feld zur Eingabe ihres Metafeldwerts.

Schritt 2: Werte zu Varianten-Metafeldern hinzufügen

1 Gehe zu Shopify-Administrator → Produkte → Alle Produkte.

2. Wählen Sie ein Produkt mit mehreren Varianten (z. B. „Klassisches Baumwoll-T-Shirt“).

3. Scrollen Sie nach unten zum Abschnitt „Varianten“. Für jede Variante wird ein Bereich mit Metafeldern angezeigt.

4. Geben Sie Werte für jede Variante ein:

• Rot → „Leuchtendes Rot, inspiriert von Sommertönen.“
• Blau → „Ruhiges Ozeanblau für einen entspannten Look.“
  
• Grün → „Frischer Minzton, perfekt für den Alltag.“

5 Klicken Gespeichert.

Jede Variante verfügt jetzt über ihre eigenen, einzigartigen Metafelddaten.

So zeigen Sie das Varianten-Metafeld in GemPages an

Um Shopify-Varianten-Metafeldwerte auf Ihren GemPages-Produktseiten zu verwenden, müssen Sie ein Custom-Code-Element mit Liquid verwenden, das auf das Variantenobjekt verweist.

Schritt 1: Öffnen Sie den GemPages V7 Editor für Ihre Produktseite.

Schritt 2: Ziehen Sie aus der linken Seitenleiste ein Benutzerdefiniertes Codeelement dorthin, wo die Variantenbeschreibung erscheinen soll.

Schritt 3: Klicken Sie auf das Element, um das Codefenster zu öffnen.

Schritt 4: Fügen Sie den folgenden Liquid-Ausschnitt ein:

{% 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>

Schritt 5: Klicken Sie auf Gespeichert und Veröffentlichen.

Schritt 6: Zeigen Sie eine Vorschau Ihrer Produktseite an: Wenn der Kunde eine Farbvariante auswählt, wird die richtige Farbbeschreibung angezeigt.