Elemento Producto

¿Qué es un Elemento Producto en GemPages?

El Elemento Producto es un elemento esencial que le permite añadir cualquier producto desde Shopify a GemPages. Con la introducción del Editor v7, existen cambios notables en comparación con la versión anterior.

A continuación, encontrará información detallada que cubre estas actualizaciones significativas. 

Para usar el Elemento de Producto::

• Abra la pestaña Panel de Control de GemPages y haga clic en la página objetivo para abrirla en el editor.
• En la barra lateral izquierda, localice el Elemento Producto (Lazy section loading) bajo la sección Elementos . Puede usar la barra de búsqueda para encontrar rápidamente este elemento.
• Elija su diseño de producto preferido, luego arrastre y suelte el elemento en la posición deseada en su página.

Elementos Secundarios

El Elemento Producto incluye varios elementos secundarios que ayudan a mostrar diferentes atributos del producto. Estos deben colocarse dentro del elemento para funcionar correctamente. Los elementos secundarios disponibles incluyen:

• Insignia de Producto
• Imagen de Producto
• Etiqueta de Descuento
• Título de Producto
• Descripción del producto
• Precio de Producto
• Cantidad de Producto
• Variantes y Muestras de Producto
• Proveedor de Producto
• SKU de Producto
• Descuento por Paquete de Producto
• Añadir al Carrito
• Ver Más de Producto
• Pago Dinámico
• Carga de Archivo de Producto

Nota: Los detalles del producto se extraen directamente de su tienda Shopify. Para editar la información del producto, vaya a Administración de Shopify > Productos, seleccione el producto y actualice sus detalles.

Configurar la pestaña Ajustes

En la sección Configuración , verá parámetros efectivos para ajustar la apariencia del contenido para obtener la mejor tasa de conversión posible.

Diseño

En la pestaña Diseño , seleccione el diseño preferido en el que se mostrará su producto: horizontal o vertical.

Además, en el panel de configuración ampliado, puede reorganizar, duplicar, o eliminar la columna en  Orden de columna.

En  Ancho de columna, puede cambiar el ancho para ajustarse al contenido o cambiar la proporción.

Fuente del producto

En Plantilla de Página de Producto

Si su página es una página de producto, puede cambiar la fuente del producto entre dos opciones: Mostrar por producto asignado o Selección Manual.

• Mostrar por producto asignado

Al seleccionar la opción mostrar por producto asignado, la plantilla actual se aplicará dinámicamente a todos los productos asignados. El producto se seleccionará aleatoriamente para mostrarse en la página actual del editor.

Pase el cursor sobre la fuente del producto actual y haga clic en el ícono de edición para abrir el cuadro de diálogo Seleccionar producto . Desde allí, puede seleccionar otros productos asignados disponibles.

Nota: Necesita asignar un producto a la plantilla para asegurarse de que se aplique a su página en vivo.

• Selección Manual

Esta opción le permite mostrar múltiples elementos de producto en la misma plantilla y opciones de variante específicas. 

Para hacer una selección, haga clic en Selección Manual, y se abrirá una ventana que muestra una lista de productos para que usted elija.

En Otro Tipo de Página

Si su página es otro tipo de página (es decir, página de destino, página de inicio, etc.), simplemente pase el cursor sobre el producto actual y haga clic en el ícono de  lápiz   para editar.

Luego, seleccione su producto objetivo de la lista de productos.

Espaciado entre columnas

Establezca el espaciado entre columnas usando el control deslizante o ingrese un valor exacto.

Predeterminado: 30px

Tamaño

• Ancho: Defina qué tan ancho debe ser el elemento de producto.
• Relleno: Ajuste el espaciado interno (Superior, Derecho, Inferior, Izquierdo).

Fondo

Puede establecer el color de fondo para su elemento de producto: ingrese un código de color, seleccione desde su página o elija desde una muestra de color.

Forma

Personalice el estilo del elemento de producto:

• Borde: Añada un borde sólido, discontinuo o punteado
• Radio de Esquina: Redondee los bordes (en px)
• Sombra: Aplique sombras suaves o duras para mejorar la visibilidad

Opción de visualización

Esta sección le permite controlar cómo se comportan las variantes y las cantidades cuando se muestran múltiples productos usando el Elemento de Producto.

Variante predeterminada: Active esto en SÍ si desea que una variante específica esté preseleccionada cuando se cargue la página

Nota: Para usar esta función, asegúrese de que su Fuente de producto esté configurada en Selección Manual en lugar de Producto Asignado.

Condición: Esto define cómo se vinculan las variantes y la cantidad entre productos:

• Vincular variantes, cantidad entre el mismo producto: Las variantes comparten la misma cantidad y se comportan como un bloque de producto unificado.
• Desvincular variantes, cantidad entre el mismo producto: Cada variante se trata individualmente en términos de cantidad, incluso si pertenecen al mismo producto.

Nota: Cambie la fuente del producto en el Elemento de Producto a Selección Manual para personalizar la variante predeterminada. Más información.

Alineación

En la sección  Alineación , configure la alineación vertical para su Elemento Producto. Puede seleccionar entre:

• Alinear Arriba
• Alinear al Centro
• Alinear Abajo
• Distribuir Espaciado Vertical

Configurar la pestaña Avanzada

Para opciones de estilo adicionales, navegue a la pestaña Avanzada y siga las instrucciones en este artículo.