¿Qué son los metafields de Shopify?

Un producto de Shopify trae de serie un título, una descripción, un precio, unas imágenes y poco más. Cuando necesitas guardar la composición de una prenda, una guía de tallas o la edad recomendada de un juguete, Shopify no te pide cambiar de plataforma: te pide un metafield. Pese al nombre, no tiene nada que ver con las etiquetas meta de la cabecera, como el meta title o la meta description: es un campo de datos más en el producto. Te importa porque en una tienda Shopify los datos que enriqueces suelen acabar en metafields, y un dato guardado no es un dato publicado hasta que el tema lo pinta en la página.

Cómo funciona

Shopify lo define como un campo extra en un recurso que ya existe, con datos que describen un producto, un pedido, un cliente u otro objeto de la tienda.⁠^{[1]Shopify.dev. Custom data} Su centro de ayuda pone ejemplos de para qué sirve: instrucciones de cuidado en ropa, edad recomendada y posibles riesgos en juguetes, medidas en muebles o guías de tallas.⁠^{[2]Centro de ayuda de Shopify. Metafields}

Un metafield tiene cuatro partes:⁠^{[3]Shopify.dev. Metafields}

Un metafield con definición es más que un campo libre. Shopify da a los metafields definidos un editor con tipo en el panel, validación al guardar y la posibilidad de buscar y filtrar por ellos.⁠^{[1]Shopify.dev. Custom data}

El espacio de nombres dice de quién es el dato. Los que crea el comercio usan espacios no reservados, como custom; las aplicaciones guardan los suyos en un espacio reservado, $app, para que sus datos no choquen con los del comercio ni con los de otra aplicación; y Shopify se reserva los que empiezan por shopify--. Cada definición decide además quién puede leer el dato: por defecto, un metafield no es visible desde la Storefront API, y hay que abrirlo expresamente.⁠^{[3]Shopify.dev. Metafields} Eso importa en una tienda headless, cuyo escaparate lee los datos precisamente por esa API.

Del panel al HTML publicado

Un metafield pasa por tres estados, y cada uno se comprueba en un sitio distinto.

1. Guardado. El valor existe en el panel o en la API. En la tienda todavía no se ve nada.
2. En la plantilla. El tema lo lee. Con un tema que admite fuentes dinámicas, se conecta desde el editor de temas sin tocar código; con un tema antiguo, o con tipos de metafield que el editor no admite, hay que editar el código del tema.⁠^{[2]Centro de ayuda de Shopify. Metafields} En Liquid, el lenguaje de plantillas de Shopify, se accede con product.metafields.namespace.key, y la propiedad value devuelve el dato con el formato de su tipo.⁠^{[4]Shopify.dev. Liquid objects: metafield} Una aplicación no toca tu tema: lo hace con un app embed de Shopify, un bloque que Shopify pinta antes del cierre de head o de body. Los app embeds llegan desactivados tras instalar la aplicación, y el comercio los activa en el editor de temas.⁠^{[5]Shopify.dev. Theme app extension configuration}
3. En el HTML publicado. Liquid se resuelve en el servidor, así que el valor sale ya escrito en el HTML que recibe el navegador. Shopify recomienda pintar así el contenido esencial, con Liquid y HTML, en lugar de construirlo con JavaScript en el navegador: el HTML inicial funciona sin JavaScript.⁠^{[6]Shopify.dev. Render essential content server-side} Es renderizado del lado del servidor, y es lo que hace que un rastreador que no ejecuta JavaScript encuentre el dato.

En una tienda

Ejemplo ficticio. Una tienda de ropa guarda las instrucciones de cuidado de cada prenda en un metafield de producto, custom.cuidados, de tipo texto de una línea. El tema las pinta bajo la descripción con esta línea de Liquid:

<p class="cuidados">{{ product.metafields.custom.cuidados.value }}</p>

Y en el HTML que devuelve la tienda para esa ficha aparece así, sin que el navegador tenga que ejecutar nada:

<p class="cuidados">Lavar a 30 °C. No usar secadora.</p>

Si la línea de Liquid no está en la plantilla, el metafield sigue guardado y la ficha no lo enseña. Así funcionan también las aplicaciones que publican datos estructurados: Clione, por ejemplo, escribe sus señales en metafields y las pinta con dos app embeds, uno para el grafo JSON-LD en la cabecera y otro para el acordeón de preguntas frecuentes, que se activan desde su panel con un clic.

Cómo comprobarlo

1. Localiza la definición en los ajustes de datos personalizados del panel, anota su espacio de nombres y su clave, y comprueba que el producto tiene valor.⁠^{[3]Shopify.dev. Metafields}
2. Abre el editor de temas en la plantilla de producto y mira si algún bloque está conectado a ese metafield como fuente dinámica; si no, busca la clave en el código del tema.⁠^{[2]Centro de ayuda de Shopify. Metafields}
3. Si el dato lo publica una aplicación, comprueba en el editor de temas que su app embed está activado.⁠^{[5]Shopify.dev. Theme app extension configuration}
4. Abre el código fuente de la ficha (ver código fuente, no el inspector) y busca el valor. Si está en el código fuente, viaja en el HTML inicial; si solo aparece en el inspector, lo ha añadido JavaScript después.
5. Si tu escaparate es headless, comprueba que la definición permite leer el metafield desde la Storefront API.⁠^{[3]Shopify.dev. Metafields}

Concepto cercano: metaobjeto de Shopify

Un metafield amplía un recurso que ya existe; un metaobjeto de Shopify es un tipo de registro nuevo que defines tú, para datos que no pertenecen a ningún objeto de Shopify.⁠^{[1]Shopify.dev. Custom data} Una guía de tallas que comparten cincuenta prendas encaja como metaobjeto, y cada prenda la enlaza desde un metafield de tipo referencia. En BigCommerce, lo más parecido a un metafield de producto son los custom fields.

Para seguir, la ruta de lectura de publicación por plataforma explica cómo llega cada dato a la tienda en Shopify y en BigCommerce.