Cómo agregar y mostrar metacampos de variantes en GemPages

¿Qué es un metacampo variante?

Los metacampos de variantes son campos personalizados asociados a variantes del producto (por ejemplo, tamaño, color) en lugar del producto en sí.
Permiten almacenar información exclusiva de cada variante, como por ejemplo:

• Imágenes adicionales
• Descripción
• Dimensiones o especificaciones técnicas

Ejemplo: Si vende una camiseta en rojo, azul y verde, puede asignar una descripción o imagen única para cada variante de color utilizando un metacampo de variante.

¿Cómo crear un metacampo de variante con Shopify?

Paso 1: Crear una definición de metacampo de variante

1. en Administración de Shopify, vaya a Configuración → Metacampos y metaobjetos → variantes

2. Debajo variantes, haga clic Añadir definición.

3. Rellene los siguientes campos:

Por ejemplo:  

• Nombre: Descripción del color
• Espacio de nombres y clave: descripción de color personalizada
• Descripción:Proporcione una descripción única para cada variante de color del producto, que se muestra en la página del producto.
• Tipo de contenido:Texto (o imagen si desea cargar una imagen específica de la variante)
• Opcional: Establecer reglas de validación (por ejemplo, máximo de caracteres)
  

4. Hacer clic en Guardar.

Después de esto, cada variante tendrá un campo para ingresar su valor de metacampo.

Paso 2: Agregar valores a los metacampos de variante

1. Ir Administración de Shopify → Productos → Todos los Productos.

2. Seleccione un producto con múltiples variantes (por ejemplo, “Camiseta de algodón clásica”).

3. Desplázate hacia abajo hasta la sección Variantes. Para cada variante, verás un área de Metacampos.

4. Introduzca valores para cada variante:

• Rojo → “Color rojo vibrante inspirado en los tonos veraniegos”.
• Azul → “Azul océano tranquilo para un look relajado”.
  
• Verde → “Tono menta fresca perfecto para uso diario”.

5. Hacer clic en Guardar.

Cada variante ahora tiene sus propios datos de metacampo únicos.

Cómo mostrar el metacampo de variante en GemPages

Para utilizar los valores de metacampo de variante de Shopify en las páginas de productos de GemPages, debe usar un elemento de código personalizado con Liquid que haga referencia al objeto de variante.

Paso 1: Abra el editor GemPages V7 para su página de producto.

Paso 2: Desde la barra lateral izquierda, arrastre un Elemento de código personalizado donde desea que aparezca la descripción de la variante.

Paso 3: Haga clic en el elemento para abrir el panel de código.

Paso 4: Pegue el siguiente fragmento de Liquid:

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

Paso 5: Haga clic en Guardar y Publicar.

Paso 6: Obtenga una vista previa de la página de su producto: cuando el cliente selecciona una variante de color, se mostrará la descripción del color correcta.