Afficher tous les plans dans une bottom sheet

Ce modèle met d’abord en avant une seule offre mise en valeur, avec un lien discret vers la liste complète des plans. En appuyant sur Show all plans, une bottom sheet remonte et affiche les autres produits, un bouton d’achat et les liens de pied de page.

Utilisez-le quand un plan convertit de manière disproportionnée — la bottom sheet garde les alternatives à un tap sans encombrer l’écran principal.

Avant de commencer

• Créez des produits dans l’Adapty Dashboard.
• Connectez Adapty à l’App Store et à Google Play.

1. Configurer la mise en page de l’écran

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

Pour la liste complète des propriétés d’écran, consultez Écrans et couches — Paramètres d’écran.

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 principale s’étende jusqu’aux bords de l’écran.
3. Sous Fill, choisissez Image et importez votre image principale.
4. Sous Layout, configurez la direction, l’espacement et l’alignement pour ancrer le contenu à l’endroit souhaité. Pour ce modèle, une direction 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 d’appel à l’action

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

1. Cliquez sur + > Text > H1.
2. Une fois 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

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 les autres conteneurs de mise en page, consultez Éléments — Mise en page.

Pour ajouter la feuille inférieure et son titre :

1. Cliquez sur + > Layout > Bottom Sheet.
2. Dans le panneau Layers, développez le bottom sheet, 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 le bottom sheet

Placez tous les produits dans le bottom sheet. L’un d’eux servira également à afficher le prix sur le bouton CTA principal.

Pour en savoir plus sur la gestion des produits, consultez Configurer les achats.

Pour ajouter et configurer les produits :

1. Cliquez sur + > Products et choisissez un modèle de mise en page. La liste verticale convient à la plupart des cas. L’élément apparaît sur l’écran, en dehors du bottom sheet.
2. Dans le panneau Layers, faites glisser le calque Products dans le conteneur Content à l’intérieur du bottom sheet.

3. Sélectionnez chaque carte produit sur le canvas et choisissez un produit dans le menu déroulant de l’onglet Design.

5. Ajouter le bouton d’achat dans la bottom sheet

La bottom sheet doit avoir son propre bouton d’achat pour acheter 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 bottom sheet.

3. 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 dans le pied de page de la feuille du bas

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 bien aéré.

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 du bottom sheet.
3. Dans le panneau Layers, sélectionnez le bouton Terms of Use. Ouvrez l’onglet Interactions et collez l’URL de vos conditions d’utilisation dans le champ Open URL.
4. Répétez l’opération pour le bouton Privacy Policy avec votre URL de confidentialité.
5. Laissez le lien Restore Purchases tel quel. Son action est préconfigurée.

7. Masquer la feuille du bas

Le contenu de la feuille étant en place, masquez-la pour qu’elle n’apparaisse pas à l’écran par défaut. Les utilisateurs pourront la révéler en appuyant sur Show all plans à la dernière étape.

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

8. Ajouter le bouton principal d’abonnement

Le bouton principal de l’écran abonne l’utilisateur au plan mensuel en un seul appui. Son libellé utilise la variable de prix du produit mensuel, ce qui garantit 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 bottom sheet.
2. Cliquez sur + > Buttons et choisissez un preset de bouton.
3. Une fois le bouton sélectionné, ouvrez l’onglet Design et placez le curseur dans le champ Content. Cliquez sur 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 du bottom sheet, celui-ci cible un produit spécifique plutôt que products.selectedProduct.

9. Ajouter le lien « Voir tous les forfaits »

Un lien texte sous le bouton d’abonnement affiche le bottom sheet au toucher. L’ajouter en tant qu’élément texte avec le style Button Label garde un aspect épuré 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.

Pour ajouter le lien :

1. L’écran étant sélectionné dans le panneau Layers, cliquez sur + > Text > Button Label.
2. L’élément texte étant sélectionné, modifiez le champ Content pour y écrire 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 bottom sheet dans la liste déroulante.

Prochaines étapes

• Enregistrer et publier votre flow.
• Ajouter le flow à un placement pour commencer à le montrer aux utilisateurs.