Como adicionar e exibir metacampos variantes em GemPages

O que é um metacampo variante?

Metacampos variantes são campos personalizados anexados a variantes de produtos (por exemplo, tamanho, cor) em vez do produto em si.
Eles permitem que você armazene informações exclusivas de cada variante, como:

• Imagens adicionais
• Descrição
• Dimensões ou especificações técnicas

Exemplo: Se você vende uma camiseta em vermelho, azul e verde, pode atribuir uma descrição ou imagem exclusiva para cada variante de cor usando um metacampo de variante.

Como criar metacampo variante com o Shopify?

Etapa 1: Criar uma definição de metacampo variante

1. em Administrador do Shopify, Vá para o Configurações → Metacampos e Metaobjetos → Variantes

2. Sob Variantes, clique em Adicionar definição.

3. Preencha os seguintes campos:

Por exemplo: 

• Nome: Descrição da cor
• Espaço para nome e chave: custom.color_description
• Descrição: Forneça uma descrição exclusiva para cada variante de cor do produto, exibida na página do produto.
• Tipo de conteúdo: Texto (ou imagem se você quiser fazer upload de uma imagem específica da variante)
• Opcional: Definir regras de validação (por exemplo, máximo de caracteres)
  

4. Clique Economize.

Depois disso, cada variante terá um campo para inserir o valor do seu metacampo.

Etapa 2: Adicionar valores aos metacampos variantes

1. Vamos para Administrador do Shopify → Produtos → Todos os Produtos.

2. Selecione um produto com várias variantes (por exemplo, “Camiseta de algodão clássica”).

3. Role para baixo até a seção Variantes. Para cada variante, você verá uma área de Metacampos.

4. Insira valores para cada variante:

• Vermelho → “Cor vermelha vibrante inspirada nos tons do verão.”
• Azul → “Azul oceano calmo para um visual relaxado.”
  
• Verde → “Tom menta fresco, perfeito para uso diário.”

5. Clique Economize.

Cada variante agora tem seus próprios dados de metacampo exclusivos.

Como exibir o metacampo variante no GemPages

Para usar os valores dos metacampos de variantes do Shopify nas páginas de produtos do GemPages, você precisa usar um elemento de Código Personalizado com Liquid que faça referência ao objeto de variante.

Passo 1: Abra o Editor GemPages V7 para sua página de produto.

Passo 2: Da barra lateral esquerda, arraste um Elemento de código personalizado para onde você quer que a descrição da variante apareça.

Passo 3: Clique no elemento para abrir o painel de código.

Passo 4: Cole o seguinte snippet do 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>

Passo 5: Clique Economize e Publicar.

Passo 6: Visualize sua página de produto: quando o cliente seleciona uma variante de cor, a Descrição de Cor correta será exibida.