Cómo Agregar Metafields de Producto a su Página de Shopify

¿Qué es un Metafield de Producto en Shopify? ?

A Metacampo de Shopify le permite almacenar información adicional sobre el contenido de su tienda que no encaja en los campos predeterminados. Uno de los tipos más utilizados es el Metafield de Producto — perfecto para agregar especificaciones únicas como tipos de cuidado de la piel, información nutricional, ingredientes o incluso URLs de imágenes para insignias personalizadas.

Si está buscando mostrar detalles de producto personalizados o enriquecer sus páginas de producto de Shopify con datos personalizados, los metafields son su solución ideal.

Cómo Agregar Metafield de Producto en Shopify

Paso 1: Crear un Metafield de Producto en Shopify

Para utilizar un metacampo, primero debe definirlo en su panel de control de Shopify.

• Desde Administración de Shopify, vaya Configuración > Metacampo y metaobjetos > Productos.

• A continuación, haga clic en “Agregar Definición”.

• Complete el Nombre, Descripción, seleccione Tipo de contenidoy selecciona Categorías.

• Cuando haya terminado, haga clic en "Guardar" cuando termine.

Paso 2: Agregar Valores de Metafield a su Producto

Una vez que haya creado exitosamente el metafield de producto, podrá notar que ha sido agregado a la configuración de su producto. Luego, para agregar valor a su metafield recién creado, siga los pasos descritos a continuación.

• Vaya al Administración de Shopify > Productos y seleccione el producto al que desea agregar más información a través de metafields.
• Desplácese hacia abajo hasta la sección Metacampos de Categoría en la página de configuración del producto.

• Ingrese el valor en el campo. No olvide presionar "Guardar" cuando termine.

Paso 3: Mostrar el Metafield en su Página

• Regrese al Administración de Shopify > Metafields y Metaobjects > Producto y localice el Metafield que desea mostrar en su página.
• A continuación, copie la línea de código en la sección Espacio de nombres y clave .

• Vaya al Panel de control de GemPages > Páginas de productos, seleccione la plantilla preferida para ingresar al Editor.

A partir de este punto, los pasos pueden diferir según la versión específica del editor que esté utilizando. Por favor, localice las instrucciones que correspondan a su versión de GemPages y proceda con los siguientes pasos en consecuencia.

Si está usando GemPages V6

• Desde la barra lateral izquierda, arrastre y suelte un elemento elemento Liquid en el lugar preferido en la página.

• Haga clic derecho en el elemento Liquid y seleccione Editar Código.

• A continuación, pegue el código que copiaste anteriormente en el panel de Plantilla .

Tenga en cuenta que debe agregar product.metafields. antes de la línea de código que acaba de copiar, y el código debe colocarse entre {{ }}. {{ }}.

Por ejemplo:

{{product.metafields.my_fields.skintype}}

• Cuando haya terminado, haga clic en "Guardar" y revise la página de vista previa para ver cómo se ve.

Si está usando GemPages V7

• Localice la opción Código Personalizado en la barra lateral izquierda, debajo de la sección de Avanzado . Arrástrelo y suéltelo en su ubicación preferida.

• Haga clic en el elemento para revelar el panel de código en la barra lateral izquierda.

• Pegue el código que copió anteriormente en el HTML/Líquido pestaña.También necesita agregar el prefijo product.metafields. antes de la línea de código que acaba de copiar, y el código debe colocarse entre {{ }}. {{ }}.

Por ejemplo:

{{product.metafields.custom.product_test}}

• Haga clic en  Guardar y publica tu página para comprobar el resultado en su tienda.

¿Cómo Conectar la Fuente de Imagen a un Metafield?

Shopify también admite metacampos de imagen, pero representarlos en su página requiere un código HTML personalizado.

Después de cargar sus imágenes para los metacampos, puede usar el siguiente código para mostrar la imagen:

{{product.metafields.custom.test_metafield_image | metafield_tag}}