---
title: "Afficher des fonctionnalités différentes par produit"
description: "Affichez une liste de fonctionnalités différente selon le produit sélectionné par l'utilisateur, grâce à la visibilité conditionnelle."
---

Ce template utilise la visibilité conditionnelle pour mettre en avant des listes de fonctionnalités différentes selon les offres. L'écran affiche deux produits — par exemple, Pro et Pro+ — et une liste de fonctionnalités différente apparaît selon le produit sélectionné par l'utilisateur. Un produit est défini par défaut, de sorte que sa liste de fonctionnalités est visible dès le chargement de l'écran.

## Avant de commencer \{#before-you-start\}

- [Créez des produits](create-product) dans l'Adapty Dashboard.
- [Connectez Adapty à l'App Store et à Google Play](integrate-payments).

## 1. Configurez la mise en page de l'écran \{#1-set-up-the-screen-layout\}

L'écran sert de conteneur pour tout ce que vous y ajoutez. Dans cet exemple, l'arrière-plan est une image, mais une couleur unie ou un dégradé fonctionnent de la même façon.

Pour la liste complète des propriétés d'écran, consultez [Écrans et calques — Paramètres d'écran](paywall-layout-and-products#screen-settings).

Pour configurer l'écran :

1. Cliquez sur une zone vide du canevas pour sélectionner l'écran.
2. Sous **System UI**, désactivez **Safe area** pour que l'arrière-plan s'étende jusqu'aux bords de l'écran.
3. Sous **Fill**, choisissez un type d'arrière-plan et configurez-le. Cet exemple utilise une **Image** Image, mais une couleur unie ou un dégradé fonctionnent de la même façon.
4. Sous **Layout**, définissez la direction sur **Vertical** Vertical et configurez l'espacement et l'alignement pour que les éléments s'empilent depuis le haut, le contenu occupant l'espace restant.

## 2. Ajoutez le bouton de fermeture \{#2-add-the-close-button\}

Le bouton de fermeture permet de quitter le paywall. Le preset **Close** est préconfiguré — aucune configuration d'action n'est requise.

1. Sur le canevas, cliquez sur **+**.
2. Sélectionnez **Buttons** > **Close**.

## 3. Ajoutez le titre et associez-le au bouton de fermeture \{#3-add-the-title-and-pair-it-with-the-close-button\}

Le titre se place à côté du bouton de fermeture en haut de l'écran. Pour les aligner horizontalement, enveloppez-les tous les deux dans un conteneur horizontal.

Pour ajouter le titre :

1. Cliquez sur **+** > **Text** > **H1**.
2. Avec le H1 sélectionné, ouvrez l'onglet **Design** et modifiez le texte dans le champ **Content**.

Pour regrouper le titre avec le bouton de fermeture :

1. Dans le panneau **Layers**, cliquez sur le menu à trois points Context menu du calque du bouton de fermeture et choisissez **Wrap** > **Wrap in Horizontal Container**.

2. Faites glisser le calque H1 dans le nouveau conteneur horizontal.

Pour aligner les deux éléments :

1. Ajustez la taille du bouton de fermeture et la taille de police du H1 pour qu'ils tiennent confortablement sur la même ligne.
2. Avec le conteneur horizontal sélectionné, définissez l'alignement et la distribution dans le panneau de droite pour que les éléments s'alignent correctement.

## 4. Ajoutez la liste de produits \{#4-add-the-product-list\}

Ajoutez les produits entre lesquels l'utilisateur peut choisir. Marquez-en un par défaut afin que l'écran ait un état cohérent dès le premier chargement.

Pour en savoir plus sur la gestion des produits, consultez [Configurer les achats](paywall-product-block).

Pour ajouter et configurer les produits :

1. Cliquez sur **+** > **Products** et choisissez un preset de mise en page. La liste verticale convient bien à ce template.
2. Sélectionnez chaque carte produit sur le canevas et choisissez un produit dans le menu déroulant de l'onglet **Design**.
3. Sélectionnez la carte que vous souhaitez sélectionnée par défaut — par exemple, Pro+ — et activez **Set as default product** dans l'onglet **Design**.

## 5. Ajoutez la liste de fonctionnalités du premier produit \{#5-add-the-feature-list-for-the-first-product\}

La première liste de fonctionnalités décrit le produit par défaut. Elle n'est visible que lorsque l'utilisateur a sélectionné le premier produit.

Pour en savoir plus sur la visibilité conditionnelle, consultez [Visibilité conditionnelle](onboarding-element-visibility).

:::tip
Plutôt que deux listes séparées, vous pouvez ajouter une seule liste et rendre les éléments texte à l'intérieur conditionnels, de façon qu'une seule liste s'adapte au produit sélectionné. Voir [Ajouter du texte conditionnel](onboarding-text#add-conditional-text).
:::

Pour ajouter et configurer la liste de fonctionnalités :

1. Cliquez sur **+** > **List** et choisissez un preset de liste compacte. Icon List convient bien aux paywalls.
2. Avec chaque ligne sélectionnée, modifiez le titre dans le champ **Content** pour décrire les fonctionnalités du premier produit.
3. Avec la liste toujours sélectionnée, ouvrez l'onglet **Design**. Sous **Visibility**, sélectionnez **Conditional** Conditional.
4. Configurez la condition pour que la liste s'affiche uniquement lorsque le premier produit est celui actuellement sélectionné. Faites correspondre avec la variable `products.selectedProduct.prod_title`. Pour la **Value**, cliquez sur l'icône de variable `{}`, sélectionnez la première carte produit, puis son attribut `prod_title` — la comparaison se résout au titre de ce produit.

## 6. Ajoutez la liste de fonctionnalités du second produit \{#6-add-the-feature-list-for-the-second-product\}

Répétez la même approche pour le second produit. Les deux listes sont mutuellement exclusives — une seule est visible à la fois, selon le produit sélectionné.

Pour ajouter la seconde liste de fonctionnalités :

1. Cliquez sur **+** > **List** et choisissez le même preset compact pour la cohérence visuelle.
2. Modifiez chaque ligne pour décrire les fonctionnalités du second produit.
3. Sous **Visibility**, sélectionnez **Conditional** Conditional et configurez la même condition qu'à l'étape 5, mais pointez le sélecteur de variable **Value** sur le `prod_title` de la seconde carte produit.

## 7. Ajoutez le bouton d'achat \{#7-add-the-purchase-button\}

Le bouton d'achat lance l'achat intégré pour le produit sélectionné par l'utilisateur. Son libellé utilise le prix du produit sélectionné, il se met donc à jour lorsque l'utilisateur change d'offre.

Pour en savoir plus sur l'action Achat, consultez [Actions — Achat](onboarding-actions#purchase).

Pour ajouter et configurer le bouton d'achat :

1. Cliquez sur **+** > **Buttons** et choisissez un preset de bouton.
2. Avec le bouton sélectionné, ouvrez l'onglet **Design** et placez le curseur dans le champ **Content**. Cliquez sur l'icône de variable Variable icon, sélectionnez `products.selectedProduct`, puis l'attribut `prod_price` — la variable complète se résout en `products.selectedProduct.prod_price`. Entourez-la du reste du libellé — par exemple, `Subscribe for {prod_price}`.

3. Passez à l'onglet **Interactions** et cliquez sur **Add trigger** > **On tap** > **Add action**.
4. Définissez **Action** sur **Purchase** et **Product** sur `products.selectedProduct`.

## 8. Ajoutez les liens du pied de page \{#8-add-the-footer-links\}

Les conditions d'utilisation, la politique de confidentialité et la restauration des achats se trouvent sous le contenu principal.

Pour ajouter les liens du pied de page :

1. Cliquez sur **+** > **Buttons** > **Links**. Cela ajoute une ligne avec Restore Purchases, Terms of Use et Privacy Policy à la fin de l'arborescence des calques.
2. Dans le panneau **Layers**, sélectionnez le bouton **Terms of Use**. Ouvrez l'onglet **Interactions** et collez l'URL de vos conditions dans le champ **Open URL**.
3. Répétez l'opération pour le bouton **Privacy Policy** avec votre URL de confidentialité.
4. Laissez le lien **Restore Purchases** tel quel. Son action est préconfigurée.

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

- [Enregistrez et publiez votre flow](builder-save-publish).
- [Ajoutez le flow à un placement](create-placement) pour commencer à le montrer aux utilisateurs.