Elemento Insignia de Product

Acerca del Elemento Insignia de Product

El elemento Insignia de Product de GemPages está diseñado para enfatizar detalles clave sobre un producto, como etiquetar una nueva llegada o mostrar una promoción directamente en la imagen destacada. 

Con este elemento, puede obtener múltiples ventajas para su tienda de comercio electrónico: 

• Visibilidad Mejorada: Aumente la visibilidad del producto haciendo que elementos particulares se destaquen, asegurando que capturen la atención de los clientes.
• Mayor Confianza en la Marca: Impulse la credibilidad con insignias como "Mejor Valorado" or "Favorito del Cliente", mostrando reseñas positivas y respaldos para generar confianza con los compradores.
• Acción Fomentada: Cree urgencia con insignias como “¡Solo quedan 2!” or "Terminará Pronto" , impulsando a los clientes a actuar rápidamente y completar sus compras.
• Estrategia de Precios Probada: Experimente y determine la estrategia de precios más efectiva para cada artículo ofreciendo diferentes descuentos para cada producto.
• Gestión de Inventario Mejorada: Venda artículos de movimiento lento o exceso más rápidamente, reduciendo costos de almacenamiento y haciendo espacio para nuevo stock con insignias como "Liquidación de Inventario" or "Reducción de Inventario".
• Promoción Dirigida: Establezca diferentes descuentos para varias categorías de productos, niveles de inventario u objetivos de ventas. Insignias como "Venta por Categoría", "Promoción Estacional" or "Oferta Semanal" facilitan crear promociones que coincidan con sus necesidades comerciales.

Cómo Agregar el Elemento Insignia de Product

Paso 1: Abra su editor de GemPages y introduzca el Elemento Insignia de Product en la barra de búsqueda.

Paso 2: Arrastre el elemento desde la barra lateral y suéltelo en su área de diseño. Solo puede agregar el Insignia de Product a un Elemento Producto, elemento Lista de Productos, o directamente en sus Imágenes de Producto. La configuración de insignia puede variar dependiendo de su ubicación.

Paso 3: Puede agregar múltiples insignias al mismo producto. Por defecto, las insignias aparecen en la esquina superior izquierda. Si se agregan múltiples insignias, se apilarán verticalmente. Para ajustar su orden o visibilidad, use la característica de Árbol de Capas .

Paso 4: Después de colocar sus insignias, haga clic en Publicar para verlas en vivo. En el editor, las insignias siempre son visibles para ajustes más fáciles, pero solo aparecen en la página en vivo si cumplen las condiciones de visualización que estableció.

Para acceder a la configuración de insignia, haga clic en el elemento. La barra lateral izquierda mostrará dos pestañas: Configuración y Avanzada:

Configurar la Pestaña de Configuración

1. estilo

Elija el estilo de insignia que se ajuste a su diseño. Las opciones disponibles incluyen:

• Imagen
• Texto Horizontal
• Texto en la Esquina 1
• Cinta de Texto 1
• Texto en la Esquina 2
• Cinta de Texto 2
• Texto Vertical
• Estrella de Texto
• Cuadrado de Texto

2. Fuente de Producto

La sección Fuente de Producto muestra de qué producto la insignia está mostrando información. Para cambiar el producto, haga clic en Selector de Producto en el módulo de producto y seleccione el artículo deseado.

3. Texto

La configuración de texto está disponible para estilos que muestran contenido de texto.

• Estilo de Texto Predeterminado: Párrafo 1
• Color Predeterminado: FFFFFF (blanco)

En GemPages, editar contenido de texto requiere abrir una ventana emergente. Puede:

• Introducir texto largo con saltos de línea.
• Usa Fragmentos de Descuento para mostrar información dinámica del producto desde Shopify.

Para usar fragmentos:

• Escriba manualmente un descuento usando el formato correcto. Solo los formatos válidos renderizan datos en vivo.
• Haga clic en el botón ícono "+" dentro del campo de entrada para abrir una lista de descuentos compatibles.

• Seleccione un descuento de la lista para insertarlo, o inserte el mismo descuento múltiples veces.

Patrones de Descuento Compatibles:

• {%_descuento} – Muestra el porcentaje de descuento.
• {descuento_por_cantidad} – Muestra la cantidad de descuento en la moneda de su tienda.
• {tipo_de_producto} – Muestra el tipo de producto.
• {precio_mínimo} – Muestra el precio más bajo entre todas las variantes del producto.
• {cantidad_de_inventario} – Muestra el inventario restante. Esto solo funciona si Seguir Cantidad está habilitado para el producto.

4. Estilo de Insignia

Esta configuración le permite ajustar la forma y el estilo visual alrededor del texto. Puede personalizar:

• Borde
• Esquina:
• Sombra:

5. Tamaño

Configure Ancho, Altura y Relleno de su insignia para que coincida con su diseño.

6 Posición

La configuración de posicionamiento global se aplica a todos los estilos de insignia. Cuando cambia estilos, su configuración de posición se conserva.

Configuración de Espacio:

• Dependiendo de la posición de la insignia, puede ajustar el espaciado usando un Control Deslizante de Espaciado.
• Solo se permiten valores enteros; no se admiten valores negativos o decimales.

7. Estilo de Imagen

Si su insignia usa una imagen en lugar de texto, puede personalizar:

• Borde
• Esquina:
• Sombra:

8. Condiciones de Visualización

Las condiciones de visualización controlan cuándo una insignia aparece en la página en vivo. Cambiar entre estilos retiene todos los valores previamente establecidos.
Tipos de Activadores:
Puede aplicar múltiples activadores haciendo clic en el ícono ➕. Los activadores disponibles incluyen:

• Inventario del Producto: Es obligatorio y no se puede eliminar. Se muestra cuando el inventario coincide con una cantidad específica.
• Precio de Descuento: Se muestra cuando el descuento alcanza un porcentaje o cantidad establecida.
• Rango de Precio: Se muestra si el precio del producto está dentro de un rango específico.
• Etiquetas del Producto: Se muestra si el producto tiene las etiquetas seleccionadas.
• Fecha de Creación: Se muestra si el producto fue creado dentro de X días, en una fecha específica, o entre dos fechas.

Condición Especial: El inventario es el único activador activo si:

• El producto se selecciona manualmente.
• Solo un producto está asignado en modo dinámico.
• La Lista de Productos contiene un solo producto.

Haga clic dentro del campo de entrada del activador para abrir la ventana emergente y configurar ajustes detallados para cada activador.

Cómo mostrar el porcentaje de descuento con la insignia del producto

Paso 1: Seleccione la Insignia de Producto elemento que has añadido a tu página.

Paso 2: En la barra lateral izquierda, abra el Configuración .

Paso 3: Vaya a la Texto .

Paso 4: Haga clic dentro del campo de entrada de texto para abrir la ventana emergente.

Paso 5: Insertar el {%_discount} rebaja por:

• Escribiéndolo manualmente, o
• Al hacer clic en el "+" icono y seleccionar Descuento (%) de la lista de rebajas.

Paso 6: Personalice el estilo del texto, el color y la tipografía según sea necesario.

Paso 7: (Opcional) Ajuste el Estilo de insignia, Tamaño y Posición Para combinar con tu diseño.

Paso 8: Haga clic en Publicar para aplicar los cambios.

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.