---
title: "Afficher tous les plans dans une feuille inférieure"
description: "Créez un paywall hero avec un seul CTA, un lien « Afficher tous les plans » et une feuille inférieure qui révèle la liste complète des produits."
---

Ce template met d'abord en avant une seule offre phare, avec un lien discret vers la liste complète des plans. En appuyant sur **Show all plans**, une feuille inférieure remonte et affiche les autres produits, un bouton d'achat et les liens du pied de page.

Utilisez-le lorsqu'un plan convertit nettement mieux que les autres — la feuille inférieure garde les alternatives à portée d'un tap sans encombrer l'écran principal.

## 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. Configurer la mise en page de l'écran \{#1-set-up-the-screen-layout\}

Utilisez l'image hero comme arrière-plan de l'écran et regroupez le reste du contenu en bas, de sorte que l'image remplisse la partie supérieure de l'écran.

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'image hero s'étende jusqu'aux bords de l'écran.
3. Sous **Fill**, choisissez **Image** Image et importez votre image hero.
4. Sous **Layout**, configurez la direction, l'espacement et l'alignement pour ancrer le contenu là où vous le souhaitez. Pour ce template, une direction **Vertical** Vertical avec un petit espacement et un alignement **bottom-middle** regroupe le titre et les boutons dans la partie inférieure de l'écran.

## 2. Ajouter le titre CTA \{#2-add-the-cta-heading\}

Le titre se trouve dans la partie inférieure de l'écran, juste au-dessus du bouton d'abonnement. L'image hero remplit la zone au-dessus.

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

## 3. Ajouter la feuille inférieure et son titre \{#3-add-the-bottom-sheet-and-its-title\}

La feuille inférieure est un conteneur de mise en page qui remonte depuis le bas de l'écran. Ajoutez-la visible pour l'instant — vous la remplirez dans les prochaines étapes et la masquerez une fois le contenu en place. Les éléments masqués ne peuvent pas être modifiés, donc la feuille doit rester visible jusqu'à ce que vous ayez fini de la remplir.

Pour en savoir plus sur les feuilles inférieures et autres conteneurs de mise en page, consultez [Éléments — Layout](builder-elements#layout).

Pour ajouter la feuille inférieure et son titre :

1. Cliquez sur **+** > **Layout** > **Bottom Sheet**.
2. Dans le panneau **Layers**, développez la feuille inférieure, sélectionnez le calque **Title** et modifiez le champ **Content** dans l'onglet **Design** — par exemple, `Choose your plan`.

## 4. Ajouter la liste de produits dans la feuille inférieure \{#4-add-the-product-list-inside-the-bottom-sheet\}

Placez tous les produits à l'intérieur de la feuille inférieure. L'un d'eux alimentera également le prix affiché sur le bouton CTA principal.

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 dans la plupart des cas. L'élément apparaît sur l'écran, en dehors de la feuille inférieure.
2. Dans le panneau **Layers**, faites glisser le calque Products dans le conteneur **Content** à l'intérieur de la feuille inférieure.

3. Sélectionnez chaque carte produit sur le canevas et choisissez un produit dans la liste déroulante de l'onglet **Design**.

## 5. Ajouter le bouton d'achat dans la feuille inférieure \{#5-add-the-purchase-button-inside-the-bottom-sheet\}

La feuille inférieure a besoin de son propre bouton d'achat pour acquérir le plan sélectionné par l'utilisateur dans la liste.

1. Cliquez sur **+** > **Buttons** et choisissez un preset de bouton.
2. Dans le panneau **Layers**, faites glisser le nouveau bouton dans le conteneur **Content** à l'intérieur de la feuille inférieure.

3. Avec le bouton sélectionné, ouvrez l'onglet **Interactions** dans le panneau de droite.
4. Cliquez sur **Add trigger** > **On tap**, puis sur **Add action**.
5. Définissez **Action** sur **Purchase** et **Product** sur `products.selectedProduct`.

## 6. Ajouter les liens du pied de page dans la feuille inférieure \{#6-add-the-footer-links-inside-the-bottom-sheet\}

:::important
N'utilisez pas de [liens inline](onboarding-text#inline-link) pour du texte imbriqué dans des boutons. À la place, configurez l'action **Open URL** sur le bouton lui-même.
:::

Les conditions d'utilisation, la politique de confidentialité et la restauration des achats se trouvent en bas de la feuille — l'écran principal reste ainsi épuré.

1. Cliquez sur **+** > **Buttons** > **Links**. Cela ajoute une ligne avec Restore Purchases, Terms of Use et Privacy Policy.
2. Dans le panneau **Layers**, faites glisser la ligne Links dans le conteneur **Content** à l'intérieur de la feuille inférieure.
3. 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**.
4. Répétez l'opération pour le bouton **Privacy Policy** avec l'URL de votre politique de confidentialité.
5. Laissez le lien **Restore Purchases** tel quel. Son action est préconfigurée.

## 7. Masquer la feuille inférieure \{#7-hide-the-bottom-sheet\}

Une fois le contenu de la feuille en place, masquez-la pour qu'elle n'apparaisse pas sur l'écran par défaut. Les utilisateurs la révèleront en appuyant sur **Show all plans** à la dernière étape.

Dans le panneau **Layers**, sélectionnez la feuille inférieure et définissez son état sur **Hide** Hide. La feuille reste dans l'arborescence des calques mais ne s'affiche plus sur le canevas.

## 8. Ajouter le bouton d'abonnement principal \{#8-add-the-main-subscribe-button\}

Le bouton principal de l'écran abonne l'utilisateur au plan mensuel en un seul tap. Son libellé utilise la variable de prix du produit mensuel pour que le bouton reste synchronisé avec le produit.

1. Dans le panneau **Layers**, cliquez sur l'écran pour que les nouveaux éléments s'ajoutent à la racine, et non à l'intérieur de la feuille inférieure.
2. Cliquez sur **+** > **Buttons** et choisissez un preset de bouton.
3. Avec le bouton sélectionné, ouvrez l'onglet **Design** et placez le curseur dans le champ **Content**. Cliquez sur Variable icon et choisissez la variable de prix pour le produit principal. Entourez-la avec le reste du libellé — par exemple, `Subscribe for {price}/month`.

4. Passez à l'onglet **Interactions** et cliquez sur **Add trigger** > **On tap** > **Add action**.
5. Définissez **Action** sur **Purchase** et **Product** sur le produit souhaité. Contrairement au bouton de la feuille inférieure, celui-ci cible un produit spécifique plutôt que `products.selectedProduct`.

## 9. Ajouter le lien « Afficher tous les plans » \{#9-add-the-show-all-plans-link\}

Un lien textuel sous le bouton d'abonnement révèle la feuille inférieure au tap. L'ajouter en tant qu'élément texte avec le style **Button Label** garde un aspect minimaliste tout en vous permettant d'y associer une action.

Pour en savoir plus sur l'action Afficher/Masquer, consultez [Actions — Afficher/masquer des éléments](onboarding-actions#showhide-elements).

Pour ajouter le lien :

1. Avec l'écran sélectionné dans le panneau **Layers**, cliquez sur **+** > **Text** > **Button Label**.
2. Avec l'élément texte sélectionné, modifiez le champ **Content** pour qu'il affiche `Show all plans`.
3. Ouvrez l'onglet **Interactions** et cliquez sur **Add trigger** > **On tap** > **Add action**.
4. Définissez **Action** sur **Show** et sélectionnez l'élément feuille inférieure dans la liste déroulante.

## É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.