connectif marketing automation
descargas

dateator

Power💪 para tus workflows

Carrusel de productos mostrando precio rebajado

Licencia de Creative Commons
Licencia de Creative Commons
 

Lo que conseguirás

Muestra de forma automática el precio del producto rebajado si lo tiene, es decir, si en el catálogo de productos de connectif aparece con descuento entonces aparecerá en caso contrario no. Dale también mayor visibilidad con una etiqueta con el porcentaje de descuento en la parte superior. Vas a mejorar la experiencia de usuario, dándole mayor accesibilidad y visibilidad a los productos o artículos de interés para él, incrementando de esta forma las probabilidades de conversión.

¿De qué tipo de contenido se trata?

Se trata de un contenido inline de connectif que podrás insertar en un punto estratégico dentro de tu web y que muestra un carrusel de productos hiperpersonalizados.
 

¿En qué estrategias digitales lo puedes incluir?

Este contenido inline de connectif está indicado para estrategias de hipercontextualización web con el fin de mejorar el acceso del usuario a sus productos favoritos evitando de esta forma posibles deficiencias de accesibilidad y usabilidad del sitio web (de verdad que funciona 😀). ¡haz del journey del usuario toda una experiencia! También lo podrás usar en tus estrategias de cross-selling y up-selling incrementando de esta forma el ticket medio de compra! ¿Has pensado colocarlo en el interior de un pop up? ¡Adelante, prueba y testea con distintas alternativas!

Te lo explicamos

A continuación te vamos a explicar en qué consiste este carrusel de productos que muestra el precio de tus productos tanto original como el rebajado en el caso de que esté en promoción. ¡Todo quedará listo para una experiencia de usuario 10.

¡Aquí lo tienes en acción!

 

¿Cómo sabe el carrusel que tiene que mostrar el precio rebajado?

 

Esto lo podemos hacer de diversas maneras. En este caso, lo hacemos mediante la declaración de clases que dependiendo de un valor harán que la caractarística display:none trabaje o no, mostrando ambos precios.

 
pantalla-dateator-workflow-connectif

Aquí te presentamos una forma que pensamos es muy sencilla e intuitiva.

Por seguir un orden, lo primero que hacemos es declarar una variable que vamos a llamar «discount» (en inglés suena más pro 😊), tipo de dato «Número» y en Formato elegimos en el desplegable sin decimales, tal y como vemos en esta imagen ⬇️.

 
 

Ahora creamos una clase de estilos denominada cn_hide_{{discount}} que usará la variable dinámica que acabamos de declarar y que asignaremos a ella. Este trozo de código queda incluido dentro de un bloque tipo html dentro de connectif.


<style>
.cn_hide_0 {
 display:none;
}
</style>
 

Cuando vayamos a paremetrizar el workflow tendremos que asignar la variable «Porcentaje de rebaja» del nodo «obtener productos» a nuestra variable «discount».

<span style="font-size:0.85em;color:{{color-unitPrice}};">{{unitPrice}}</span> <span class="original_price cn_hide_{{discount}}"  style="font-size:0.7em;color:{{color-originalPrice}};"><strike>{{originalPrice}}</strike></span>
 
 

Y con esto hemos terminado, a partir de ahora podrás configurar tus carruseles de producto de connectif de forma sencilla y sin necesidad de tener conocimientos en programación. ⬇️¡Descargátelo más abajo!⬇️

 

¿Te ha gustado este contenido web?

¡Puntúalo con un click!

Promedio de puntuación 5 / 5. Recuento de votos: 1

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

carrusel productos con connectif
 

¿Necesitas una mano para sacar el 100% a tu cuenta de connectif?

Contacta con nosotros sin compromiso y vemos cómo te podemos ayudar en tu estrategia de marketing digital.