Agregar una tabla de tallas emergente a las páginas de productos

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

Con los metacampos, puedes agregar una referencia de página a un bloque emergente que muestre un enlace en las páginas de productos. Cuando se hace clic, el enlace abre una ventana emergente que muestra el contenido de tu página. Puedes agregar imágenes y otros elementos multimedia usando el editor de texto enriquecido para tus páginas.

Los siguientes son algunos ejemplos de información en ventana emergente que puedes agregar a tus páginas de producto:

Tablas de tallas
Instrucciones de cuidado
Instrucciones de ensamblaje
Especificaciones del producto
Preguntas frecuentes

Este es un tutorial en 4 pasos que introduce metacampos de referencia de página y crea tanto un metacampo de producto para una referencia de página como una plantilla de página de producto para tu tienda online, agrega una nueva página, hace referencia a la página en productos específicos y aplica la plantilla de la página de producto a productos específicos. Puedes usar este tutorial para crear cualquier contenido que desees en la ventana emergente. Este tutorial usa el ejemplo de la tabla de tallas en todas partes.

Este tutorial requiere un tema de Online Store 2.0. Si estás utilizando un tema vintage, o si deseas agregar tipos de metacampos que tu tema no admite, puedes editar el código de tu tema o contratar a un Shopify Partner.

En esta página

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

Para comenzar, debes crear una definición de metacampo de referencia de página para tus páginas de producto. El metacampo del producto se vincula a una página específica y se puede personalizar para cada producto. Si no agregas una referencia de página a un producto que usa la misma plantilla, el texto de tu enlace emergente igual se mostrará como si hubiera contenido. Para mostrar el enlace emergente solo en productos específicos, puedes crear una plantilla de producto y aplicarla solo a productos relevantes.

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

Debes crear una definición de metacampo para una referencia de página para conectarla al bloque emergente en tu editor de temas. El acceso a la tienda online se selecciona de forma predeterminada cuando creas la definición de tu metacampo.

Pasos:

Escritorio

Desde el panel de control de Shopify, ve a Configuración > Datos personalizados.
En la sección Definiciones de metacampos, haz clic en Productos.
Haz clic en Agregar definición.
En el campo Nombre, introduce Tabla de tallas.
Haz clic en ⊕ Seleccionar tipo.
Selecciona Página en el menú desplegable. Se ha seleccionado una página de forma predeterminada.
Haz clic en Guardar.

iPhone

Desde la aplicación de Shopify, toca ... > Configuración.
Toca Datos personalizados.
En la sección Definiciones de metacampo, toca Productos.
Toca +.
En el campo Nombre, introduce Tabla de tallas.
Toca + Seleccionar tipo.
Toca para seleccionar Página en el menú desplegable. Una página se selecciona de forma predeterminada.
Toca Guardar.

Android

En la aplicación de Shopify, toca ☰ > Configuración.
Toca Datos personalizados.
En la sección Definiciones de metacampo, toca Productos.
Toca +.
En el campo Nombre, introduce Tabla de tallas.
Toca + Seleccionar tipo.
Toca para seleccionar Página en el menú desplegable. Una página se selecciona de forma predeterminada.
Toca ✓ para guardar.

Paso 2: crea la plantilla de tu página de producto

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

Si no deseas agregar el enlace de ventana emergente para la tabla de tallas a todos tus productos, debes crear una nueva plantilla de página de producto. En los pasos, creas 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

En el panel de control de Shopify, ve a Tienda online > Temas.
Haz clic en Personalizar junto al tema que deseas personalizar.
En el menú desplegable Página de inicio, situado en la parte superior del editor, haz clic en Productos y luego en ⊕ Crear plantilla para crear y personalizar una nueva plantilla.
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.
Haz clic en Ventana emergente.
En el campo Etiqueta del enlace, introduce Tabla de tallas. Este es el texto que muestra el contenido de la página emergente en la que se muestra el clic de un cliente.
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.
Haz clic en Guardar.

iPhone

Desde la aplicación de Shopify, toca ... > Tienda online.
Toca Gestionar todos los temas.
Toca Personalizar junto al tema que deseas personalizar.
En el menú desplegable de la Página de inicio en la parte superior del editor, toca Productos y luego ⊕ Crear plantilla para crear y personalizar una nueva plantilla.
En la barra lateral de navegación de secciones, ve a los bloques Plantilla > Información de productos y luego toca ⊕ Agregar bloque.
Toca Ventana emergente.
En el campo Etiqueta del enlace, introduce Tabla de tallas. Este es el texto que muestra el contenido de la página emergente en la que se muestra el clic de un cliente.
Junto a Página, toca el icono de fuente dinámica y luego toca para seleccionar el metacampo de referencia de página que creaste.
Toca Guardar.

