English 中文TürkçeРусскийFrançaisTiếng ViệtEspañol日本語

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

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

La mise en forme barrée s’applique à un élément de texte entier — il est impossible de barrer une variable au sein d’un texte plus grand. C’est pourquoi le prix barré se trouve dans son propre élément de texte, côte à côte avec le prix remisé dans un conteneur horizontal.

Carte du 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 %
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 prêt à l’emploi Prix barré. Cette recette couvre le cas où le prix barré correspond au vrai prix d’un autre produit.

Avant de commencer

  • Créez un écran de paywall avec des produits — par exemple, suivez 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 le tarif mensuel.

  1. Dans le panneau Layers, sélectionnez le texte du prix à l’intérieur de la carte du 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 du prix mensuel ; celui du bas conserve le prix annuel.
Duplicated price text stacked under the original inside the yearly product card

2. Diviser la ligne mensuelle en deux prix

La ligne mensuelle contient deux éléments de texte : le prix barré du forfait mensuel et le prix par mois du forfait 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 supérieur, 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 Calques avec le texte du prix supérieur encapsulé 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, sélectionnez le produit mensuel, puis son attribut prod_price_per_month. Tapez /month après la variable.

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

  5. Sélectionnez le second élément texte et remplacez son contenu de la même façon, mais sélectionnez 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 annuel par mois à côté

3. Atténuer le prix annuel

Les prix mensuels dupliqués ont hérité du style de prix d’origine, si bien que les trois prix partagent actuellement la même taille et le même poids. 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 de style 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 Légende choisi dans la barre d'outils flottante

4. Ajouter le badge de réduction

Le badge met en évidence 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 de 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 en texte statique.

Badge avec le texte Économisez 75 % placé entre la colonne de prix et le bouton radio dans la carte produit annuelle

La carte annuelle affiche désormais son prix en référence au forfait mensuel : le prix mensuel barré, le prix mensuel effectif du forfait annuel et le badge de réduction sont sur une même ligne, avec le prix annuel total en dessous.

Carte annuelle finalisée avec le prix mensuel barré, le prix mensuel réduit, le badge Économisez 75 % et le prix annuel en dessous

Étapes suivantes