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.
É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".
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.
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.
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.
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.