Android

Desde la aplicación de Shopify, toca ☰ >Tienda online.
Toca Gestionar todos los temas.
Toca Personalizar junto al tema que deseas personalizar.
En el menú desplegable de la Página de inicio en la parte superior del editor, toca Productos y luego ⊕ Crear plantilla para crear y personalizar una nueva plantilla.
En la barra lateral de navegación de secciones, ve a los bloques Plantilla > Información de productos y luego toca ⊕ Agregar bloque.
Toca Ventana emergente.
En el campo Etiqueta del enlace, introduce Tabla de tallas. Este es el texto que muestra el contenido de la página emergente en la que se muestra el clic de un cliente.
Junto a Página, toca el icono de fuente dinámica y luego toca para seleccionar el metacampo de referencia de página que creaste.
Toca ✓ para guardar tu tema.

Paso 3: Agrega una página con la tabla de tallas

Necesitas crear una página con el contenido de la tabla de tallas al que el metacampo haga referencia. Si ya tienes una página creada, puedes ir directamente al paso 4.

Pasos:

Escritorio

Desde el panel de control de Shopify, ve a Tienda online > Páginas.
Haz clic en Agregar página.
En el campo Título, introduce Tabla de tallas y agrega la información de la tabla de tallas en Contenido.
En la sección Visibilidad, configura la página como Visible.
Haz clic en Guardar.

iPhone

Desde la aplicación de Shopify, toca ... > Tienda online.
Selecciona Páginas.
Toca Agregar página.
En el campo Título, introduce Tabla de tallas y agrega la información de la tabla de tallas en Contenido.
En la sección Visibilidad, configura la página como Visible.
Toca Guardar.

Android

Desde la aplicación de Shopify, toca ☰ >Tienda online.
Selecciona Páginas.
Toca Agregar página.
En el campo Título, introduce Tabla de tallas y agrega la información de la tabla de tallas en Contenido.
En la sección Visibilidad, configura la página como Visible.
Toca ✓ para guardar.

Puedes crear tantas páginas de tablas de tallas para hacer referencia en el metacampo como necesites. Sin embargo, puedes vincular una sola página en el metacampo del producto.

Paso 4: haz referencia a 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 para un producto que usa esa plantilla de producto, el texto del enlace igual se mostrará como un enlace. Sin embargo, la ventana emergente está en blanco sin referencia de página y podría crear confusión a tus clientes. Puedes usar una plantilla de página de producto diferente para tipos de productos específicos que tienen tablas de tallas, como ropa o zapatos, y una plantilla de producto para otros tipos de producto, como juguetes o joyas y otros accesorios.

Obtén más información sobre las plantillas.

Pasos:

Escritorio

Desde tu panel de control de Shopify, ve a Productos.
Haz clic en el producto al que deseas agregar una página de referencia.
En la sección Metacampos de producto, haz clic en la referencia de página Tabla de tallas y luego en Seleccionar páginas y selecciona la página Tabla de tallas.
En la sección Plantilla de tema, selecciona la plantilla de la página de producto Tabla de tallas que creaste en el paso 2.
Haz clic en Guardar.

iPhone

Desde la app de Shopify, ve a Productos > Todos los productos.
Toca el producto al que deseas agregar una referencia de página.
En la sección Metacampos de producto toca la referencia de la página Tabla de tallas, luego Seleccionar páginas y selecciona la página Tabla de tallas.
En la sección Plantilla de tema, selecciona la plantilla de la página de producto Tabla de tallas que creaste en el paso 2.
Toca Guardar.

Android

Desde la app de Shopify, ve a Productos > Todos los productos.
Toca el producto al que deseas agregar una referencia de página.
En la sección Metacampos de producto toca la referencia de la página Tabla de tallas, luego Seleccionar páginas y selecciona la página Tabla de tallas.
En la sección Plantilla de tema, selecciona la plantilla de la página de producto Tabla de tallas que creaste en el paso 2.
Toca ✓ para guardar.

Puedes repetir estos pasos para la cantidad de productos que necesites.