---
title: "Afficher un prix barré avec un badge de réduction"
description: "Barrez le prix mensuel à côté du prix mensuel effectif du plan annuel pour rendre la réduction visible d'un coup d'œil."
---

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.

:::tip
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](onboarding-text#add-an-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 \{#before-you-start\}

- Construisez un écran de paywall avec des produits — par exemple, en suivant [Créer un écran de paywall de base](basic-paywall-screen). Cette recette suppose que le paywall propose un produit annuel et un produit mensuel.

## 1. Empiler les lignes de prix \{#1-stack-the-price-rows\}

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 Context menu 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.

## 2. Diviser la ligne mensuelle en deux prix \{#2-split-the-monthly-row-into-two-prices\}

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

:::important
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**.

   

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** Strikethrough (voir [Styles et apparence — Decoration](builder-styling#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.

## 3. Atténuer le prix annuel \{#3-tone-down-the-yearly-price\}

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**.

## 4. Ajouter le badge de réduction \{#4-add-the-discount-badge\}

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.

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.

## Étapes suivantes \{#next-steps\}

- [Enregistrer et publier votre flow](builder-save-publish).
- [Ajouter le flow à un placement](create-placement) pour commencer à le montrer aux utilisateurs.