Agrega una ventana emergente con la guía de tallas a las páginas de producto

Los metacampos te ayudan a personalizar la funcionalidad y la apariencia de la tienda Shopify, ya que permiten guardar información especializada que normalmente no se captura en el panel de control de Shopify. Puedes usar los metacampos internamente en el panel de control de Shopify y también elegir mostrarlos en la tienda online.

Con los metacampos, puedes agregar una referencia de página a un bloque de ventana emergente que muestra un enlace en las páginas de producto. Cuando haces clic, el enlace abre una ventana emergente que muestra el contenido de la página. Puedes agregar imágenes y otros elementos multimedia con el rich text editor de las páginas.

Estos son algunos ejemplos de información en ventana emergente que podrías agregar a las páginas de producto:

• Guías de tallas
• Instrucciones de cuidado
• Instrucciones de armado
• Especificaciones del producto
• Preguntas frecuentes

Este es un tutorial de 4 pasos que presenta los metacampos de referencia de página, la creación de un metacampo de producto para una referencia de página, la creación de una plantilla de página de producto para la tienda online, la adición de una página nueva, la referencia de la página en productos específicos y la aplicación de la plantilla de página de producto a productos específicos. Puedes usar este tutorial para crear cualquier contenido que quieras en la ventana emergente. A lo largo del tutorial se utiliza como ejemplo la guía de tallas.

Este tutorial requiere theme that supports dynamic sources. Si usas vintage theme, o si quieres agregar tipos de metacampo que tu tema no admite, puedes edit your theme code o hire a Shopify Partner.

Paso 1: crear un metacampo de producto para una página

Para empezar, debes crear una definición de metacampo de referencia de página para las páginas de producto. El metacampo de producto se vincula a una página específica y se puede personalizar por producto. Si no agregas una referencia de página a un producto que usa la misma plantilla, el texto del enlace de la ventana emergente seguirá mostrándose como si hubiera contenido. Para mostrar el enlace de la ventana emergente solo en productos específicos, puedes create a product template y aplicarla solo a los productos correspondientes.

Con los metacampos de referencia de página, puedes mostrar información diferente del producto creando páginas distintas para distintos tipos de productos. Por ejemplo, puedes crear dos páginas de guías de tallas para dos grupos de edad diferentes, como una guía para niños pequeños y otra para bebés, y luego agregar la referencia de página para tallas de niños pequeños solo en los productos para niños pequeños.

Debes crear una definición de metacampo para una referencia de página para poder conectarla con el bloque de ventana emergente en el editor de temas. Acceso en la tienda online se selecciona de forma predeterminada cuando creas la definición de metacampo.

Pasos:

Escritorio

1. En el panel de control de Shopify, ve a Configuración > Metafields and metaobjects.

2. En la sección Definiciones de metacampo, haz clic en Productos.

3. Haz clic en Agregar definición.

4. En el campo Nombre, ingresa Guía de tallas.

5. Haz clic en ⊕ Seleccionar tipo.

6. Selecciona Página en el menú desplegable. Una página se selecciona de forma predeterminada.

7. Haz clic en Guardar.

Móvil

1. Desde la aplicación de Shopify, toca y luego toca Configuración.

2. En la sección Configuración de la tienda, toca Metacampos y metaobjetos.

3. En la sección Definiciones de metacampo, toca Productos.

4. Toca +.

5. En el campo Nombre, ingresa Guía de tallas.

6. Toca + Seleccionar tipo.

7. Toca para seleccionar Página en el menú desplegable. Una página se selecciona de forma predeterminada.

8. Toca Guardar o ✓.

Paso 2: crear la plantilla de página de producto

Este tutorial requiere a theme that supports dynamic sources. Si usas vintage theme, o si quieres agregar tipos de metacampo que tu tema no admite, puedes edit your theme code o hire a Shopify Partner.

Después de agregar una sección o un bloque, puedes seleccionar un metacampo haciendo clic en el ícono de fuente dinámica:

Si no quieres agregar el enlace de la ventana emergente de la guía de tallas a todos los productos, crea una nueva plantilla de página de producto. En los pasos se crea una nueva plantilla de página de producto, pero también puedes elegir una plantilla de página de producto existente para personalizarla.

Pasos:

Escritorio

