Destacar los precios rebajados y su porcentaje de descuento en los productos recomendados, permite aumentar las conversiones en el eCommerce. Por medio de estilos y clases CSS, podrás mostrar el porcentaje de rebaja y el importe original tachado, junto al valor actual, sólo en los productos que estén en oferta.
En este artículo, aprenderás cómo mostrar en contenidos web el porcentaje de rebaja sólo cuando exista descuento.
Tiempo de implementación: 15 minutos.
Dificultad: Media
¿Cuándo utilizarlo?: En contenidos que muestren productos con y sin descuento.
PASO 1. Crea un contenido web
1. Accede a “Contenido > Contenido web” y haz clic en Crear nuevo contenido web.
2. Escoge el tipo de contenido web adecuado, asígnale un nombre y pulsa sobre Crear contenido web.
Si te interesa saber más sobre los cinco tipos de contenido web, haz clic aquí.
3. Incluye, al menos, un componente avanzado de tipo Productos.
Para este paso te recomendamos echar un vistazo al Editor de contenido web y a cómo crear un bloque de productos personalizados en un contenido web.
PASO 2. Inserta clases y estilos CSS
4. Añade un Componente HTML en la parte superior del diseño.
5. Introduce el siguiente fragmento de código, remplazando el contenido del elemento HTML.
<style text="text/css">
.cn_discount_0 {
display: none !important;
}
</style>
PASO 3. Crea las variables en el contenido dinámico
6. Selecciona el bloque de productos dinámico y, en el editor incluido en Propiedades, haz clic en Variables para crear una nueva en el lugar donde quieras que se visualice el precio con descuento.
7. Nombra la variable que mostrará el precio con descuento. Puedes llamarla: "originalPrice".
8. Haz clic en Aceptar para guardar los cambios.
9. Repite las acciones de los puntos 6, 7 y 8 para crear la variable que contendrá el descuento. Puedes llamarla: "discount".
Destacar los porcentajes de descuento, con un diseño atractivo, facilitará que el contacto les preste mayor atención, por lo que te animamos a darle estilo para aumentar la probabilidad de conversión.
En nuestro ejemplo, el descuento se muestra en letras blancas sobre fondo rojo y el precio original se ha tachado. Puedes copiar el código CSS en el punto 14.
10. Dirígete a la pestaña Variables y haz clic sobre (Editar) en la variable recién creada ("originalPrice").
11. En el campo Tipo de dato selecciona "Moneda".
12. Pulsa sobre Aceptar para guardar los cambios.
A la variable "discount" no se le asigna formato para facilitar el funcionamiento del código introducido en el componente HTML. No obstante, se añade el símbolo de porcentaje (%) en el editor para que se muestre en el contenido.
13. Selecciona de nuevo el bloque de productos dinámico y, en la pestaña Propiedades, haz clic sobre el botón Editar código HTML.
14. En el editor del contenido dinámico, asigna la clase CSS "cn_discount_{{discount}}" a los elementos que muestran las variables del precio original y del descuento.
El bloque que incluye el porcentaje de descuento es el siguiente (línea 2 del código):
<div class="cn_element_products_2_name" style="margin-top: 15px; word-wrap: break-word; white-space: normal; overflow: hidden; height: 2.1em; line-height: 1em; box-sizing: border-box;"><strong>{{name}} <span class="cn_discount_{{discount}}" style="color: white; background-color: #ff0000;">{{discount}}%</span></strong></div>
El bloque que incluye el precio original tachado es el siguiente (línea 3 del código):
<div class="cn_element_products_2_unit_price" style="color: #999999; font-size: 0.9em; word-wrap: break-word; white-space: normal; overflow: hidden; height: 1.1em; line-height: 1em; box-sizing: border-box;"><span style="font-size: 12pt;"><span class="cn_discount_{{discount}}" style="font-size: 14.4px; text-decoration-line: line-through;">{{originalPrice}}</span> {{unitPrice}}</span></div>
15. Haz clic en Aplicar para guardar los cambios del HTML y en Guardar para guardar el contenido web.
PASO 4. Crea un workflow para mostrar el contenido web
16. Accede a “Workflows” y haz clic en Crear nuevo workflow.
Para agilizar la tarea, puedes hacer uso de alguna de nuestras plantillas, por ejemplo: recomendador en ficha de producto o crosselling en home. Recuerda que tendrás que configurar el workflow siguiendo las instrucciones antes de continuar con este artículo.
En caso de querer diseñar la estrategia desde cero, te recomendamos echar un vistazo a cómo Mostrar productos personalizados en un contenido.
17. En el nodo “Enviar contenido web”, haz clic en (Editar configuración del nodo) y configura la asignación de variables.
18. Haz clic en Finalizar para guardar los cambios en el nodo y en Guardar para guardar todas las modificaciones del workflow.
19. Haz clic en Iniciar para activar el workflow.
20. Accede a tu web y revisa que los porcentajes de descuento se muestran de forma correcta.
¡Éxito!
Los porcentajes de rebaja de tus productos serán mostrados cuando tengan aplicado un descuento.
¡Sigue aprendiendo!
Para aprovechar todo el potencial de tu cuenta en Connectif, te recomendamos continuar con los siguientes artículos:
- Mostrar porcentaje de rebaja solo cuando exista descuento en un email, para aplicar la misma funcionalidad en emails.
-
Recomendador en home, para mostrar productos recomendados en función de la actividad del contacto en la web.
- Best sellers en ficha de producto, para mostrar al contacto, cuando visita un producto, los artículos más vendidos en la misma categoría.
-
Recomendador en checkout, para mostrar en el checkout productos relacionados con el carrito.