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é de la valeur actuelle, uniquement pour les produits en promotion.
Dans cet article, vous apprendrez comment afficher dans les contenus web le pourcentage de remise uniquement lorsqu’il y a une réduction.
Temps de mise en œuvre : 15 minutes.
Difficulté : Moyenne
Quand l’utiliser ? : Dans les contenus affichant des produits avec et sans remise.
ÉTAPE 1. Créer un contenu web
1. Accédez à “Contenu > Contenu web” et cliquez sur Créer un nouveau contenu web.
2. Choisissez le type de contenu web approprié, donnez-lui un nom et cliquez sur Créer un contenu web.
Si vous souhaitez en savoir plus sur les cinq types de contenu web, cliquez ici.
3. Incluez au moins un composant avancé de type Produits.
Pour cette étape, nous vous recommandons de consulter l’Éditeur de contenu web et comment créer un bloc de produits personnalisés dans un contenu web.
ÉTAPE 2. Insérer des classes et styles CSS
4. Ajoutez un Composant HTML en haut du design.
5. Ajoutez le fragment de code suivant, en remplaçant le contenu de l’élément HTML.
<style text="text/css">
.cn_discount_0 {
display: none !important;
}
</style>
ÉTAPE 3. Créer les variables dans le contenu dynamique
6. Sélectionnez le bloc de produits dynamique et, dans l’éditeur inclus dans Propriétés, cliquez sur Variables pour en créer une nouvelle à l’endroit où vous souhaitez afficher le prix avec remise.
7. Donnez un nom à la variable qui affichera le prix remisé. Vous pouvez l’appeler : "originalPrice".
8. Cliquez sur Accepter pour enregistrer les modifications.
9. Répétez les actions des points 6, 7 et 8 pour créer la variable qui contiendra la remise. Vous pouvez l’appeler : "discount".
Mettre en valeur les pourcentages de remise avec un design attrayant aidera le contact à y prêter plus d’attention, c’est pourquoi nous vous encourageons à le styliser pour augmenter les chances de conversion.
Dans notre exemple, la remise s’affiche en lettres blanches sur fond rouge et le prix d’origine est barré. Vous pouvez copier le code CSS au point 14.
10. Rendez-vous dans l’onglet Variables et cliquez sur (Modifier) sur la variable récemment créée ("originalPrice").
11. Dans le champ Type de donnée, sélectionnez "Monnaie".
12. Cliquez sur Accepter pour enregistrer les modifications.
Aucun format n’est appliqué à la variable "discount" pour faciliter le fonctionnement du code introduit dans le composant HTML. Toutefois, le symbole pourcentage (%) est ajouté dans l’éditeur pour qu’il soit affiché dans le contenu.
13. Sélectionnez à nouveau le bloc de produits dynamique et, dans l’onglet Propriétés, cliquez sur le bouton Modifier le code HTML.
14. Dans l’éditeur de contenu dynamique, assignez la classe CSS "cn_discount_{{discount}}" aux éléments affichant les variables du prix d’origine et de la remise.
Le bloc qui inclut le pourcentage de remise est le suivant (ligne 2 du code) :
<div class="cn_element_products_2_name" style="margin-top: 15px; word-wrap: break-word; white-space: normal; overflow: hidden; height: 2.1em; line-height: 1em; box-sizing: border-box;"><strong>{{name}} <span class="cn_discount_{{discount}}" style="color: white; background-color: #ff0000;">{{discount}}%</span></strong></div>
Le bloc qui inclut le prix d’origine barré est le suivant (ligne 3 du code) :
<div class="cn_element_products_2_unit_price" style="color: #999999; font-size: 0.9em; word-wrap: break-word; white-space: normal; overflow: hidden; height: 1.1em; line-height: 1em; box-sizing: border-box;"><span style="font-size: 12pt;"><span class="cn_discount_{{discount}}" style="font-size: 14.4px; text-decoration-line: line-through;">{{originalPrice}}</span> {{unitPrice}}</span></div>
15. Cliquez sur Appliquer pour enregistrer les modifications du HTML, puis sur Enregistrer pour sauvegarder le contenu web.
ÉTAPE 4. Créer un workflow pour afficher le contenu web
16. Accédez à “Workflows” et cliquez sur Créer un nouveau workflow.
Pour gagner du temps, vous pouvez utiliser l’un de nos modèles, par exemple : recommandation dans la fiche produit ou crosselling sur la page d’accueil. N’oubliez pas de configurer le workflow comme indiqué avant de continuer cet article.
Si vous préférez concevoir la stratégie depuis zéro, nous vous recommandons de consulter comment afficher des produits personnalisés dans un contenu.
17. Dans le nœud “Envoyer contenu web”, cliquez sur (Modifier la configuration du nœud) et configurez l’attribution des variables.
18. Cliquez sur Terminer pour enregistrer les modifications dans le nœud et sur Enregistrer pour sauvegarder toutes les modifications du workflow.
19. Cliquez sur Démarrer pour activer le workflow.
20. Accédez à votre site web et vérifiez que les pourcentages de remise s’affichent correctement.
Succès !
Les pourcentages de remise de vos produits seront affichés lorsqu’une réduction est appliquée.
Continuez à apprendre !
Pour tirer le meilleur parti de votre compte Connectif, nous vous recommandons de poursuivre avec les articles suivants :
- Afficher le pourcentage de remise uniquement en cas de réduction dans un e-mail, pour appliquer la même fonctionnalité dans les e-mails.
-
Recommandation sur la page d’accueil, pour afficher des produits recommandés selon l’activité du contact sur le site web.
- Meilleures ventes dans la fiche produit, pour afficher au contact, lorsqu’il visite un produit, les articles les plus vendus dans la même catégorie.
-
Recommandation au paiement, pour afficher dans le checkout des produits liés au panier.