1. En el panel de control de Shopify, ve a Tienda online > Themes.
2. Haz clic en Editar tema junto al tema que quieres personalizar.
3. En el menú desplegable Página de inicio en la parte superior del editor, haz clic en Productos y luego haz clic en ⊕ Crear plantilla para crear y personalizar una nueva plantilla.
4. En la barra lateral de navegación de secciones, ve a los bloques Plantilla > Información de producto y luego haz clic en ⊕ Agregar bloque.
5. Haz clic en Ventana emergente.
6. En el campo Texto del enlace, ingresa Guía de tallas. Este es el texto que verán y en el que harán clic para abrir el contenido de la ventana emergente.
7. Junto a Página, haz clic en el ícono de fuente dinámica y luego haz clic para seleccionar el metacampo de referencia de página que creaste.
8. Haz clic en Guardar.

Móvil

1. Desde la aplicación de Shopify, toca el ícono .

2. En la sección Canales de ventas, toca Tienda online > Gestionar todos los temas.

3. Toca Editar tema en el tema que quieres personalizar.

4. En el menú desplegable Página de inicio en la parte superior del editor, toca Productos y luego toca ⊕ Crear plantilla para crear y personalizar una nueva plantilla.

5. En la barra lateral de navegación de secciones, ve a los bloques Plantilla > Información de producto y luego toca ⊕ Agregar bloque.

6. Toca Ventana emergente.

7. En el campo Texto del enlace, ingresa Guía de tallas. Este es el texto que verán y en el que harán clic para abrir el contenido de la ventana emergente.

8. Junto a Página, toca el ícono de fuente dinámica y luego toca para seleccionar el metacampo de referencia de página que creaste.

9. Toca Guardar o ✓.

Paso 3: Agrega una página con la guía de tallas

Es necesario crear una página con el contenido de la guía de tallas al que hace referencia el metacampo. Si ya tienes una página creada, puedes pasar al paso 4.

Pasos:

Escritorio

1. En el panel de control de Shopify, ve a Tienda online > Pages.
2. Haz clic en Agregar página.
3. En el campo Título, ingresa Guía de tallas y luego agrega la información de la guía de tallas en Contenido.
4. En la sección Visibilidad, establece la página como Visible.
5. Haz clic en Guardar.

Móvil

1. Desde la aplicación de Shopify, toca el ícono .

2. En la sección **Canales de ventas**, toca **Tienda online** > **Páginas**.

3. Toca Agregar página.

4. En el campo Título, ingresa Guía de tallas y luego agrega la información de la guía de tallas en Contenido.

5. En la sección Visibilidad, establece la página como Visible.

6. Toca Guardar o ✓.

Puedes crear tantas páginas de guía de tallas como necesites para referenciarlas en el metacampo. Sin embargo, solo puedes vincular una página en el metacampo de producto.

Paso 4: Agrega la referencia de la página y aplica la plantilla de producto a productos específicos

Cuando agregas una referencia de página a un producto específico, la información de esa página se muestra solo con ese producto. Si dejas la referencia de página en blanco en un producto que usa esa plantilla de producto, el texto del enlace se sigue mostrando como un enlace. Sin embargo, la ventana emergente no muestra contenido porque no tiene una referencia de página y puede generar confusión en los clientes. Puedes usar una plantilla de página de producto distinta para tipos de producto que tengan guías de tallas, como ropa o calzado, y otra plantilla de producto para otros tipos, como juguetes para niños o joyería y otros accesorios.

Más información sobre templates.

Pasos:

Escritorio

1. En el panel de control de Shopify, ve a Products.
2. Haz clic en el producto al que quieres agregar una referencia de página.
3. En la sección Metacampos de producto, haz clic en la referencia de página Guía de tallas y luego haz clic en Seleccionar páginas y selecciona la página Guía de tallas.
4. En la sección Plantilla del tema, selecciona la plantilla de página de producto Guía de tallas que creaste en el paso 2.
5. Haz clic en Guardar.

Móvil

1. Desde la Shopify app, toca el ícono .
2. Toca el producto al que quieres agregar una referencia de página.
3. En la sección Metacampos de producto, toca la referencia de página Guía de tallas y luego toca Seleccionar páginas y selecciona la página Guía de tallas.
4. En la sección Plantilla del tema, selecciona la plantilla de página de producto Guía de tallas que creaste en el paso 2.
5. Toca Guardar o ✓.

Puedes repetir estos pasos con tantos productos como necesites.