Agregar una ventana emergente a las páginas de tus productos con metacampos
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.
Si tienes un tema de Online Store 2.0, puedes conectar la mayoría de los metacampos al tema desde el editor de temas. Si estás usando un tema vintage o quieres agregar tipos de metacampo que no son compatibles con él, puedes editar su código 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:
- 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, dale un nombre a la definición del metacampo. Por ejemplo, si estás creando una tabla de tallas, quizás desees definir la definición 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.
- Desde la aplicación de Shopify, toca ... > Configuración.
- Toca Datos personalizados.
- En la sección Definiciones de metacampo, toca Productos.
- Toca +.
- Define la definición. Por ejemplo, si estás creando una tabla de tallas, quizás desees definir la definición 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.
- En la aplicación de Shopify, toca ☰ > Configuración.
- Toca Datos personalizados.
- En la sección Definiciones de metacampo, toca Productos.
- Toca +.
- Define la definición. Por ejemplo, si estás creando una tabla de tallas, quizás desees definir la definición 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
Si tienes un tema de Online Store 2,0, puedes conectar la referencia de la página a tu tema usando el editor de temas. 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.
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 bloque emergente 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:
- 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.
- Introduce una Etiqueta de enlace. Este es el texto que muestra el contenido de la página emergente en la que se muestra el clic de un cliente. Por ejemplo, si la página emergente es una tabla de tallas, quizá desees que la Etiqueta de enlace sea Tabla de tallas.
- 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.
- 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.
- Introduce una Etiqueta de enlace. Este es el texto que muestra el contenido de la página emergente en la que se muestra el clic de un cliente. Por ejemplo, si la página emergente es una tabla de tallas, quizá desees que la Etiqueta de enlace sea Tabla de tallas.
- 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.
- 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.
- Introduce una Etiqueta de enlace. Este es el texto que muestra el contenido de la página emergente en la que se muestra el clic de un cliente. Por ejemplo, si la página emergente es una tabla de tallas, quizá desees que la Etiqueta de enlace sea Tabla de tallas.
- 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 información de tu producto
Necesitas crear una página con contenido al que el metacampo haga referencia. Si ya tienes una página creada, puedes ir directamente al paso 4.
Pasos:
- Desde el panel de control de Shopify, ve a Tienda online > Páginas.
- Haz clic en Agregar página.
- Crea un nombre para tu página y crea el contenido que deseas mostrar en una ventana emergente en la página de tu producto.
- En la sección Visibilidad, configura la página como Visible.
- Haz clic en Guardar.
- Desde la aplicación de Shopify, toca ... > Tienda online.
- Selecciona Páginas.
- Toca Agregar página.
- Crea un nombre para tu página y crea el contenido que deseas mostrar en una ventana emergente en la página de tu producto.
- En la sección Visibilidad, configura la página como Visible.
- Toca Guardar.
- Desde la aplicación de Shopify, toca ☰ >Tienda online.
- Selecciona Páginas.
- Toca Agregar página.
- Crea un nombre para tu página y crea el contenido que deseas mostrar en una ventana emergente en la página de tu producto.
- En la sección Visibilidad, configura la página como Visible.
- Toca ✓ para guardar.
Puedes crear tantas páginas 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. En este caso, puedes usar una plantilla de página de producto diferente para tipos de producto específicos. Por ejemplo, puedes crear una plantilla de producto para ropa con la página de la tabla de tallas en tu bloque emergente, y luego puedes crear una plantilla de producto para bolsas donde no necesites agregar el bloque emergente.
Obtén más información sobre las plantillas.
Pasos:
- 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 el metacampo de referencia de la página que creaste y luego haz clic en Seleccionar páginas.
- Selecciona la página que creaste a partir del menú desplegable.
- En la sección Plantilla de tema, selecciona la plantilla de página de producto que creaste en el paso 2.
- Haz clic en Guardar.
- 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, toca Ver todo.
- Toca el metacampo de referencia de página que creaste y luego toca para seleccionar la página que creaste.
- En la sección Plantilla de tema, selecciona la plantilla de página de producto que creaste en el paso 2.
- Toca Guardar.
- 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, toca Ver todo.
- Toca el metacampo de referencia de página que creaste y luego toca para seleccionar la página que creaste.
- En la sección Plantilla de tema, selecciona la plantilla de página de producto que creaste en el paso 2.
- Toca ✓ para guardar.
Puedes repetir estos pasos para la cantidad de productos que necesites.