Cas d'utilisation des variables : Afficher le pourcentage de remise uniquement lorsqu'une réduction existe dans un e-mail

Mettre en valeur les prix réduits et leur pourcentage de remise sur les produits recommandés permet d’augmenter les conversions dans le eCommerce. Grâce aux styles et classes CSS, vous pouvez afficher le pourcentage de remise et le montant original barré, à côté du prix actuel, uniquement pour les produits en promotion. 

Dans cet article, vous apprendrez comment afficher dans un e-mail le pourcentage de remise uniquement lorsqu’une réduction est appliquée.

 

Notez que cette méthode est compatible avec la majorité des clients de messagerie, cependant, Outlook ne prend pas en charge la fonction CSS utilisée, donc ce guide ne sera pas fonctionnel dans ce client.

  

Temps de mise en œuvre : 15 minutes.
Difficulté : Moyenne
Quand l’utiliser ? : Dans des emails affichant des produits avec et sans réduction.

 

ÉTAPE 1. Créer un design d’email

1. Accédez à “Contenu > Email” et cliquez sur  Créer un nouvel email.

Afficher pourcentage de remise seulement en cas de réduction dans un e-mail - 1-min.png

2. Incluez dans le design au moins un composant avancé de type Produits.

Afficher pourcentage de remise seulement en cas de réduction dans un e-mail - 2-min.png

  

Pour en savoir plus sur l’utilisation de l’Éditeur d’email, cliquez ici.

Pour en savoir plus sur la création d’un bloc de produits personnalisé dans un email, cliquez ici.

 

ÉTAPE 2. Créer les variables dans le contenu dynamique

3. Sélectionnez le bloc de produits et, dans l’éditeur intégré sous Propriétés, cliquez sur Variables pour en créer une nouvelle à l’endroit où vous souhaitez afficher le prix avec remise.

Afficher pourcentage de remise seulement en cas de réduction dans un e-mail - 3-min.png

4. Nommez la variable qui affichera le prix avec remise. Vous pouvez l’appeler : "originalPrice".

Afficher pourcentage de remise seulement en cas de réduction dans un e-mail - 4-min.png

5. Cliquez sur  Accepter pour enregistrer les modifications.

6. Suivez les mêmes étapes pour créer la variable qui contiendra la remise. Vous pouvez l’appeler : "discount".

Afficher pourcentage de remise seulement en cas de réduction dans un e-mail - 5-min.png

 

Profitez-en pour styliser les variables afin qu’elles soient bien différenciées. Un bon design permet d’attirer l’attention du contact sur ce que vous souhaitez mettre en avant.

Dans l’exemple, la remise s’affiche en lettres blanches sur fond rouge et le prix d’origine est barré via CSS (le code est dans l’ÉTAPE 3).

7. Rendez-vous dans l’onglet Variables et cliquez sur  (Modifier) sur la variable récemment créée ("originalPrice").

Afficher pourcentage de remise seulement en cas de réduction dans un e-mail - 6-min.png

8. Assignez à la variable le type de donnée "Monnaie".

Afficher pourcentage de remise seulement en cas de réduction dans un e-mail - 7-min.png

9. Cliquez sur  Accepter pour enregistrer les modifications. 

  

Répétez les étapes 7, 8 et 9 sur la variable "discount" pour définir le type de donnée "Pourcentage".

10. Sélectionnez à nouveau le bloc de produits dynamique et, dans la section Éditeur, cliquez sur l’option HTML.

Afficher pourcentage de remise seulement en cas de réduction dans un e-mail - 8-min.png

11. Dans l’éditeur du contenu dynamique, appliquez les styles CSS suivants aux éléments affichant les variables du prix d’origine et de la remise :

  • Le bloc qui affiche le pourcentage de remise est le suivant :
<h5 style="text-align: center;"><strong>{{title}}&nbsp;&nbsp;<span style="background-color: #FF0000; color: #FFFFFF;{{__cn_expression|HIDE_WHEN_ZERO(discount)}}">&nbsp;{{discount}}</span></strong></h5>
  • Le bloc qui affiche le prix d’origine barré est le suivant :
<h5 style="text-align: center;"><br><span style="color: #808080; text-decoration : line-through;{{__cn_expression|HIDE_WHEN_ZERO(discount)}}">{{originalPrice}}</span><span style="font-size: 12pt;">&nbsp;&nbsp;{{price}}</span></h5>

 

12. Cliquez sur  Appliquer pour enregistrer les modifications du code HTML, puis fermez l’éditeur d’email en cliquant sur  Enregistrer

 

ÉTAPE 3. Créer un workflow pour envoyer l’email

13. Accédez à “Workflows” et cliquez sur  Créer un nouveau workflow.

 

Pour gagner du temps, vous pouvez utiliser notre modèle Campagne hebdomadaire de produits recommandés. N’oubliez pas de configurer le workflow selon les instructions avant de poursuivre avec cet article.

Si vous préférez le faire depuis zéro, nous vous recommandons de consulter Comment afficher des produits personnalisés dans un contenu.

14. Dans le nœud “Envoyer un email”, cliquez sur   (Modifier la configuration du nœud) et configurez l’attribution des variables.

Afficher pourcentage de remise seulement en cas de réduction dans un e-mail - 9-min.png

15. Cliquez sur Appliquer pour enregistrer les modifications du nœud et sauvegardez toutes les modifications du workflow.

16. Cliquez sur   Démarrer pour activer le workflow.

17. Accédez à votre client de messagerie web et vérifiez que les pourcentages de remise s’affichent correctement dans l’email.

Afficher_pourcentage_de_remise_EMAIL-__12.png

 

 Succès !
Les pourcentages de remise de vos produits seront affichés lorsqu’une réduction sera appliquée.


Continuez à apprendre !

Pour tirer pleinement parti de votre compte Connectif, nous vous recommandons de consulter les articles suivants :