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.
2. Incluez dans le design au moins un composant avancé de type Produits.
É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.
4. Nommez la variable qui affichera le prix avec remise. Vous pouvez l’appeler : "originalPrice".
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".
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").
8. Assignez à la variable le type de donnée "Monnaie".
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.
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}} <span style="background-color: #FF0000; color: #FFFFFF;{{__cn_expression|HIDE_WHEN_ZERO(discount)}}"> {{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;"> {{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.
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.
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 :
-
Afficher le pourcentage de remise uniquement lorsqu’il y a une réduction dans un contenu web., pour appliquer la même fonctionnalité dans des contenus de type web.
-
Campagne hebdomadaire de produits recommandés, pour envoyer chaque semaine une newsletter avec des recommandations personnalisées.
-
Panier abandonné + recommandations, pour envoyer un email aux contacts avec les produits abandonnés dans un panier et des produits associés.
- Compléments après achat, pour envoyer un email avec des produits complémentaires à ceux achetés, après une période sans achat.