Cómo diseñar una página de detalles de producto con elementos de producto en GemPages

Puede crear su página de detalles de producto de una de las siguientes maneras:

• Utilizando una sección de detalles del producto prediseñada desde el biblioteca de plantillas.
• Empezando desde cero con elementos del producto

¿Cuáles son los elementos del producto?

El Elemento Producto en GemPages le permite mostrar dinámicamente información de productos de Shopify en su página.

Uso: Sólo se puede utilizar dentro de un Módulo Producto, que sirve como contenedor para todos los elementos relacionados con el producto.

Elementos secundarios: Mejore la página de detalles de su producto con lo siguiente:

• Elementos principales: Imagen, Título, Descripción, Precio, Variantes, Botón Añadir al carrito
• Otros elementos: SKU, Insignia de producto, Impulsores de conversión (Temporizadores de cuenta regresiva, Contadores de stock, etc.)

Cómo diseñar una página de detalles de producto utilizando elementos de producto

Paso 1: Abra el Editor de GemPages En tu tienda Shopify. Selecciona la página del producto que quieres editar o crea una nueva página desde cero.

Paso 2: En la barra lateral izquierda, arrastre y suelte un Módulo Producto en su página. 

Por defecto, el módulo incluye elementos principales como Imagen, título, descripción, precio, variantes y botón Agregar al carrito, sincronizado automáticamente desde Shopify.

Elementos clave del producto para agregar y personalizar

1. Título del producto

El título se mostrará de forma predeterminada cuando agregues el elemento. Si se elimina o es necesario reposicionarlo, arrástralo y suéltalo desde la barra lateral.

2. Imágenes y miniaturas de productos (imagen, vídeo, banner de vídeo, etc.)

La imagen se mostrará de forma predeterminada al agregar el módulo de producto. Si se elimina o se desea colocar una imagen adicional, arrastre el Imagen de Producto elemento de la barra lateral a una nueva posición. Este elemento admite Imágenes de productos, vídeos y banners de vídeo. para ayudar a mostrar su producto visualmente.

Más información: Guía de elementos de imagen del producto

3. Insignia del producto

Las insignias de producto, como “Oferta con 50 % de descuento” o “Edición limitada”, ayudan a resaltar los atributos especiales de su producto.

En el elemento Producto, arrastre y suelte el Elemento de insignia del producto en el editor de GemPages.

Más información: Guía de elementos de la insignia del producto

4. Código SKU del producto

Mostrar el SKU (unidad de mantenimiento de stock) ayuda tanto a los clientes como a los gerentes de tienda a rastrear los productos de manera eficiente.

Busque el SKU de Producto en el elemento de producto. Arrástrelo y suéltelo en el editor de GemPages.

Más información: Guía de elementos de SKU de productos

5 Descripción del producto

Las descripciones de productos aparecen de forma predeterminada, pero se pueden mover. 

Arrastrar el Descripción del producto elemento de la barra lateral si se necesitan ajustes.

6 Precio del producto

El precio aparece de forma predeterminada y se extrae directamente de Shopify.

Reposicionar el Precio de Producto elemento arrastrándolo a su lugar preferido si es necesario.

Más información: Guía de elementos de precio del producto

7. Cantidad de producto

Muestra el selector de cantidad, permitiendo a los clientes elegir la cantidad de artículos que desean comprar.

Si reposiciona o quita el Cantidad de Producto elemento, arrástrelo desde la barra lateral hasta donde desea que se muestre.

Más información: Guía de elementos de cantidad de producto

8. Opciones/Variantes del producto

Las variantes del producto, como el color, el tamaño y el material, se cargan automáticamente.

Para ajustar la pantalla o cambiar la posición de las opciones del producto, arrastre el Variantes del producto elemento en la ubicación deseada. Puede personalizar los estilos de las variantes con muestras de opciones de color o menús desplegables para una selección más sencilla.

Más información: Guía de variantes de productos y muestras

Las variantes gestionan atributos como color, talla y material (si se definen como variantes de Shopify). Sin embargo, para obtener información adicional que no afecte al SKU (como las instrucciones de cuidado), usa los metacampos de producto de Shopify y muéstralos mediante texto dinámico o bloques personalizados dentro de tu módulo de producto.

9. Botón Agregar al carrito/Comprar ahora

Este botón está incluido de forma predeterminada y puedes personalizar su color, texto y tamaño para que se destaque en la página.

Arrastre el botón desde la barra lateral si se eliminó o se reubicó. Personalice el comportamiento del botón para redirigirlo al proceso de pago, abrir el cajón del carrito o permanecer en la misma página.

Más información: Guía de elementos del botón Agregar al carrito

10. Impulsores de la conversión

Agregar elementos que creen urgencia o proporcionen prueba social puede aumentar significativamente las conversiones.

• GemPages te permite agregar Temporizadores de cuenta regresiva or Contadores de stock
• También puedes integrar Insignias de confianza or Reseñas desde aplicaciones de terceros. Para obtener instrucciones detalladas sobre cómo integrar una aplicación de terceros con GemPages, consulte este artículo.

Paso 4: Una vez que esté satisfecho con su diseño, guarde su progreso y publique sus cambios.

Preguntas Frecuentes

1. ¿Puedo usar una plantilla de página de producto para diferentes productos con diferente información?

Sí. Puedes crear una plantilla de página de producto universal usando el Elemento Producto y extraer contenido único específico del producto utilizando Metacampos de productos de ShopifyEsto permite que cada producto muestre su propio contenido dinámico incluso cuando comparten el mismo diseño de página.

2. ¿Puedo editar el título o la descripción del producto directamente dentro de GemPages?

No. Los elementos Título y Descripción del Producto obtienen datos automáticamente del Panel de Control de Shopify. Si necesita cambiarlos, debe editarlos directamente en el Panel de Control de Shopify.

3. ¿Los metacampos de producto son compatibles con todos los planes de GemPages?

Los metacampos de producto son compatibles con GemPages V7. Sin embargo, asegúrese de que su plan incluya la función de texto dinámico para aprovecharla al máximo.