English 中文TürkçeРусскийEspañol日本語Tiếng ViệtFrançais

Afficher un prix barré avec un badge de réduction

Un prix barré à côté du vrai prix rend la réduction visible d’un coup d’œil. Cette recette retravaille une carte de produit annuel pour afficher ce que l’abonnement coûterait par mois avec le plan mensuel — barré — à côté du prix mensuel effectif du plan annuel, le tout surmonté d’un badge de réduction.

Le formatage barré s’applique à un élément texte entier — vous ne pouvez pas barrer une variable à l’intérieur d’un texte plus grand. C’est pourquoi le prix barré vit dans son propre élément texte, côte à côte avec le prix réduit dans un conteneur horizontal.

Carte de produit annuel avant et après : une seule ligne de prix annuel vs. un prix mensuel barré, le prix mensuel du plan annuel, et un badge Économisez 75 %

Si un prix « avant » gonflé pour le même produit suffit — par exemple, le double du prix actuel, barré — ajoutez plutôt l’élément Old Price prêt à l’emploi. Cette recette couvre le cas où le prix barré est le vrai prix d’un autre produit.

Avant de commencer

  • Construisez un écran de paywall avec des produits — par exemple, en suivant Créer un écran de paywall de base. Cette recette suppose que le paywall propose un produit annuel et un produit mensuel.

1. Empiler les lignes de prix

La carte annuelle commence avec une seule ligne de prix — la variable prod_price du produit annuel suivie de /year, ce qui s’affiche par exemple comme $29.99/year. Ajoutez une deuxième ligne au-dessus pour la tarification mensuelle.

  1. Dans le panneau Layers, sélectionnez le texte du prix à l’intérieur de la carte de produit annuel. Il se trouve déjà dans le conteneur vertical de la carte, donc la copie s’empilera en dessous.
  2. Cliquez sur le menu à trois points sur le calque et choisissez Duplicate. La copie apparaît sous l’original. À l’étape suivante, le texte du haut devient la ligne de prix mensuel ; celui du bas conserve le prix annuel.
Texte de prix dupliqué empilé sous l'original à l'intérieur de la carte de produit annuel

2. Diviser la ligne mensuelle en deux prix

La ligne mensuelle contient deux éléments texte : le prix barré du plan mensuel et le prix par mois du plan annuel.

Le sélecteur de variables ne propose que les prix des produits présents sur un écran du flow. Pour référencer un produit qui n’est pas dans le flow, créez un écran vide, ajoutez-y un élément Products et assignez-lui le produit. Assurez-vous qu’aucune action de navigation ne mène à cet écran.

  1. Sélectionnez l’élément texte du haut, cliquez sur son menu à trois points et choisissez Wrap > Wrap in Horizontal Container.

  2. Cliquez sur le menu à trois points du calque texte à l’intérieur du nouveau conteneur et choisissez Duplicate.

    Panneau Layers avec le texte du prix du haut enveloppé dans un conteneur horizontal et dupliqué

  3. Sélectionnez le premier élément texte et effacez son champ Content. Cliquez sur l’icône de variable Variable icon, choisissez le produit mensuel, puis son attribut prod_price_per_month. Tapez /month après la variable.

  4. Dans l’onglet Design, sous Typography, réglez Decoration sur Strikethrough (voir Styles et apparence — Decoration).

  5. Sélectionnez le second élément texte et remplacez son contenu de la même manière, mais choisissez l’attribut prod_price_per_month du produit annuel. Tapez /month après la variable.

Deux textes de prix côte à côte avec le prix du produit mensuel barré et le prix mensuel annuel à côté

3. Atténuer le prix annuel

Les prix mensuels dupliqués ont hérité du style du prix original, donc les trois prix partagent actuellement la même taille et la même graisse. Rendez le prix annuel plus discret pour que la ligne mensuelle ressorte davantage.

  1. Sur le canevas, sélectionnez l’élément texte du bas — le prix annuel.
  2. Dans la barre d’outils au-dessus de l’élément, ouvrez le menu déroulant des styles de texte et choisissez un style plus discret — par exemple, Caption. Ou sélectionnez un style différent sous Typography dans l’onglet Design.
Texte du prix annuel sélectionné sur le canevas avec le style Caption sélectionné dans la barre d'outils flottante

4. Ajouter le badge de réduction

Le badge met en valeur l’économie réalisée à côté des prix.

  1. Cliquez sur + > Badge.
  2. Dans le panneau Layers, faites glisser le badge à l’intérieur du produit annuel, entre le conteneur vertical avec les prix et le bouton radio.
  3. Sélectionnez le calque texte du badge et modifiez le champ Content — par exemple, Save 75%.

Il n’existe pas de variable pour le pourcentage de réduction — calculez-le à partir de vos prix et saisissez-le comme texte statique.

Badge avec le texte Save 75% placé entre la colonne de prix et le bouton radio dans la carte de produit annuel

La carte annuelle ancre désormais son prix par rapport au plan mensuel : le prix mensuel barré, le prix mensuel effectif du plan annuel et le badge de réduction se trouvent sur une même ligne, avec le prix annuel complet en dessous.

Carte annuelle terminée avec le prix mensuel barré, le prix mensuel réduit, le badge Save 75% et le prix annuel en dessous

Étapes suivantes