Elemento de Precio de Producto

Acerca del Elemento de Precio de Producto

En elEditor de GemPages 7.0, el elemento Precio del Producto combina dos elementos separados:PrecioyPrecio de Comparación. El elemento de Preciomuestra el precio regular de un producto, mientras que el elemento Precio de Comparaciónmuestra el precio con descuento o el precio original si se aplica una oferta. Mostrar ambos precios simultáneamente hace que tu oferta sea más atractiva y es un método comprobado para aumentar las conversiones.

¿Cómo Agregar el Elemento de Precio de Producto?

En el campo Panel de Control de GemPages, abra la plantilla que prefieras para acceder al Editor. Puede encontrar rápidamente estos dos elementos en la barra lateral izquierda, bajo la sección Producto .

Como elemento secundario, el elemento Precio y Comparar precios debe estar ubicado en un Módulo de Producto para que funcionen correctamente.  

GemPages te permite cambiar el formato de precios para mostrar el sufijo de la moneda. Para usar este formato, ve a Panel de GemPages → Preferencias y habilitar Mostrar precio con moneda.

Después de habilitarlo, necesitas publicación forzada páginas que contienen el elemento Precio o Comparar precios para aplicar el formato actualizado en páginas activas.

Cómo Mostrar el Precio de Comparación Junto al Precio Normal

Por lo general, el Precio de Comparación se coloca junto al Precio Normal para resaltar descuentos y fomentar las compras. Siga estos pasos para configurarlo:

Paso 1: Establecer el Precio de Oferta y el Precio de Comparación en Shopify

Antes de mostrar el Precio de Comparación en GemPages, asegúrese de haber configurado tanto el precio regular como el precio de oferta para su producto en Shopify. Puede seguir las directrices de Shopify para configurarlos correctamente.

Paso 2: Agregar un elemento de fila

En el Editor de GemPages, arrastre y suelte el elemento Fila en la ubicación de su página donde desea que aparezcan los precios. Selecciona un Diseño de 2 columnas y establezca Ancho de columna a Adaptarse al contenido. Esto permite que las columnas se ajusten automáticamente al contenido interior.

Paso 3: Insertar Elementos de Precio en las Columnas

Coloque el Elemento de precio en una columna y la Elemento Comparar precio en la otra columna. Ajuste la alineación, el espaciado o el estilo según sea necesario para que se ajuste a su diseño preferido.

Configurar la Pestaña de Configuración

Tanto los elementos Precio como Precio de Comparación comparten opciones de configuración casi idénticas, excepto por la configuración de tachado que se aplica al Precio de Comparación.

Fuente del producto

Esta configuración determina de qué producto el elemento muestra la información de precios. De forma predeterminada, utiliza el producto asignado en el Módulo de Producto. Puede cambiar el producto abriendo el Selector de Producto en la configuración del módulo de producto.

Estilos de texto

En este punto, tiene la capacidad de ajustar la tipografía del texto. Aquí están las opciones disponibles:

1. EstilosSeleccione su estilo deseado de las opciones predefinidas, que incluyen 6 estilos de encabezado y 3 estilos de párrafo.

2. FuenteElija la fuente que desea utilizar para el texto dentro de este bloque de texto. Si desea utilizar una fuente que no está en la lista, puede consultar la guía proporcionada en Cómo agregar una fuente personalizada en Editor v7.

3. Tamaño: Ajuste el tamaño de la fuente especificando un valor en píxeles.

4. Color: Seleccione un color para el texto.

5. Alineación : Determine cómo se posiciona el texto en su página. Hay cuatro opciones para elegir: alineado a la izquierda, centrado, alineado a la derecha y justificado.

Haga clic en el elemento Mostrar más para revelar más opciones de personalización. 

6. Grosor de fuente: Elija el peso de fuente que desee en el menú desplegable provisto.

7. Altura de líneaAjuste la altura del texto especificando un valor porcentual.

8. Espaciado entre letrasModifique el espaciado entre letras ingresando un valor en píxeles.

9. Transformar: Transforma el texto de una de las siguientes maneras: 

• No se aplica transformación.
• Mayúsculas:Convierte todo el texto a mayúsculas.
• Minúsculas:Convierte todo el texto a minúsculas.
• Capitalizar:Escribe con mayúscula la primera letra de cada palabra.

10. Sombra:

Puede agregar sombras de texto para mayor profundidad visual:

• Dirección: Especifique el ángulo de la sombra.
• Color: Elija el color de la sombra.
• Distancia: Establezca qué tan lejos aparece la sombra del texto.
• Difuminar: Ajuste la suavidad de los bordes de la sombra.

Tachado

Esta configuración es exclusiva del precio de comparación. Simplemente actívela para habilitar la línea tachada sobre el precio.  

• Color: Elija su color de línea preferido de la paleta o ingrese el código de color hexadecimal.
• Espesor: Ajuste el grosor utilizando el control deslizante o ingresando un número específico en el cuadro. 

Configurar la pestaña Avanzada

Para una personalización más avanzada, navegue a la pestaña Avanzada y siga las instrucciones en este artículo.

Cómo hacer que el elemento de precio del producto se mantenga fijo

Puedes fijar el elemento de precio del producto para que permanezca visible mientras los clientes navegan por la página. Esto resulta útil para que la información de precios esté siempre accesible, especialmente en páginas de productos extensas.

Siga estos pasos para configurar el elemento Precio del producto como fijo:

Paso 1: Seleccione el elemento de precio del producto.

En el Editor de GemPages, haga clic en el Elemento de precio del producto que quieres que se vuelva pegajoso.

Paso 2: Abra la configuración avanzada.

Una vez seleccionado, vaya a la Avanzado pestaña en el panel de configuración de la izquierda.

Paso 3: Establezca la posición en Fija

Desplácese hasta la sección Posición sección. Cambiar el Posición el establecimiento de Fija.

Solución de Problemas: El Precio se Muestra Incorrectamente

1. Asegúrese de la Colocación Adecuada del Elemento de Precio

• Abra su página en el editor de GemPages.
• Asegúrese de que el elemento Precio esté colocado dentro de un módulo de producto.
• Si no es así, arrastre un Módulo de Producto a la página y anide el Elemento de Precio dentro de él.

2. Verificar la asignación del producto en el módulo de productos

• Seleccione el módulo de producto en el editor de GemPages.
• En el panel de configuración, asegúrese de que esté asignado el producto correcto.
• Puede elegir mostrar por producto asignado o seleccionar un producto específico manualmente.

3. Confirmar el estado y la disponibilidad del producto en Shopify

• Vaya a su Administrador de Shopify > Productos.
• Seleccione el producto en cuestión.
• Asegúrese de que el estado del producto esté configurado como “Activo”.
• En “Canales de venta y aplicaciones”, confirma que esté seleccionado “Tienda en línea”.

4. Actualizar el precio del producto y el formato de moneda en Shopify