Mostrar porcentaje de rebaja solo cuando exista descuento en un email

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.

  

Tiempo de implementación: 15 minutos.
Dificultad: Media
¿Cuándo utilizarlo?: En emails que muestren productos con y sin descuento.

 

PASO 1. Crea un diseño de email

1. Accede a “Contenido > Email” y haz clic en  Crear nuevo email.

Mostrar_porcentaje_de_rebaja_en_EMAIL-__1.png

2. Incluye en el diseño, al menos, un componente avanzado de tipo Contenido dinámico.

Mostrar_porcentaje_de_rebaja_en_EMAIL-__2.png

  

Para aprender más sobre cómo usar el Editor de email, haz clic aquí.

Para aprender más sobre cómo crear un bloque de productos personalizados en un email, haz clic aquí.

 

PASO 2. Inserta clases y estilos CSS

3. Localiza en  Propiedades generales la sección "Opciones HTML > Head".

Mostrar_porcentaje_de_rebaja_en_EMAIL-__3.png

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>
 

Este código sólo será interpretado en gestores de correo de tipo web como Gmail o al seguir el enlace "Ver en navegador".

En general, aplicaciones de escritorio cómo Outlook no reconocen ciertas reglas de estilo necesarias para la visualización del descuento sólo en caso de que exista rebaja.

 

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.

Mostrar_porcentaje_de_rebaja_en_EMAIL-__4.png

6. Nombra la variable que mostrará el precio con descuento. Puedes llamarla: "originalPrice".

Mostrar_porcentaje_de_rebaja_en_EMAIL-__5.png

7. Haz clic en  Aceptar para guardar los cambios.

8. Siguiendo los mismos pasos, crea la variable que contendrá el descuento. Puedes llamarla: "discount".

Mostrar_porcentaje_de_rebaja_en_EMAIL-__6.png

 

Aprovecha para dar estilo a las variables para que se distingan entre ellas. El diseño facilita que el contacto preste atención a aquello que se quiera destacar.

En el ejemplo, el descuento se muestra en letras blancas sobre fondo rojo y el precio original se ha tachado por medio de CSS (tienes el código en el PASO 3).

9. Dirígete a la pestaña Variables y haz clic sobre  (Editar) en la variable recién creada ("originalPrice").

Mostrar_porcentaje_de_rebaja_en_EMAIL-__7.png

10. Asigna a la variable el tipo de dato "Moneda".

Mostrar_porcentaje_de_rebaja_en_EMAIL-__8.png

11. 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 bloque "Head" del email. No obstante, se añade el símbolo de porcentaje (%) en el editor para que se muestre en el contenido.

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.

Mostrar_porcentaje_de_rebaja_en_EMAIL-__9.png

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.

Mostrar_porcentaje_de_rebaja_en_EMAIL-__10.png

El bloque que incluye el porcentaje de descuento es el siguiente (línea 17 del código):

<h5 style="text-align: center;"><strong>{{title}}&nbsp;&nbsp;<span class="cn_discount_{{discount}}" style="font-size: 12pt; background-color: #ff0000; color: #ffffff;">&nbsp;{{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;">&nbsp;&nbsp;{{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.

 

Para agilizar la tarea, puedes hacer uso de nuestra plantilla Campaña semanal de productos recomendados. Recuerda que tendrás que configurar el workflow siguiendo las instrucciones antes de continuar con este artículo.

En caso de querer hacerlo desde cero, te recomendamos echar un vistazo a cómo Mostrar productos personalizados en un contenido.

16. En el nodo “Enviar contenido web”, haz clic en   (Editar configuración del nodo) y configura la asignación de variables.

Mostrar_porcentaje_de_rebaja_en_EMAIL-__11.png

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.

Mostrar_porcentaje_de_rebaja_en_EMAIL-__12.png

 

 ¡É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:

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 0 de 0