Como exibir metafields de produtos da Shopify na página de detalhes do produto do seu app mobile

Observação: este artigo é para blocos personalizados legados que usam EDL; para novos blocos personalizados com react-native, use os blocos codeable de metafields de produto como referência

Introdução

No mercado de eCommerce competitivo de hoje, fornecer informações detalhadas e personalizadas sobre os produtos é essencial para melhorar a experiência do cliente. Os metafields de produto do Shopify permitem armazenar e exibir dados personalizados como tamanho, material, instruções de cuidado ou detalhes promocionais. Com o Evlop Mobile App Builder, você pode integrar facilmente esses metafields à página de detalhes do produto do seu app mobile, oferecendo uma experiência de compra mais rica.

Este artigo vai guiar você pelo processo de carregar e exibir os metafields de produto do Shopify no seu app mobile usando o Evlop.

O Que São Metafields de Produto do Shopify?

Os metafields de produto do Shopify são campos personalizados que permitem armazenar informações adicionais sobre seus produtos. Eles são definidos por um namespace (categoria) e uma key (campo específico). Por exemplo:

Namespace: custom
Key: text

Os metafields podem armazenar vários tipos de dados, como texto, imagens, URLs ou até códigos QR, permitindo que você forneça detalhes únicos sobre os produtos além dos atributos padrão do Shopify.

Carregando Metafields de Produto no EDL

Para exibir metafields de produtos do Shopify no seu app mobile, primeiro você precisa carregá-los na Extended Data Layer (EDL). Veja como:

Acesse a aba "Data for EDL" dentro do Custom block.
Clique em "Add Data to Pass to EDL".
Selecione "Product Metafields" como o tipo de dado.
Adicione o namespace e a key de cada metafield que você deseja carregar. Por exemplo:
- namespace: custom key: text
- namespace: details key: material
- namespace: media key: image
- namespace: promo key: qrcode
Salve suas alterações.

Depois de carregados, esses metafields podem ser acessados na EDL usando caminhos como data.myMetafields.custom.text ou data.myMetafields.media.image.

Exibindo Texto Usando Dados de Metafields

Para exibir dados de texto de um metafield, use o seguinte snippet da EDL em um custom block:

<Box>
  <Text>Custom Text: {data.productMetafields.custom.text}</Text>
</Box>

Isso extrai dinamicamente o valor do texto do metafield e o exibe na página de detalhes do produto.

Exibindo Imagem Usando Dados de Metafields

Para exibir uma imagem armazenada em um metafield, use o seguinte snippet EDL em um bloco personalizado:

<Box>
  <Image src={data.productMetafields.media.image.small} />
</Box>

Dependendo do tamanho de exibição necessário, você pode usar uma das opções

data.productMetafields.media.image.small(maxWidth: 240px, maxHeight: 240px)
data.productMetafields.media.image.medium(maxWidth: 480, maxHeight: 480)
data.productMetafields.media.image.large(maxWidth: 960px, maxHeight: 960px)

Isso é ideal para exibir imagens de produtos, instruções de cuidados ou visuais adicionais.

Exibindo QR Code Usando Dados de Metafields

Para exibir um QR code a partir de um metafield, use o seguinte snippet EDL em um bloco personalizado:

<Box>
  <QRCode value={data.productMetafields.promo.qrcode} />
</Box>

Isso é perfeito para promoções, descontos ou links para informações adicionais do produto.

Conclusão

Ao carregar e exibir metafields de produtos do Shopify no seu app móvel com o Evlop Mobile App Builder, você oferece uma experiência de compra mais personalizada e informativa para seus clientes. Sejam textos, imagens ou QR codes, os metafields permitem destacar detalhes únicos dos produtos que vão além dos atributos padrão do Shopify.

Siga as etapas descritas neste artigo para integrar os metafields ao seu app de forma simples e melhorar a jornada de compra dos seus clientes. Se precisar de mais ajuda, entre em contato com a equipe de suporte do Evlop!