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 un email el porcentaje de rebaja solo cuando exista descuento.
PASO 1. Crea un diseño de email
1. Accede a “Contenido > Email” y haz clic en Crear nuevo email.
2. Incluye en el diseño, al menos, un componente avanzado de tipo Contenido dinámico.
PASO 2. Inserta clases y estilos CSS
3. Localiza en Propiedades generales la sección "Opciones HTML > Head".
4. Introduce el siguiente código en el editor del bloque "Head" del email:
<style text="text/css">
.cn_discount_0 {
display: none !important;
}
</style>
PASO 3. Crea la variable en el contenido dinámico
5. 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.
6. Nombra la variable que mostrará el precio con descuento. Puedes llamarla: "originalPrice".
7. Haz clic en Aceptar para guardar los cambios.
8. Siguiendo los mismos pasos, crea la variable que contendrá el descuento. Puedes llamarla: "discount".
9. Dirígete a la pestaña Variables y haz clic sobre (Editar) en la variable recién creada ("originalPrice").
10. Asigna a la variable el tipo de dato "Moneda".
11. Pulsa sobre Aceptar para guardar los cambios.
12. 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.
13. 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 17 del código):
<h5 style="text-align: center;"><strong>{{title}} <span class="cn_discount_{{discount}}" style="font-size: 12pt; background-color: #ff0000; color: #ffffff;"> {{discount}}%</span></strong></h5>
El bloque que incluye el precio original tachado es el siguiente (línea 18 del código):
<h5 style="text-align: center;"><br><span class="cn_discount_{{discount}}" style="font-size: 10pt; color: #808080; text-decoration : line-through;">{{originalPrice}}</span><span style="font-size: 12pt;"> {{price}}</span></h5>
14. Haz clic en Aplicar para guardar los cambios en el código HTML y cierra el editor de email haciendo clic en Guardar.
PASO 4. Crea un workflow para mostrar el contenido web
15. Accede a “Workflows” y haz clic en Crear nuevo workflow.
16. En el nodo “Enviar contenido web”, haz clic en (Editar configuración del nodo) y configura la asignación de variables.
17. Haz clic en Finalizar > para guardar los cambios en el nodo y en Guardar para guardar todas las modificaciones del workflow.
18. Haz clic en Iniciar para activar el workflow.
19. Accede a tu gestor de correo de tipo web y revisa que los porcentajes de descuento se muestran de forma correcta en el email.
¡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 contenido web., para aplicar la misma funcionalidad en contenidos de tipo web
-
Campaña semanal de productos recomendados, para enviar todas las semanas una newsletter con recomendaciones personalizadas.
-
Carrito abandonado + recomendaciones, para enviar un email a los contactos con los productos que abandonen en un carrito y productos relacionados al mismo.
- Complementos tras compra, para enviar un email, con productos complementarios a los comprados, al contacto tras un período de tiempo sin comprar.